【正则表达式】解析numeral的千位分隔符

793 阅读1分钟

很常见的一个需求,把高位的数字用千分符隔开,让数字更整洁可读。

like this:

开发方案

方案一:

使用numeral:这是一个接口丰富的数字处理工具,一般情况的数字和单位方面的需求都能cover。

方案二:

使用我的渣正则写了个RegExp,仅供参考

const thousandSeparate = (num) =>{
    return num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}

当然这些也不是这篇文章的重点

高星库的公式

其实我在开发中先使用了numeral这个库,但是后来发现其实我现在也只需要添加千位分隔符一个功能,不需要因此使用这个库,我就阅读numeral的源码,抠出了这个库的千隔符公式


int.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + locale.delimiters.thousands)

可以看到核心正则/(\d)(?=(\d{3})+(?!\d))/g这个我们通过一个好用的小工具来看一下,推荐一个网站(regexper.com/),这个网站可以把正则表达式转换成视图

就像这样:

这样看是不是就一下好理解了?然后我们基于这个图来分析一下。

请见下章