如何将.get().reduce()中的parseInt替换为parseFloat实现浮点数求和

我正在开发一个小型系统，需要自动计算带千位分隔符的浮点数（比如1,124.35、20,345.45这类）的总和，计算时不能把数值取整成整数，结果得是float类型，而且显示的时候要支持千位格式（示例：TOTAL: 24,345.25）。目前用的jQuery代码里用了parseInt，得改成parseFloat来满足需求，原代码如下：

原代码 #

JavaScript部分 #

jQuery($ => {

  const $expenses_debit = $(".expenses_debit"); //PS: 建议用更具体的选择器
  const $res_debit = $("#result_debit");

  $expenses_debit.on("input", () => {
    const total = $expenses_debit.get().reduce((acc, el) => (acc += parseInt(el.value, 10) || 0), 0);
    $res_debit.text(total);
  });
  
});

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td>Due to BIR</td><td> <input type="number" class="expenses_debit"></td>
    </tr>
    <tr>
        <td>Advances for Operating Expenses</td><td> <input type="number" class="expenses_debit"></td>
    </tr>
    <tr>
        <td>Advances to Special Disbursing Officers</td><td> <input type="number" class="expenses_debit"></td>
    </tr>
    <tr>
        <td>TOTAL</td><td><output id="result_debit"></output></td>
    </tr>
</table>

修改后的代码 #

核心修改点 #

• 替换parseInt为parseFloat，但先去除输入值中的千位逗号（否则parseFloat无法正确解析带逗号的数值）
• 用原生APIIntl.NumberFormat格式化结果，自动添加千位分隔符并保留两位小数，比手动正则更可靠
• 处理空输入或非数值情况，避免出现NaN

修改后的JavaScript代码 #

jQuery($ => {

  const $expenses_debit = $(".expenses_debit");
  const $res_debit = $("#result_debit");

  $expenses_debit.on("input", () => {
    // 计算总和：先清除逗号，再转浮点数，空值/非数值按0处理
    const total = $expenses_debit.get().reduce((acc, el) => {
      const cleanValue = el.value.replace(/,/g, '');
      return acc += parseFloat(cleanValue) || 0;
    }, 0);
    
    // 格式化结果：千位分隔符+强制保留两位小数
    const formattedTotal = new Intl.NumberFormat('en-US', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    }).format(total);
    
    $res_debit.text(`TOTAL: ${formattedTotal}`);
  });
  
});

适配的HTML（支持输入带逗号的数值） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td>应付BIR</td><td> <input type="text" class="expenses_debit" placeholder="例如：1,124.35"></td>
    </tr>
    <tr>
        <td>运营费用预支</td><td> <input type="text" class="expenses_debit" placeholder="例如：20,345.45"></td>
    </tr>
    <tr>
        <td>特殊出纳预支</td><td> <input type="text" class="expenses_debit" placeholder="例如：500.75"></td>
    </tr>
    <tr>
        <td>总计</td><td><output id="result_debit"></output></td>
    </tr>
</table>

补充说明 #

1. 输入类型调整：type="number"不允许输入逗号，因此改成type="text"才能支持用户输入带千位分隔符的数值，同时添加placeholder提示格式
2. 数值解析：用replace(/,/g, '')清除所有逗号后再解析，确保浮点数计算准确
3. 格式化逻辑：Intl.NumberFormat是浏览器原生API，支持多语言格式，这里用'en-US'标准生成千位分隔符，强制保留两位小数符合财务数值展示习惯

内容的提问来源于stack exchange，提问作者Mike Ahren Rances