把一串數字表示成千位分隔形式——JS正規表示式的應用

TONGZ發表於2018-03-28
JS

一個案例

如何把一串整數轉換成千位分隔形式，例如10000000000，轉換成10,000,000,000。

在瞭解正規表示式之前，想要實現這個功能，無論程式碼量還是燒腦程度，都很令人抓狂，但若是運用正規表示式來解決的話，兩三行程式碼即可搞定！匹配、替換那些符合某種規則的字串，恰恰是正規表示式的強項。

正規表示式

#####概念 正規表示式，又稱規則表示式。（英語：Regular Expression，在程式碼中常簡寫為regex、regexp或RE），電腦科學的一個概念。它不僅僅是Javascript獨有的東西，絕大多數主流作業系統、主流開發語言、無數的應用軟體中，都可以看到正規表示式的優美舞姿。正規表示式是對字串操作的一種邏輯公式，就是用事先定義好的一些特定字元、及這些特定字元的組合，組成一個“規則字串”，這個“規則字串”用來表達對字串的一種過濾邏輯。 #####特點

  1. 靈活性、邏輯性、功能性非常強
  2. 可以迅速地用極簡單的方式達到字串的複雜控制。
  3. 對於剛接觸的人來說，比較晦澀難懂。

本文只是通過解決上述案例進而討論Javascript所支援的正規表示式的部分常用且重要的方法，想查詢Javascript中正規表示式的全部強大功能，請點選此處JavaScript RegExp 物件，檢視W3school官方文件。

梳理思路

要先明白的是，我們將要轉換成的數字格式是這樣：從個位往左數起，每三位前插入一個千位分隔符,，即可以想象成我們要把每三位數字前面的那個空""匹配出來，並替換成千位分隔符,。每個千位分隔符後面的數字個數是3個或3的倍數個。

程式碼書寫

建立一個正規表示式字面量，並加上全域性匹配修飾符g。var reg = //g; W3C對全域性匹配的解釋是：查詢所有匹配而非在找到第一個匹配後停止。

因為需要從右往左匹配，所以表示結尾的$是必須要有的。三位數字用\d{3}來表示，由於我們不知道究竟有多少組這樣的三位數字，所以需要在\d{3}後面加上+，來表示匹配任何包含至少一組三位數字的字串。至目前，/(\d{3})+$/g表示作為結尾的3個或3的倍數個數字。

由於要替換的是每三位數（從末尾起）緊前面的那個""，所以需要用到正向預查，即?=n（匹配任何其後緊接指定字串 n 的字串）。正向預查咋用呢？這裡先舉個例子：有一個字串var str = "abaaaaa";，我們想把後面跟著字元b的字元a表示出來，於是正規表示式寫法：var reg = /a(?=b)/g;，匹配的是後面緊跟著字元b的字元a，字串str中只有一個符合條件的a，最後檢視匹配結果為["a"]。這個例子的程式碼如下：

var str = "abaaaaa",
    reg = /a(?=b)/g;
console.log(str.match(reg));
複製程式碼

粗略瞭解正向預查之後，回到原來的案例，我們可以寫成/(?=(\d{3})+$)/g;，為什麼(?=...)前面什麼也不寫呀？因為我們要找的是那些後面緊跟著三位數字的""呀，空當然什麼都不用寫了。 我們來檢驗一下，是不是匹配出來三個""？

var str = "10000000000",
    reg = /(?=(\d{3})+$)/g;
console.log(str.match(reg));
複製程式碼

結果如下，果然是三個""。

把一串數字表示成千位分隔形式——JS正規表示式的應用
下面我們對這三個空進行替換：

var str = "10000000000",
    reg = /(?=(\d{3})+$)/g;
console.log(str.replace(reg, ","));
複製程式碼

結果如下，轉換成功。

把一串數字表示成千位分隔形式——JS正規表示式的應用

但是，還沒完…… 現在是十一位數字，如果再加一個0，湊夠十二位數呢，它可是3的倍數，我們試驗一下：

var str = "100000000000",
    reg = /(?=(\d{3})+$)/g;
console.log(str.replace(reg, ","));
複製程式碼

結果變成了這樣：

把一串數字表示成千位分隔形式——JS正規表示式的應用
這串數字最前面也被新增了一個, 。這個原因就不解釋了，你們應該明白為什麼。那麼怎麼解決呢？我們對程式碼進行一下完善，在\d前面加一個非單詞邊界\B，用來表示所匹配的這個空後面不能是一個單詞邊界，這樣就可以把最前面的這個,去掉了。 最終的程式碼如下

var str = "100000000000",
    reg = /(?=(\B\d{3})+$)/g;
console.log(str.replace(reg, ","));
複製程式碼

把一串數字表示成千位分隔形式——JS正規表示式的應用

總結

綜上，”把一串整數轉換成千位分隔形式“這個案例就說完了。我再把這個案例用到的一些知識點梳理一下。

  • g是表示全域性匹配的修飾符，全域性匹配指查詢所有匹配而非在找到第一個匹配後停止。
  • $是表示結尾的量詞，如n$，匹配的是任何以n為結尾的字串。
  • \d是查詢數字的元字元。
  • n{X}是匹配包含 X 個 n 的序列的字串的量詞。
  • n+是匹配任何包含至少一個 n 的字串的量詞。
  • ?=n正向預查，用於匹配任何其後緊接指定字串 n 的字串。
  • match() String物件的方法，作用是找到一個或多個正規表示式的匹配。
  • replace()String物件的方法，作用是替換與正規表示式匹配的子串。
  • \B是表示匹配非單詞邊界的元字元，與其互為補集的元字元是\b，表示匹配單詞邊界。

本文無法做到十分細緻，如果看完還是一頭霧水的話，需要先從頭學一下正規表示式。 歡迎提出意見或建議，感謝你的閱讀！

相關文章