如何适配jQuery计数动画脚本以处理格式化数字并避免NaN错误？

嗨，这个问题其实很典型——原脚本踩了个小坑：直接把带千分位逗号的字符串当作数字来用，JavaScript没法识别带逗号的数字字符串，自然就抛出NaN错误了。咱们通过两个关键修改就能完美解决：

修改核心思路 #

• 先清洗目标元素的文本：去掉所有千分位逗号，转换成合法的数字类型，作为动画的目标值
• 在动画过程中，把当前计数的数字重新格式化成带千分位的字符串，保证显示效果和原始需求一致

修改后的完整代码 #

$('.count').each(function() {
    // 移除千分位逗号并转换为整数
    const targetNumber = parseInt($(this).text().replace(/,/g, ''), 10);
    $(this).prop('Counter', 0).animate({
        Counter: targetNumber
    }, {
        duration: 2000,
        easing: 'swing',
        step: function(now) {
            // 将当前计数数字格式化为带千分位的字符串
            $(this).text(Math.ceil(now).toLocaleString());
        }
    });
});

关键改动说明 #

1. 修复目标数字解析：用replace(/,/g, '')全局替换掉所有逗号，再通过parseInt转成整数（如果需要支持小数场景，换成parseFloat即可），这样Counter的目标值就变成了合法数字，不会再出现NaN。
2. 优化显示格式：在step回调里用toLocaleString()方法自动格式化数字，这个方法不仅能添加千分位，还能根据地区适配格式，比手动拼接逗号更健壮。

如果你的场景需要保留小数计数，只需要把parseInt改成parseFloat，Math.ceil换成Math.round或者自定义保留小数位的逻辑就可以了。

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