如何使用jQuery为header标签的数值添加千位分隔符

问题原因 #

你的代码存在两个核心错误：

• 仅读取了元素的内容做格式化，没有将格式化后的结果回写到DOM元素中，页面展示自然不会生效
• 从DOM中取出的内容默认是字符串类型，toLocaleString()是数字类型的内置方法，直接对字符串调用不会产生千位分隔效果，需要先转换为数字类型

修正代码 #

单元素场景（页面只有一个class为formatvalue的h5标签）

$(document).ready(function(){
    // 提取文本内容、去除前后空格、转换为数字
    const originNum = Number($(".formatvalue").text().trim());
    // 格式化后回写到元素中
    $(".formatvalue").text(originNum.toLocaleString());
});

多元素通用场景（页面有多个需要格式化的同class元素）

$(document).ready(function(){
    $(".formatvalue").each(function(){
        const rawValue = $(this).text().trim();
        // 先判断是否为有效数字，避免非数值内容报错
        if(!isNaN(rawValue) && rawValue !== ''){
            const formattedValue = Number(rawValue).toLocaleString();
            $(this).text(formattedValue);
        }
    });
});

注意事项 #

如果你的数值自带货币符号、单位等非数字字符，需要先将非数字内容剔除后再转数字格式化，完成后再把符号/单位拼接回去即可。

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