为什么使用jQuery向DOM追加内容时，经toFixed处理的数值会发生变更？

问题根因 #

这个问题是JS浮点数精度缺陷和业务逻辑的隐藏处理共同导致的：

1. 原生JS采用IEEE 754双精度浮点数存储数值，类似550.47这类十进制小数无法被精确存储，底层实际保存的是近似值550.4699999999997。
2. 你代码里toFixed(2)返回的本身就是字符串，拼接HTML时的值是对的，但在append操作执行前后，大概率存在你没注意到的全局处理逻辑：比如监听DOM插入自动格式化金额的脚本、或者你自己写的后续处理逻辑，把节点里的"550.47"字符串强制转成了数字类型再回写，转数字的过程就把底层的精度缺陷暴露了出来。

修复方案 #

可根据业务场景任选以下方案：

• 方案1（最推荐，根源解决）：所有金额计算全程以「分」为单位用整数运算，最终渲染时再除以100格式化：

  // 转成整数分存储、运算
  const discountCent = Math.round(parseFloat(discount[1].trim()) * 100);
  // 渲染时转成元，保留两位小数
  const discountPrice = (discountCent / 100).toFixed(2);
  

• 方案2：如果不方便调整计算逻辑，先排查全局所有DOM操作、金额处理的公共逻辑，确保拿到金额值后直接用字符串处理，不要转Number类型再回写DOM。
• 方案3：引入big.js、decimal.js这类精度运算库处理所有金额计算，规避原生JS浮点数缺陷。

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