正則表達式/\B(?=(\d{3})+(?!\d))/怎樣給數字添加千分符的

給一串數字添加千分符

咱們知道，有一個比較簡潔的方式來給一個數字添加千分符，以下：

const numberWithCommas = (x) => {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
複製代碼

他是怎麼工做的呢？這個正則裏面的那一串東西又是用來幹嗎的？

元字符\B

咱們先把這個表達式的主要結構拆分出來：/\B(?=)/，在這個表達式裏面，除了\B之外的部分都不屬於匹配結果（match result），也就是說，整個表達式裏，真正參與最後的匹配到替換成,的是前面的這個\B。

若是以前沒接觸過\B或\b的話可能會疑惑，爲何能夠用這個replace給一串數字添加逗號呢，replace不是替換的意思嗎，把什麼替換掉了？咱們先來看一下這個\B元字符所表明的含義。

咱們可能須要先了解一下\B的反面\b所表明的內容：\b表明的是單詞邊界（Word Boundaries）。這裏能夠先說明一點，它匹配的是一個位置，如同^和$表明字符串的開頭和結尾同樣。怎樣算是字符的邊界呢？有如下三種位置能夠被稱爲單詞邊界：

• 字符串的第一個字符的前面。若是這個字符是單詞字符（word character）的話
• 字符串的最後一個字符的後面。若是這個字符是單詞字符（word character）的話
• 字符串中兩個字符之間，若是其中一個字符是單詞字符（word character）而另一個不是

好比\bword\b能讓你實現對整個單詞的匹配，他並不會匹配到wword1這種字符串。對於上面說到的單詞字符（word characte）指的是能組成一個詞（word）的字符，如w。而非單詞字符（non-word characters）則與之相反，如,和空格。

若是仍是沒看懂能夠參考這裏（英文）的解釋。簡而言之，\b匹配的是一個位置，這個位置是一個單詞的邊界。而咱們的\B則與之相反，不屬於\b'的位置均可以被\B匹配到。如本文的主角，一串數字123，他匹配的是1和2，2和3之間的位置，也就是說把這些位置替換爲逗號，便可實現咱們的千分符。

先行斷言(?=)

咱們拆分後的/\B(?=)/的第二部分(?=)的做用是這樣的，舉個簡單例子：x(?=y)，若是x後面跟的是y，則匹配x。如字符串xyz中的x會被匹配，然後面的y是不會被匹配的。這就是叫作先行斷言的東西。若是想了解更多能夠參考這裏。

綜合這兩點，咱們知道咱們須要找的是一個位置，這個位置後面跟的東西須要知足必定的條件。如今咱們能夠假設一下，須要知足什麼條件呢？對於咱們熟知的千分符來講，固然是從右到左每三位數字添加一個逗號。

因此咱們的先行斷言能夠先作這一件事，找尋後面跟了3的倍數個數字的位置，像這樣：/\B(?=(\d{3})+)/,新增的部分是(\d{3})+，這裏的+號匹配1個或1個以上括號裏的內容，也就是三個數字構成的一串字符。對於一串字符12345來講，這個正則表達式匹配1和2，2和3這兩位置，由於這兩個位置後面都知足跟了3的倍數個數字（234和345）。

咱們看到已經大概的朝最終目標邁進了。咱們只須要去掉一些不合理的位置，好比上面的1和2之間的位置就能夠了。

後行斷言(?!\d)

上面所說的先行斷言保證了每一個位置後面有跟了3的倍數個數字，可是沒有保證它後面有只跟了3的倍數個數字。好比提到的12345的1和2之間的位置，除了後面跟了知足條件的234之外，還多出來一個5，這不是咱們指望的。後行斷言就是要解決這個問題。

瞭解了(?=)以後，對於(?!)應該十分好理解，也就是一對反義詞。表示後面不能跟相應的內容。好比這裏的(?!\d)表示後面不能再跟數字了，好比上面那個多出來的5。稍稍來多點，咱們加起來看：(?=(\d{3})+(?!\d))表明的是：後面須要跟3的倍數個數字，且在這（3的倍數個數字）以後不能再有數字了。他能夠是小數點.或字符串尾。如12345.67中只有2和3之間的位置知足咱們上述的條件。咱們只須要指出這個位置，而後將它替換成逗號。

全局替換/\B(?=(\d{3})+(?!\d))/g

string.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
複製代碼

就把全部知足條件的位置替換成了千分符，解決了這個問題。 不知道你們理解了嗎？有疑惑或者不對地方還請指正

參考目錄:

1. How to print a number with commas as thousands separators in JavaScript
2. wordboundaries
3. Regular_Expressions