多種方式實現千位分隔符

今天遇到一個問題,用正則實現千位分隔符,例如:12345678.90 轉換成 12,345,678.90。若是用 js 實現挺簡單的,然而,正則實現優雅多了,可是若是對正則表達式不熟的話,仍是有必定難度的。html

 

如今對千位分隔符的實現進行總結,不單單是正則的實現哦。web

 

方法一:toLocalString()

使用方法:正則表達式

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

例如:wordpress

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

locales 默認爲 ‘en-US’,'CN'表示中國,固然結果是同樣的。spa

 

如以上例子所示,該方法會忽略小數點後三位以後的數字。.net

 

方法二:正則

代碼:code

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

例如:htm

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

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

$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分鐘入門教程

相關文章
相關標籤/搜索