如何在JavaScript中为计算得出的数值添加千位逗号分隔符

问题原因 #

你的千位分隔符逻辑没有生效，核心问题有两个：

• 你绑定的input事件监听对象.total是普通<p>标签，不存在用户输入行为，永远不会触发该事件，格式化逻辑从头到尾都不会执行
• 你使用.val()方法操作<span id="total">的内容，.val()仅适用于表单类元素，操作普通元素文本需要用.text()方法

修复方案 #

不需要单独绑定格式化事件，直接在计算总价时对结果做格式化即可，推荐用JS原生的toLocaleString方法实现，不用自己写正则匹配，代码更简洁：

1. 删掉你写的那段/*For number formatting*/开头的冗余监听代码
2. 修改计算总价的逻辑，修改后完整JS代码如下：

$(document).ready(function() {
  $(".calculator").on("input", ".quantity", function() {
    var price = +$(".price").data("price");
    var quantity = +$(this).val();
    const totalAmount = price * quantity;
    // 用toLocaleString自动添加千位分隔符
    $("#total").text("$" + totalAmount.toLocaleString('en-US'));
  })

  var $buttonPlus = $('.increase-btn');
  var $buttonMin = $('.decrease-btn');
  var $quantity = $('.quantity');
  
  /*For plus and minus buttons*/
  $buttonPlus.click(function() {
    $quantity.val(parseInt($quantity.val()) + 1).trigger('input');
  });
  
  $buttonMin.click(function() {
    $quantity.val(Math.max(parseInt($quantity.val()) - 1, 0)).trigger('input');
  });
})

如果你想用你原来的正则方案，把计算总价的部分改成下面的写法即可：

const totalAmount = price * quantity;
const formatAmount = totalAmount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
$("#total").text("$" + formatAmount);

修改后数量为2时，总价就会自动显示为$1,400。

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