对千位分隔符 replace(/\B(?=(\d{3})+$)/g, ',')的理解

'12345678'.replace(/\B(?=(\d{3})+$)/g, ',')  // '12,345,678'

理解上面的含义,首先需要了解正则是怎么匹配的,分步来看这个正则:

  1. (\d{3})+$
    从左往右以贪婪模式匹配以三个数字为一组(重复n>=1次)结尾的字符串。例如:
'123'.match(/(\d{3})+$/g) // ['123']
'123456'.match(/(\d{3})+$/g) // ['123456']
'12345678'.match(/(\d{3})+$/g) // ['345678']

2.\B
mdn上是这样解释的:匹配一个非单词边界

'1'.match(/\B/g) // null
'12'.match(/\B/g) // ['']
'123'.match(/\B/g) // ['', '']
'12345678'.match(/\B/g) // ['', '', '', '', '', '', '']

测试工具地址:https://www.runoob.com/regexp/regexp-syntax.html

例子里正则使用了g,所以找到的是所有符合条件的。'12'.match(/\B/g)匹配到的就是12之间的位置。'123'.match(/\B/g)匹配到的就是12,23之间的位置。12345678依此类推找到了7个位置。

  1. ?=
    exp1(?=exp2):查找 exp2 前面的 exp1。注意这里想找的是 exp1。exp2只是一个限定条件。例如:
'12a34b5'.match(/\d(?=[a-z])/g)  // ['2', '4']

想找的是一个数字,这个数字的后面是一个英文字母。满足条件的只有2和4



现在综合起来看:'12345678'.match(/\B(?=(\d{3})+$)/g)

  • 1.首先这个正则想匹配出所有的\B
'12345678'.match(/\B/g) // ['', '', '', '', '', '', '']
  • 2.然后匹配的 \B 后面需要满足以三个数字为一组(重复n>=1次)结尾
'12345678'.match(/\B(?=(\d{3})+$)/g) // ['', '']

过程分析如下:
1和2之间的位置,把12345678分成了1和2345678。'2345678'总共是7个数字,不满足第二个条件
2和3之间的位置,把12345678分成了12和345678。'345678'总共是6个数字,满足条件
3和4之间的位置,把12345678分成了123和45678。'45678'总共是5个数字,不满足第二个条件
4和5之间的位置,把12345678分成了1234和5678。'5678'总共是4个数字,不满足第二个条件
5和6之间的位置,把12345678分成了12345和678。'678'总共是3个数字,满足条件
6和7之间的位置,把12345678分成了123456和78。'78'总共是2个数字,不满足第二个条件
7和8之间的位置,把12345678分成了1234567和8。'8'总共是1个数字,不满足第二个条件
所以符合条件的只有2和3、5和6这两组中间的位置。
因此'12345678'.replace(/\B(?=(\d{3})+$)/g, ',')的结果是'12,345,678'

参考地址:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
https://www.runoob.com/regexp/regexp-syntax.html

你可能感兴趣的:(对千位分隔符 replace(/\B(?=(\d{3})+$)/g, ',')的理解)