多种方式实现千位分隔符

今天遇到一个问题，用正则实现千位分隔符，例如：12345678.90 转换成 12,345,678.90。如果用 js 实现挺简单的，然而，正则实现优雅多了，但是如果对正则表达式不熟的话，还是有一定难度的。

 

现在对千位分隔符的实现进行总结，不仅仅是正则的实现哦。

 

方法一：toLocalString()

使用方法：

numObj.toLocaleString([locales[, options]]);

例如：

(1234567).toLocaleString();    // '1,234,567'

(1234567.12345).toLocaleString();       // '1,234,567.123'

locales 默认为 ‘en-US’，'CN'表示中国，当然结果是一样的。

 

如以上例子所示，该方法会忽略小数点后三位之后的数字。

 

方法二：正则

代码：

string.replace(/(\d)(?=(\d{3})+$)/g, '$1,');

例如：

let reg = /(\d)(?=(\d{3})+$)/g;

'1234567'.replace(reg, '$1,');

(?=exp)：表示匹配 exp 前面的位置。

$1：表示组号，规则是：从左向右，以分组的左括号为标志，第一个出现的分组的组号为1，第二个为2，以此类推。

 

然而这个正则表达式只适用于整数。因为reg 表达式中，用 $ 匹配结尾，当 string 含有小数点，reg 遇到小数点后就会停止匹配，所以只能分割小数点后的数。

例如：

'1234567.12345'.replace(reg, '$1,');  // '1234567.12,345'

如果想要匹配整数部分，保留小数点部分，可以将 '$' 换为 '\.'，即：

reg = /(\d)(?=(\d{3})+\.)/g;      // '1234567.12345'.replace(reg, '$1,') => '1,234,567.12345'

那么，如果希望整数部分和小数部分都添加千位分隔符，可以通过分支条件实现：

reg = /(\d)(?=(\d{3})+(\.|$))/g;    // '1234567.12345'.replace(reg, '$1,') => '1,234,567.12,345'

不过这个需求好像有点奇怪，哈哈哈。

 

方法三：js 循环遍历

代码：

function thousandsSepar(num) {
   // 只能包含 0 个或 1 个 '.'
　　if(!/^\d+(\.\d*)?$/.test(num)) {
　　　　return;
　　}

　　let str = num + '',
　　　　 newStr = '',
　　　　 count = 0,
　　　　 decimal = ''，
　　　　 index = str.indexOf('.');

   // 保留小数点后 3 位
　　if(index > 0) {
　　　　decimal = str.substring(index, index + 4);
　　　　str = str.substr(0, index + 4);
　　}

　　for(let i = index - 1; i >= 0 ; --i) {
　　　　newStr += str[i];
　　　　++count;

       // 每 3 位插入一个 ','
　　　　if(count === 3 && i > 0) {
　　　　　　newStr += ',';
　　　　　　count = 0;
　　　　}
　　}
　　return newStr.split('').reverse().join('') + decimal;
}

实现效果同 toLocaleString()；js 有多种实现方式，这里只是举个栗子。

 

参看：

请使用千位分隔符（逗号）表示web网页中的大数字

MDN

正则表达式30分钟入门教程