正则表达式是前端开发中经常使用的工具，特别是在字符串处理和表单验证中。随着 ECMAScript 的更新，正则表达式也在不断升级。在最新的 ECMAScript 2020 中，groups 的加入为正则表达式的使用提供了更多的便捷和灵活性。本文将对 ECMAScript 2020 中的正则表达式进行介绍和讲解，探讨如何使用 groups 来提高正则表达式的效率和使用体验。
简介
在 ECMAScript 2020 中，正则表达式加入了 groups 的概念，它允许我们根据捕获的组来进行后续操作。Groups 是一种新的正则表达式语法，它用括号进行包裹，可以捕获和引用子模式。在以前的版本 ECMAScript 中，我们也可以使用括号来分组，但是这些括号仅被用于改变优先级和限定作用域。而 now 的 groups 可以做到这些，也可以捕获匹配到的文本，甚至可用于重构匹配结果。
语法
在正则表达式中使用 groups 非常简单。我们只要用圆括号把一段子模式括起来，就可以创建一个 group。举例如下：
const regex = /(\w+) (\w+)/; const str = 'Hello World!'; const match = str.match(regex); console.log(match); // ['Hello World', 'Hello', 'World']
上述代码中，我们用圆括号括起了两个 \w+，这个表示一个 \w+ 子模式的捕获组。使用 match 方法会匹配到所有子串，并将匹配结果返回为数组。数组中的第一个元素为完整匹配结果，后续元素为捕获组的结果。
ECMAScript 2020 增加了一个新的语法 ?<name>，允许我们为 groups 命名。我们可以使用如下语法对上述代码进行修改：
const regex = /(?<first>\w+) (?<last>\w+)/; const str = 'Hello World!'; const match = str.match(regex); console.log(match); // ['Hello World', 'first': 'Hello', 'last': 'World']
在这个例子中，我们使用 ?<name> 语法来为两个 \w+ 捕获组命名，第一个组称为 first，第二个组称为 last。然后，我们对正则表达式进行匹配，并输出结果。注意，在输出结果时，我们得到了一个对象，而不是一个数组。这是因为这里的 groups 已经被命名，所以在输出时会以键值对的形式显示。
使用技巧
groups 的加入带来了许多新的特性和使用技巧，以下是一些实用技巧：
先行断言和后行断言
在 ECMAScript 2020 中，正则表达式还引入了先行断言和后行断言，可以用于匹配文本前面或后面的内容。我们可以使用 lookahead 和 lookbehind 来指定这些条件。举例如下：
const regex = /(?<=\d{3})\d{4}/;
const str = '1234567890';
const match = str.match(regex);
console.log(match); // ['5678']上述代码中，我们使用了后行断言 (?<=\d{3})，用于匹配文本后面是三个数字的情况。然后，我们再匹配 4 个数字，结果得到了结果 5678。lookahead 和 lookbehind 还有其他常见的应用场景，比如匹配邮箱地址的 @ 前后字符串：
const regex = /(?<=@)\w+(?=\.\w+)/; const str = 'example@qq.com'; const match = str.match(regex); console.log(match); // ['qq']
重构匹配结果
在 ECMAScript 2020 中，groups 还引入了新特性，可以用于重构匹配结果。我们可以使用 replace 方法，并在第二个参数中使用 $1、$2 等来引用匹配到的 groups。以下是一个例子：
const regex = /(\d{4})-(\d{2})-(\d{2})/;
const str = '2021-10-20';
const result = str.replace(regex, '$2/$3/$1');
console.log(result); // '10/20/2021'在这个例子中，我们首先定义了一个正则表达式，用于匹配日期格式。然后，我们使用 replace 方法，并在第二个参数中使用 $1、$2、$3 表示匹配到的 groups 中的第 1、2、3 项。这样，在将日期格式重构时，我们可以只保留月、日并调换年的位置。
反向引用和后向引用
在 ECMAScript 2020 中，groups 的引入也同时带来了反向引用和后向引用的概念。这些概念分别指代了我们如何利用 groups 中的值来匹配后续的字符串。举例如下：
const regex = /(\w+) \1/; const str = 'hello hello'; const match = str.match(regex); console.log(match); // ['hello hello', 'hello']
在这个例子中，我们使用了 \1 表示后向引用，用于匹配与第一个 group 相同的字符串。因此，在这个例子中，正则表达式将匹配两个相同的单词。
总结
ECMAScript 2020 的 groups 引入为正则表达式的使用提供了更多的灵活性和功能。通过使用圆括号将模式括起来，我们可以轻松创建捕获组或命名组，使用后行断言或先行断言匹配前后文本，以及重构和引用匹配结果。虽然 groups 的语法可能需要一些适应时间，但它将提高你的正则表达式使用效率和准确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649dd87b48841e9894a7e2a8