前言

在日常业务中，常会碰到产品要求数字展示千位分隔符的需求，本着学习钻研，不做业务码农的想法，尝试着写了一个单正则并且支持小数点的添加千位分隔符的方法。

直接上结果

就一行代码

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. 用来匹配数字千位分隔符位置的正则就完成啦。

总结

第一次写技术分享文章，还在不断学习之中，希望未来可期。如果我的文章对你有帮助那再好不过啦，帮我也点个赞吧，谢谢！欢迎同学们指正错误，一起交流啊！