JavaScript算术运算异常：循环累加结果不符预期，求原因与解决方法

问题原因 #

这个坑我踩过好多次了——核心问题出在**toFixed()方法的返回值类型上！你可能误以为toFixed(2)会返回一个数字，但实际上它返回的是字符串**类型，这直接导致了后续的计算逻辑混乱：

看你的代码细节：

var rate = parseFloat(10).toFixed(2); // 实际是字符串 "10.00"
var quantity = parseFloat(15).toFixed(2); // 实际是字符串 "15.00"

第一次循环时，rate * quantity会被JS自动转成数字计算（10*15=150），加上初始为0的sub_total（数字），得到150，然后你用toFixed(2)把它转成字符串"150.00"并重新赋值给sub_total。

从第二次循环开始就出问题了：rate * quantity还是数字150，但此时sub_total是字符串"150.00"，JS遇到数字 + 字符串会触发字符串拼接，而不是数字加法。于是：

• 第二次循环后：150 + "150.00" → "150150.00"
• 第三次循环后：150 + "150150.00" → "150150150.00"
  最后转成浮点数再toFixed，自然就得到了错误的结果。

解决方法 #

核心原则：中间计算过程保持数字类型，只在最终输出时做格式化。这里给你两种可行的修复方案：

方案1：推荐！仅在最终输出时格式化（最简洁）

把所有toFixed()移到最后，中间全程用数字计算：

var sub_total = 0; 
for(var i = 0; i <= 3; i++){ 
  var rate = 10; // 直接用数字，无需多余的parseFloat和toFixed
  var quantity = 15;
  sub_total += rate * quantity; // 纯数字加法，无类型混乱
} 
console.log(sub_total.toFixed(2)); // 最后统一格式化输出450.00

方案2：如果需要中间保留精度（避免浮点误差）

如果必须在中间步骤控制小数精度，记得每次计算后把结果转回数字类型：

var sub_total = 0; 
for(var i = 0; i <= 3; i++){ 
  var rate = parseFloat(10).toFixed(2); 
  var quantity = parseFloat(15).toFixed(2); 
  // 先把所有参与计算的变量转回数字，再执行加法
  sub_total = parseFloat(sub_total) + parseFloat(rate) * parseFloat(quantity);
} 
console.log(sub_total.toFixed(2)); // 输出450.00

内容的提问来源于stack exchange，提问作者Shah Rushabh