正则表达式/\B(?=(\d{3})+(?!\d))/怎样给数字添加千分符的

给一串数字添加千分符

咱们知道，有一个比较简洁的方式来给一个数字添加千分符，以下：

const numberWithCommas = (x) => {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
复制代码

他是怎么工做的呢？这个正则里面的那一串东西又是用来干吗的？

元字符\B

咱们先把这个表达式的主要结构拆分出来：/\B(?=)/，在这个表达式里面，除了\B之外的部分都不属于匹配结果（match result），也就是说，整个表达式里，真正参与最后的匹配到替换成,的是前面的这个\B。

若是以前没接触过\B或\b的话可能会疑惑，为何能够用这个replace给一串数字添加逗号呢，replace不是替换的意思吗，把什么替换掉了？咱们先来看一下这个\B元字符所表明的含义。

咱们可能须要先了解一下\B的反面\b所表明的内容：\b表明的是单词边界（Word Boundaries）。这里能够先说明一点，它匹配的是一个位置，如同^和$表明字符串的开头和结尾同样。怎样算是字符的边界呢？有如下三种位置能够被称为单词边界：

• 字符串的第一个字符的前面。若是这个字符是单词字符（word character）的话
• 字符串的最后一个字符的后面。若是这个字符是单词字符（word character）的话
• 字符串中两个字符之间，若是其中一个字符是单词字符（word character）而另一个不是

好比\bword\b能让你实现对整个单词的匹配，他并不会匹配到wword1这种字符串。对于上面说到的单词字符（word characte）指的是能组成一个词（word）的字符，如w。而非单词字符（non-word characters）则与之相反，如,和空格。

若是仍是没看懂能够参考这里（英文）的解释。简而言之，\b匹配的是一个位置，这个位置是一个单词的边界。而咱们的\B则与之相反，不属于\b'的位置均可以被\B匹配到。如本文的主角，一串数字123，他匹配的是1和2，2和3之间的位置，也就是说把这些位置替换为逗号，便可实现咱们的千分符。

先行断言(?=)

咱们拆分后的/\B(?=)/的第二部分(?=)的做用是这样的，举个简单例子：x(?=y)，若是x后面跟的是y，则匹配x。如字符串xyz中的x会被匹配，然后面的y是不会被匹配的。这就是叫作先行断言的东西。若是想了解更多能够参考这里。

综合这两点，咱们知道咱们须要找的是一个位置，这个位置后面跟的东西须要知足必定的条件。如今咱们能够假设一下，须要知足什么条件呢？对于咱们熟知的千分符来讲，固然是从右到左每三位数字添加一个逗号。

因此咱们的先行断言能够先作这一件事，找寻后面跟了3的倍数个数字的位置，像这样：/\B(?=(\d{3})+)/,新增的部分是(\d{3})+，这里的+号匹配1个或1个以上括号里的内容，也就是三个数字构成的一串字符。对于一串字符12345来讲，这个正则表达式匹配1和2，2和3这两位置，由于这两个位置后面都知足跟了3的倍数个数字（234和345）。

咱们看到已经大概的朝最终目标迈进了。咱们只须要去掉一些不合理的位置，好比上面的1和2之间的位置就能够了。

后行断言(?!\d)

上面所说的先行断言保证了每一个位置后面有跟了3的倍数个数字，可是没有保证它后面有只跟了3的倍数个数字。好比提到的12345的1和2之间的位置，除了后面跟了知足条件的234之外，还多出来一个5，这不是咱们指望的。后行断言就是要解决这个问题。

了解了(?=)以后，对于(?!)应该十分好理解，也就是一对反义词。表示后面不能跟相应的内容。好比这里的(?!\d)表示后面不能再跟数字了，好比上面那个多出来的5。稍稍来多点，咱们加起来看：(?=(\d{3})+(?!\d))表明的是：后面须要跟3的倍数个数字，且在这（3的倍数个数字）以后不能再有数字了。他能够是小数点.或字符串尾。如12345.67中只有2和3之间的位置知足咱们上述的条件。咱们只须要指出这个位置，而后将它替换成逗号。

全局替换/\B(?=(\d{3})+(?!\d))/g

string.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
复制代码

就把全部知足条件的位置替换成了千分符，解决了这个问题。 不知道你们理解了吗？有疑惑或者不对地方还请指正

参考目录:

1. How to print a number with commas as thousands separators in JavaScript
2. wordboundaries
3. Regular_Expressions