前言
在日常业务中,常会碰到产品要求数字展现千位分隔符的需要,本着学习钻研,不做业务码农的想法,尝试着写了一个单正则并且反对小数点的增加千位分隔符的办法。
间接上后果
就一行代码
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)
再来个可视化解析
思路
-
需要是增加千位分隔符,所以首先是要匹配增加分隔符的这个边界(也就是指标地位),又因为数字不会有空格什么的中断,而且中间的地位也不合乎需要,应用
\B
作为主表达式来匹配指标地位最合适不过了。/\B/
-
先思考整数的正则,什么样的地位符合要求呢?从个位开始每 3 位数字一个,也就是说指标地位前面始终到结尾,要恰好并且至多一组 3 位数字。
/\B(?=(\d{3})+$)/
-
再思考小数的状况,小数是不须要千位分隔符的,也就是说指标地位后面没有小数点。
/(?<!\..)\B(?=(\d{3})+$)/
-
有小数点的话,个位就不肯定是结尾了,所以要用小数点和结尾两种状况来辨认个位在哪。
/(?<!\..)\B(?=(\d{3})+(\.|$))/
- 用来匹配数字千位分隔符地位的正则就实现啦。
总结
第一次写技术分享文章,还在一直学习之中,心愿将来可期。如果我的文章对你有帮忙那再好不过啦,帮我也点个赞吧,谢谢!欢送同学们斧正谬误,一起交换啊!