JavaScript两位小数浮点数相加出现拼接而非求和问题咨询

异常根因 #

• 你遇到的拼接问题本质是toFixed()方法的返回值类型问题：Number.prototype.toFixed() 执行后返回的是字符串类型，而非数值类型。
• JS的+运算符规则为：两侧只要存在一个字符串类型的值，就会执行字符串拼接逻辑，而非数值加法。你原有代码中先对cost单独调用toFixed(2)得到字符串，再和数值类型的servicefee相加，就会触发隐式类型转换，数值被转成字符串后拼接，最终得到错误结果。
• 额外隐藏问题：你第一个下拉选项的value使用逗号1725,52作为小数分隔符，但是parseFloat仅支持识别英文句号.作为小数分隔符，解析该值时会直接截断逗号后的内容，仅返回1725，也会导致计算结果偏差。

修复方案 #

正确逻辑为先完成所有数值运算，最后再做格式化保留小数位，同时处理逗号分隔符兼容问题，修复后代码如下：

function update() {
  var servicefee = 1300;
  var select = document.getElementById('select-visa');
  // 先把value中的逗号替换为英文句号，再转浮点数
  var cost = parseFloat(select.options[select.selectedIndex].value.replace(',', '.'));
  // 先做数值加法，计算完成后统一调用toFixed格式化
  var total = (servicefee + cost).toFixed(2);
  document.getElementById('total').innerHTML =  total;
}

如果可以修改HTML源码，建议直接把option的value="1725,52"改为value="1725.52"，可以省去前端替换分隔符的步骤。

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