在 jquery 脚本上每 3 位添加逗号答案

【问题标题】：Add commas every 3 digit on jquery script在 jquery 脚本上每 3 位添加逗号
【发布时间】：2020-02-15 08:13:17
【问题描述】：

<div>
  <h2>    Total Steps:  <span id="steps" class="commas"></span></h2>
</div>

<script>

        var from_date       = new Date("2020-01-01 00:00:00") /1000;
        var now             = Date.now() / 1000;
        var year2020        = now - from_date;

        var speed = 100;


        // Random Meter
    $(document).ready(function () {
        go();
        setInterval(function () {
            go();
        }, speed);
    });
            var random_increment = Math.floor((Math.random() * 5) + 5);
    function go() {
        $("#steps").html(year2020.toFixed(0));
        year2020 += random_increment;
    }   

</script>

输出如下：

总步数：3943958（递增）。

现在我想为每 3 位添加逗号，我找到了一个代码

$.fn.digits = function(){ 
    return this.each(function(){ 
        $(this).text( $(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") ); 
    })
}

那么，我怎样才能得到像

这样的输出

总步数：3,943,958（每秒递增）

谢谢，

【问题讨论】：

标签： jquery format numbers number-formatting comma

【解决方案1】：

如果必须使用$.fn.digits方法，请在设置#steps元素的.html后调用.digits()：

var from_date = new Date("2020-01-01 00:00:00") / 1000;
var now = Date.now() / 1000;
var year2020 = now - from_date;
var speed = 100;
var random_increment = Math.floor((Math.random() * 5) + 5);

function go() {
  $("#steps")
    .html(year2020.toFixed(0))
    .digits();
  year2020 += random_increment;
}

$.fn.digits = function() {
  return this.each(function() {
    $(this).text($(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
  })
}

go();
setInterval(go, speed);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h2> Total Steps: <span id="steps" class="commas"></span></h2>
</div>

但是直接在year2020.toFixed 字符串上调用.replace 会更简单：

var from_date = new Date("2020-01-01 00:00:00") / 1000;
var now = Date.now() / 1000;
var year2020 = now - from_date;
var speed = 100;
var random_increment = Math.floor((Math.random() * 5) + 5);

function go() {
  const newStr = year2020
    .toFixed()
    .replace(/\d(?=(?:\d{3})+(?!\d))/g, "$&,");
  $("#steps").text(newStr);
  year2020 += random_increment;
}

go();
setInterval(go, speed);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h2> Total Steps: <span id="steps" class="commas"></span></h2>
</div>

注意：

由于#steps 元素只包含纯文本，因此.text 比.html 更合适
toFixed 的参数默认为 0：不需要显式传递 0。
正则表达式不需要使用捕获组 - 因为整个匹配只是单个数字，您不需要捕获它，您可以使用 $& 替换为该数字
可以使用量词减少正则表达式中的重复标记 - 例如，\d\d\d 可以替换为 \d{3}，本着 DRY 的精神
go 函数是您要在每个间隔调用的函数，因此您只需将go 传递给setInterval（无需将其包装在另一个 函数中）李>

【讨论】：