千位分隔符的完整攻略

千位分隔符 ^[1] 是很常见的需求，但是输入文本千变万化，如何才能准确添加千分符呢？

纯整数情况

千位分隔符的完整攻略

纯整数大概是所有情况里最简单的一种，我们只要正确匹配出千分位就好了。

观察上面的数字，我们可以得出千分位的特征是到字符串终止位有 3n 个数字，不包括起始位。于是可以得到这样的函数：

let miliFormat = (num) => {       return num && num.toString().replace(/(?=(?!^)(/d{3})+$)/g, ',') }

但是往往现实没有那么乐观：

小数的情况

千位分隔符的完整攻略

遇到小数时，我们的希望只针对整数部分添加千分符，这时问题就变得稍稍有些棘手了。

如果正则引擎支持逆序环视 ^[2] ，我们可以这样构造正则表达式：

(?<=/d+)(?=(/d{3})+/b)

但是多数语言并不支持逆序环视，所以我们要变通一下：

1. 拿到小数的整数部分

也就是起始位到小数点（非数字）之间的部分，可以这样实现：

^/d+

2. 为整数部分添加千分符

这一步可以利用我们之前的实现，整合在一起如下：

let miliFormat = (num) => {       return num && num         .toString()         .replace(/^/d+/, (m) => m.replace(/(?=(?!^)(/d{3})+$)/g, ',')) }

这个函数对整、小数都能正确处理：

千位分隔符的完整攻略

但在实际中，我们还可能传入一个整、小数混合的字符串：

整、小数混合字符串

千位分隔符的完整攻略

这时我们就不能继续用字符串起终点 ^$ 来判定边界了，如果改成单词边界 /b 会发生什么呢：

千位分隔符的完整攻略

哦不！连小数部分也被添上千分符了！怎样才能避开小数部分？

重新审视我们捕获整数部分所用到的正则：

//b/d+/g

/b 的界定是 (?<!/w)(?=/w)|(?<=/w)(?!/w) ^[2] ，所以小数点也被视为单词边界了！所以我们不应该用单词边界作为界定条件，重新看刚才的字符串 12345678 1234.5678 ，可以发现整数部分的起始点都有一个特征：要么位于字符串起点，要么跟在空白符后。基于这点我们修改捕获整数部分的正则如下：

/(^|/s)/d+/g

千位分隔符的完整攻略

咦，多出来一个空白符？别着急，看看我们用来匹配千分位的正则：

/(?=(?!^)(/d{3})+$)/g

判断条件是非起点、到结尾有 3n 个数字的位置，现在为了去掉这多出来的一个空格，我们应将其实条件改成单词边界：

/(?=(?!/b)(/d{3})+$)/g

完整函数如下：

let miliFormat = (num) => {       return num && num         .toString()         .replace(/(^|/s)/d+/g, (m) => m.replace(/(?=(?!/b)(/d{3})+$)/g, ',')) }

千位分隔符的完整攻略

酷炫！我们已经能自如应付各种数值的混合了！这是耳边幽幽飘来产品经理的声音：如果我传入非数字的字符串呢……

复杂字符串

千位分隔符的完整攻略

在上一个例子中，我们只判断了起始边界，于是 1234ww 中的数字部分也会被捕获。为了解决这个问题，我们要加上终止界定。来看看整、小数成立的条件：

字符串中仅包含有数字 0-9 或小数点

依据这个我们可以这样做：

/(^|/s)/d+(?=/.?/d*($|/s))/g

这个正则表示匹配目标应以字符串起始位或空白符开始，紧接着是数字，数字的右边只允许继续是数字或者一个小数点、直到字符串结尾或下一个空格处。来看看它的匹配效果：

千位分隔符的完整攻略

好样的！我们已经能精确匹配出正确的部分了！继续用之前的千分位模式封装：

let miliFormat = (() => {    let DIGIT_PATTERN = /(^|/s)/d+(?=/.?/d*($|/s))/g  let MILI_PATTERN = /(?=(?!/b)(/d{3})+/.?/b)/g  return (num) => num && num.toString()   .replace(DIGIT_PATTERN, (m) => m.replace(MILI_PATTERN, ',')) })()

千位分隔符的完整攻略