JavaScript 如何让文本框中的计算结果固定显示两位小数？

2026-11-04数据小许

先计算乘积，再用 toFixed(2) 格式化，并将返回值赋给 unloadedtotal.value。JavaScript 数字没有标准的 .force(2) 方法，应使用 Number.prototype.toFixed()。

修改计算函数

保留现有 HTML，将 calculateSum() 改为：

function calculateSum() {
  if (document.getElementById("unloadedcheck").checked) {
    const total =
      document.getElementById("unloadedrate").value *
      document.getElementById("unloadedmiles").value;

    document.getElementById("unloadedtotal").value = total.toFixed(2);
  } else {
    document.getElementById("unloadedtotal").value = "0.00";
  }
}

例如，费率为 3.00、里程为 2 时，文本框会显示 6.00。

为什么需要格式化结果

文本框的 .value 是字符串，但 * 运算符会将两个操作数转换为数字后相乘。数字不会保留用于显示的末尾零，因此直接将计算结果写回文本框时，可能显示为 6 或 7.5。

toFixed(2) 返回保留两位小数的字符串：小数位不足时补零，超过两位时按其舍入规则处理。

(6).toFixed(2);      // "6.00"
(7.5).toFixed(2);    // "7.50"
(7.256).toFixed(2);  // "7.26"

返回的字符串可以直接赋给文本框的 .value。不要用 Number() 或 parseFloat() 再次转换，否则末尾的零会丢失。

输入处理注意事项

上面的修改保留了原代码的输入转换行为：空字符串参与乘法时会转换为 0；无法转换为数字的内容会使结果变成 NaN，最终显示 "NaN"。如果不允许空输入或非数字输入，应在计算前进行校验。toFixed(2) 负责格式化，不能验证输入。

JavaScript 的 Number 使用二进制浮点数，某些十进制小数的舍入结果可能与直觉不同。固定显示两位小数不会消除底层的浮点精度误差。