前言

在日常業務中，常會碰到產品要求數字展示千位分隔符的需求，本着學習鑽研，不做業務碼農的想法，嘗試着寫了一個單正則並且支持小數點的添加千位分隔符的方法。

直接上結果

就一行代碼

thousandBitSeparator = (num) => {
  return num?.toString().replace(/(?<!\..)\B(?=(\d{3})+(\.|$))/g, ',')
}

看看效果
小數點前每3位加一個分隔符，小數點後不加

thousandBitSeparator(1) // '1'
thousandBitSeparator(1000) // '1,000'
thousandBitSeparator(1000222) // '1,000,222'
thousandBitSeparator(1234.) // '1,234'
thousandBitSeparator(1234.56) // '1,234.56'
thousandBitSeparator(1234.5678) // '1,234.5678'

正則解析

先來解釋一些這裏用到的正則元字符

\d 數字（不用解釋）
\B 非單詞邊界（不是單詞邊界的邊界）
a(?=b) 正向斷言（匹配跟着b的a）
(?<!b)a 反向否定斷言（匹配前面不是b的a）

再來個可視化解析

思路

1. 需求是添加千位分隔符，所以首先是要匹配添加分隔符的這個邊界（也就是目標位置），又由於數字不會有空格什麼的中斷，而且兩頭的位置也不符合需求，使用\B作為主表達式來匹配目標位置最合適不過了。

   /\B/g

2. 先考慮整數的正則，什麼樣的位置符合要求呢？從個位開始每3位數字一個，也就是説目標位置後面一直到結尾，要恰好並且至少一組3位數字。

   /\B(?=(\d{3})+$)/g

3. 再考慮小數的情況，小數是不需要千位分隔符的，也就是説目標位置前面沒有小數點。

    /(?<!\..)\B(?=(\d{3})+$)/g

4. 有小數點的話，個位就不一定是結尾了，所以要用小數點和結尾兩種情況來識別個位在哪。

    /(?<!\..)\B(?=(\d{3})+(\.|$))/g

5. 用來匹配數字千位分隔符位置的正則就完成啦。

總結

第一次寫技術分享文章，還在不斷學習之中，希望未來可期。如果我的文章對你有幫助那再好不過啦，幫我也點個贊吧，謝謝！歡迎同學們指正錯誤，一起交流啊！