JavaScript浮点数乘法结果异常，如何修复购物车总价计算问题？

你的问题核心是JavaScript浮点数的二进制存储精度缺陷——像0.1这类十进制小数无法被二进制精确表示，多次累加后误差会被放大，最终导致总价计算偏差。

修复思路 #

将所有金额转换为整数（以“分”为单位）进行计算，彻底规避浮点数运算的精度问题，计算完成后再转回“元”并保留两位小数。

修改后的代码 #

function updateTotalBasket() {
    var basketItems = document.querySelectorAll(".basket_item");
    var quantity;
    var priceText;
    var totalPriceInCents = 0; // 用分作为单位存储总价，避免浮点数误差

    basketItems.forEach((item) => {
        // 把数量转为整数，确保整数运算
        quantity = parseInt(item.querySelector(".quantity").value, 10);
        priceText = item.querySelector(".price").innerHTML.trim();
        
        // 清除价格中的非数字/小数点字符，转换为分并取整
        var priceInCents = Math.round(parseFloat(priceText.replace(/[^0-9.]/g, '')) * 100);
        
        totalPriceInCents += quantity * priceInCents;
    });

    var totalPriceElement = document.querySelector("#totalPrice");
    // 转换回元，保留两位小数
    totalPriceElement.innerHTML = (totalPriceInCents / 100).toFixed(2);
    console.log(totalPriceInCents / 100);
}

关键改动说明 #

• 用整数类型的totalPriceInCents存储总价，从根源避免浮点数累加的精度损失
• 数量通过parseInt转为整数，确保运算逻辑符合购物场景（数量应为整数）
• 处理价格时先清除可能的货币符号（如¥、$），再通过Math.round保证转换为分时的精度
• 最终将总分数除以100转回元，用toFixed(2)保证格式符合金额展示要求

这样就能精准计算出预期的2953.48总价，彻底解决浮点数运算的误差问题。

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