购物车.totalPrice元素求和时浮点数显示异常问题求助

问题原因 #

parseFloat() 无法识别包含千分位分隔符（如.）的数值字符串，遇到第二个.时会停止解析。例如输入1.005.67，parseFloat()会返回1.005而非正确的1005.67，直接导致求和结果异常。

修复后的代码 #

JavaScript 部分 #

function sum() {
    let sum = 0;
    $('.totalPrice').each(function () {
        // 清理数值格式：移除千分位的点，将逗号（作为小数点）转为标准点
        const cleanValue = this.value.replace(/\./g, '').replace(',', '.');
        // 容错处理：空值或非数值时加0，避免NaN污染结果
        sum += parseFloat(cleanValue) || 0;
    });
    // 按需求格式化输出：保留两位小数，将小数点转为逗号
    $("#total").text("Total: $" + sum.toFixed(2).replace(".", ","));
}

HTML 部分（保持原结构即可） #

<label>
    <label> Value 1 </label>
    <input type="text" class="totalPrice">
</label>
<br><br><br>
<label>
    <label> Value 2 </label>
    <input type="text" class="totalPrice">
</label>
<br><br><br>
<button onclick="sum()"> calculate </button>
<h1 id="total"> </h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

关键修改说明 #

• 数值格式化清理：先移除所有千分位的点，再将地区化的小数点逗号转为标准点，确保parseFloat()能正确解析数值。
• 容错机制：通过|| 0处理空输入或非数值内容，避免求和结果出现NaN。
• 输出格式兼容：保留原代码中把小数点转为逗号的逻辑，符合需求的显示格式。

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