把一串数字表示成千位分隔形式——JS正则表达式的应用

2019年5月22日 157次阅读 来源: Aden_Z

《把一串数字表示成千位分隔形式——JS正则表达式的应用》 123123123.jpg

一个案例

如何把一串整数转换成千位分隔形式，例如10000000000，转换成10,000,000,000。

在了解正则表达式之前，想要实现这个功能，无论代码量还是烧脑程度，都很令人抓狂，但若是运用正则表达式来解决的话，两三行代码即可搞定！匹配、替换那些符合某种规则的字符串，恰恰是正则表达式的强项。

正则表达式

概念

正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。它不仅仅是Javascript独有的东西，绝大多数主流操作系统、主流开发语言、无数的应用软件中，都可以看到正则表达式的优美舞姿。正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。

特点
  1. 灵活性、逻辑性、功能性非常强
  2. 可以迅速地用极简单的方式达到字符串的复杂控制。
  3. 对于刚接触的人来说，比较晦涩难懂。

本文只是通过解决上述案例进而讨论Javascript所支持的正则表达式的部分常用且重要的方法，想查询Javascript中正则表达式的全部强大功能，请点击此处JavaScript RegExp 对象，查看W3school官方文档。

梳理思路

要先明白的是，我们将要转换成的数字格式是这样：从个位往左数起，每三位前插入一个千位分隔符,，即可以想象成我们要把每三位数字前面的那个空""匹配出来，并替换成千位分隔符,。每个千位分隔符后面的数字个数是3个或3的倍数个。

代码书写

创建一个正则表达式字面量，并加上全局匹配修饰符g。var reg = //g;
W3C对全局匹配的解释是：查找所有匹配而非在找到第一个匹配后停止。

因为需要从右往左匹配，所以表示结尾的$是必须要有的。三位数字用\d{3}来表示，由于我们不知道究竟有多少组这样的三位数字，所以需要在\d{3}后面加上+，来表示匹配任何包含至少一组三位数字的字符串。至目前，/(\d{3})+$/g表示作为结尾的3个或3的倍数个数字。

由于要替换的是每三位数（从末尾起）紧前面的那个""，所以需要用到正向预查，即?=n（匹配任何其后紧接指定字符串 n 的字符串）。正向预查咋用呢？这里先举个例子：有一个字符串var str = "abaaaaa";，我们想把后面跟着字符b的字符a表示出来，于是正则表达式写法：var reg = /a(?=b)/g;，匹配的是后面紧跟着字符b的字符a，字符串str中只有一个符合条件的a，最后查看匹配结果为[“a”]。这个例子的代码如下：

var str = "abaaaaa",
    reg = /a(?=b)/g;
console.log(str.match(reg));

粗略了解正向预查之后，回到原来的案例，我们可以写成/(?=(\d{3})+$)/g;，为什么(?=...)前面什么也不写呀？因为我们要找的是那些后面紧跟着三位数字的""呀，空当然什么都不用写了。
我们来检验一下，是不是匹配出来三个""？

var str = "10000000000",
    reg = /(?=(\d{3})+$)/g;
console.log(str.match(reg));

结果如下，果然是三个""。

《把一串数字表示成千位分隔形式——JS正则表达式的应用》 image

下面我们对这三个空进行替换：

var str = "10000000000",
    reg = /(?=(\d{3})+$)/g;
console.log(str.replace(reg, ","));

结果如下，转换成功。

《把一串数字表示成千位分隔形式——JS正则表达式的应用》 image

但是，还没完……
现在是十一位数字，如果再加一个0，凑够十二位数呢，它可是3的倍数，我们试验一下：

var str = "100000000000",
    reg = /(?=(\d{3})+$)/g;
console.log(str.replace(reg, ","));

结果变成了这样：

《把一串数字表示成千位分隔形式——JS正则表达式的应用》 image

这串数字最前面也被添加了一个
, 。这个原因就不解释了，你们应该明白为什么。那么怎么解决呢？我们对代码进行一下完善，在
\d前面加一个非单词边界
\B，用来表示所匹配的这个空后面不能是一个单词边界，这样就可以把最前面的这个
,去掉了。

最终的代码如下

var str = "100000000000",
    reg = /(?=(\B\d{3})+$)/g;
console.log(str.replace(reg, ","));

《把一串数字表示成千位分隔形式——JS正则表达式的应用》 image

总结

综上，”把一串整数转换成千位分隔形式“这个案例就说完了。我再把这个案例用到的一些知识点梳理一下。

  • g是表示全局匹配的修饰符，全局匹配指查找所有匹配而非在找到第一个匹配后停止。
  • $是表示结尾的量词，如n$，匹配的是任何以n为结尾的字符串。
  • \d是查找数字的元字符。
  • n{X}是匹配包含 X 个 n 的序列的字符串的量词。
  • n+是匹配任何包含至少一个 n 的字符串的量词。
  • ?=n正向预查，用于匹配任何其后紧接指定字符串 n 的字符串。
  • match() String对象的方法，作用是找到一个或多个正则表达式的匹配。
  • replace()String对象的方法，作用是替换与正则表达式匹配的子串。
  • \B是表示匹配非单词边界的元字符，与其互为补集的元字符是\b，表示匹配单词边界。

本文无法做到十分细致，如果看完还是一头雾水的话，需要先从头学一下正则表达式。
欢迎提出意见或建议，感谢你的阅读！

    原文作者：Aden_Z
    原文地址: https://www.jianshu.com/p/555db411b6a3
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞