乐趣区

关于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. 用来匹配数字千位分隔符地位的正则就实现啦。

总结

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

退出移动版