当数字比较长时,为了方便阅读和快速判断大小,会每隔三位添加一个逗号。
为了实现这个效果方法很多。其中之一就是使用正则表达式。
"49815159888".replace(/(?=(?!\b)(\d{3})+$)/g, ",");
//49,815,159,888
这个方法简介,优雅。但是正则表达式看上去有点复杂。下面就对这个正则来个细致分解;
完整正则:/(?=(?!\b)(\d{3})+$)/g
使用到的语法:
-
\b
: 匹配单词边界 -
\d
: 查找数字,相当于[0-9]
-
{m,n}
: 一个字符或一组字符可以重复出现的次数为m
到n
次。{m}
表示固定重复m
次,{m,}
表示至少重复m
次 -
$
: 从末端开始匹配 -
?=n
: 零宽度正预测先行断言,匹配任何其后紧接指定字符串 n 的字符串 -
?!n
: 零宽度负预测先行断言,匹配任何其后没有紧接指定字符串 n 的字符串
有了上述规则就能理解这个表达式了么?很明显还是不行。就跟理解一句复杂的英语一样,每一个单词都认识,但是依旧不能理解一句话是什么意思。
我们的目的是找到插入逗号的位置。平时使用正则都是获得匹配的字符串,而匹配位置可能感觉有点陌生。什么样子的正则会返回匹配的位置呢?答案是断言,也就是上述语法的?=
, ?!
。它匹配到的内容不会保存到匹配结果中去,最终匹配结果只是一个位置而已。
例如:(?=ar)
匹配后面跟着ar
的位置,如下图所示。

现在再回头看(?=(?!\b)(\d{3})+$)
,就可以确定它返回的是满足条件的位置。满足什么条件呢?
先看(?=(\d{3})+$)
这部分,
-
$
:表示从末尾开始匹配, -
(\d{3})+
:表示至少有一组3个连续的数字,也就是说数字的位数要是3的倍数。 -
(?=(\d{3})+$)
:表示一个位置,这个位置后面要跟着至少一组3个连续的数字(这个位置后面跟着的数字位数必须是3的倍数)。
位置后面跟着的数字位数必须是3的倍数
至此,这个千分位逗号正则的核心部分就解释完了。不知是不是都看懂了。
至于/(?=(?!\b)(\d{3})+$)/g
中的(?!\b)
,是处理最前面可能出现的逗号。如图

具体的分析各位看客如果阅读懂了上述的核心内容,这部分肯定不在话下,就不累述了
上述内容如有不正之处,希望各位能积极指出。
附:
完整的JS正则规则
正则表达式实现:原理
正则表达式——正则表达式的匹配过程
正则表达式零宽断言详解(?=,?<=,?!,?<!)
在线正则练习
网友评论