JS基于正则实现数字千分位用逗号分割

最新推荐文章于 2023-05-09 19:07:17 发布

原创最新推荐文章于 2023-05-09 19:07:17 发布 · 2.4w 阅读

18 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#正则 #javascript

Javascript 同时被 2 个专栏收录

30 篇文章

订阅专栏

正则表达式

1 篇文章

订阅专栏

本文介绍了一种实用的数字格式化方法，通过JavaScript实现数字的千分位逗号分隔，适用于带小数点和整数的情况。对于带有小数点的数字，利用toLocaleString()方法；对于整数，则采用正则表达式实现。

由于业务中经常出现要实现数字千分位用逗号分割以方便查阅数据的需求，因此封装一个函数，方便复用。

情景1：

如果数字带有小数点的话，可以使用toLocaleString()方法实现这个需求。

var a = 8462948.24;
b.toLocaleString();
//8,462,948.24

情景2：

不带小数点我们可以简单的写个正则去实现。

（有小数点我们可以用split()分割，得到数组，里面存储这整数和小数部分，使用正则匹配实现整数加入逗号，最后拼接起来。但是不如直接使用上面方法，简单粗暴。）

num.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')

匹配规则就是：将该num转化为字符串后，全局（/g）正向匹配，看是否符合断言（?=(?:\d{3})+$）部分，直到匹配结束。即遇到数字 + 该数字后面紧跟连续的三位数字（并且不管这连续的三位数字出现多少次），符合则在该数字（’$1’）后加入逗号，替换的时候忽略（？：）这连续的三位数.

上面描述的可能不够到位，可结合代码理解。

封装为函数

判读是否带有小数点，有则以情景1的方式实现。
没有小数点，就用正则匹配实现。

    function numFormat(num) {
        if (num.toString().indexOf ('.') !== -1)  {
        var b = num.toLocaleString();
        return b;
        } else {
            var c = num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
            return c;
        }
    }

继续对上面代码进行优化：

function numFormat(num) {
        var c = (num.toString().indexOf ('.') !== -1) ? num.toLocaleString() : num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
        return c;
    }