关于javascript:js一个正则匹配数字千位分隔符的位置支持小数

前言

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

间接上后果

就一行代码

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/

2. 先思考整数的正则，什么样的地位符合要求呢？从个位开始每 3 位数字一个，也就是说指标地位前面始终到结尾，要恰好并且至多一组 3 位数字。

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

3. 再思考小数的状况，小数是不须要千位分隔符的，也就是说指标地位后面没有小数点。

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

4. 有小数点的话，个位就不肯定是结尾了，所以要用小数点和结尾两种状况来辨认个位在哪。

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

5. 用来匹配数字千位分隔符地位的正则就实现啦。

总结

第一次写技术分享文章，还在一直学习之中，心愿将来可期。如果我的文章对你有帮忙那再好不过啦，帮我也点个赞吧，谢谢！欢送同学们斧正谬误，一起交换啊！