前端原生JS动态给数字添加千位符

最新推荐文章于 2026-06-25 15:03:04 发布

原创最新推荐文章于 2026-06-25 15:03:04 发布 · 810 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #vue.js #html5

公用方法专栏收录该内容

1 篇文章

订阅专栏

这篇博客分享了一种使用JavaScript实现动态给数字添加千位符的方法，适用于处理包含小数点的数字。代码简洁易懂，适用于前端开发中对数字格式化的场景，尤其在处理大量数字显示时能提升用户体验。此方法可以被整合到Vue项目的util工具库中，方便全局调用。

前端原生JS动态给数字添加千位符

方法

之前找过很多网上的给数字动态添加千位符的代码，发现有很多都不靠谱，今天自己整理了一下，欢迎各位大佬提bug
废话不多说，先上代码

//千位符
thousand:function(valueList){
    var count
    var nValueArr
    var list = []
    valueList.forEach((item)=> {
        let valueArr = item.split("").reverse()
        count = 0
        nValueArr=[]
        if(valueArr.length > 3){
            if(valueArr.indexOf('.') == -1){
                for(var i=0;i<valueArr.length;i++){
                    count++
                    nValueArr.unshift(valueArr[i])
                    if(count % 3 == 0 && i !== 0){
                        nValueArr.unshift(',')
                    }
                }
            }else{
                var num = valueArr.indexOf('.')
                for(var i=0;i<valueArr.length;i++){
                    count++
                    nValueArr.unshift(valueArr[i])
                    if((count - num - 1) % 3 == 0 && i !== 0 && (count - num - 1) !== 0){
                        nValueArr.unshift(',')
                    }
                }
            }
            if(nValueArr[0] == ','){
                nValueArr.splice(0,1)
            }
        }else{
            nValueArr = valueArr.reverse()
        }
        list.push(nValueArr.join(""))
    });
    return list
},

说明

1、该方法允许调用时传递一个参数，参数类型为 Array(数组)，数组内的数字格式为 String(字符串)，允许传入的数组长度没有限制。

例如
['1234'] 或者 ['1234','2345','3456']

2、该方法判断了传入的String类型数字是否存在小数点，若数字存在小数点，则千位符从小数点前截取三位添加，小数点后数字位数不做限制。

例如
['1234.12'] 或者 ['1234.12','2345.23','3456.34']

3、当调用该方法并正确的传递参数后，该方法会返回一个Array数组，数组内的数字即为添加好千位符的数字。Vue使用时建议可以在utils文件夹内新建一个*.js文件，并将该方法在main.js内注册至全局，然后在组件内this.$(注册的名字).thousand(Array参数)调用即可。