在 jquery 脚本中每 3 位数字添加逗号

Question

<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>

输出如下：

Total Steps: 3943958(increasing).

现在我想在每 3 位数字中包含逗号，我找到了一个代码

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

那么，我怎样才能得到像

这样的输出呢？

Total Steps: 3,943,958(increasing every second)

?

谢谢，

Answer 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, ","));
  })
}

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[=56= 的精神]
go函数是你想要在每个时间间隔调用的函数，所以你可以将go传递给setInterval（不需要将它包装在[=49=中） ]另一个函数)

在 jquery 脚本中每 3 位数字添加逗号

Add commas every 3 digit on jquery script

format

jquery

numbers

comma

number-formatting