多種方式實現千位分隔符

今天遇到一個問題，用正則實現千位分隔符，例如：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分鐘入門教程