JS千分化数字
方法一:使用正则表达式
语法如下:
String(Number).replace(/(\d)(?=(\d{3})+$)/g, "$1,");
举例:
String(123456789).replace(/(\d)(?=(\d{3})+$)/g, "$1,");
结果是:123,456,789
下面对这个正则表达式进行解释。
-
\d{3}
匹配3个连续的数字
。 -
(\d{3})+
是一个重复至少1次的分组,用来匹配3个连续数字,3个连续数字,3个连续数字,...
。由于+
是贪婪的,它总是匹配尽可能多的字符,此时对于字符串1234567890
来说,(\d{3})+
的匹配结果只有1个:123456789
。 -
(\d{3})+$
匹配这样的字符串,它的数字个数是3的倍数,并且最后必须是行的结尾。所以对于字符串123456789
来说,匹配的结果是123456789
,而对于1234567890
,结果就是234567890
。 -
(?=(\d{3})+$)匹配一个位置(零宽断言,即只匹配位置,不匹配任何实际的字符)。
叫做前瞻,它匹配一个位置。B(?=A)匹配符合A,并且A之前紧挨着B的字符串,但是A只参与判断(断言),并不会包含在匹配的结果中。
所以(?=(\d{3})+$)
的意思就好理解了。对于字符串1234567890
来说,1
和2
之间的位置是符合要求的,因为234567890
符合 3 的要求,同理,4
和5
之间、7
和8
之间的位置也符合要求。
- 整个正则表达式的意思也就非常清晰了。
(\d)(?=(\d{3})+$)
是在 4 的基础上,前面跟着一个数字。所以,1
和2
之间的位置前面的字符是1
。整个正则表达式的匹配结果就是
整个JavaScript语句String(Number).replace(/(\d)(?=(\d{3})+$)/g, "$1,");
的执行结果如下:
其中的$1
是对第一个分组的引用,"$1,"
的意思是在原来字符串的基础上加上一个逗号,
。
方法二:使用toLocaleString()
方法
语法如下:
Number.toLocaleString('en-US');
举例:
(123456789).toLocaleString('en-US');
结果是:123,456,789
对于中文场景下,toLocaleString('en-US')
中的'en-US'
理论上是可以缺省的,也就是直接(123456789).toLocaleString()
也是可以得到123,456,789。但是如果你的产品可能海外用户使用,则保险起见,还是保留'en-US'
。
另外,对于IE edge之前的版本,Number.toLocaleString()
会自动补上两位小数,如果是不需要的,需要自己额外过滤掉。