正则表达式在前端开发中扮演着重要的角色。在 ES9 中增加了一项新特性：原子组。这个新特性可以让我们更方便地处理复杂的正则表达式匹配。本文将详细介绍 ES9 中的原子组特性。
原子组
原子组是一个由一些原子组成的整体，它用一对圆括号来表示。在正则表达式中，原子组主要有两个作用：
- 分组
- 反向引用
分组
使用原子组进行分组，可以让我们更方便地对子模式进行处理。例如，我们想把一个字符串中的数字和非数字字符分别提取出来。使用原子组便可轻松实现：
-- -------------------- ---- ------- ----- --- - ------ --- -------- ----- ----- - ------------------ --- ------ ----- ------ - ---------------- - ---------------------- -- --- ----- ----- - ---------------------- -- --- ---------------------- -- ----- ----- - -
以上代码中，我们使用了两个原子组，一个用来匹配数字，另一个用来匹配非数字字符。在每轮迭代中，match 数组中会存储当前匹配到的字符串和两个原子组匹配到的字符串。
反向引用
原子组还有一个强大的功能：反向引用。通过在正则表达式中使用 \n（n 为数字），可以引用之前匹配到的第 n 个原子组。例如，以下正则表达式可以匹配重复的单词：
const regex = /(\b\w+\b)\s+\1/g; const str = 'cat cat dog dog'; const matched = str.match(regex); // ['cat cat', 'dog dog']
正则表达式可以匹配两个重复的单词，原因是它使用了反向引用 \1，即引用了之前匹配到的第一个原子组 \b\w+\b。这使得我们可以更方便地处理重复的模式。
原子组中的新特性
在 ES9 中，原子组有了一些新特性，我们来一一进行讲解。
命名分组
在旧版本的 JavaScript 中，我们只能使用数字来引用一个原子组。这样做往往比较难以理解，尤其是对于复杂的正则表达式而言。ES9 中引入了一个新特性：命名分组。
使用命名分组，我们可以为一个原子组命名，而不是使用数字进行引用。例如，以下正则表达式使用命名分组来匹配一个完整的日期：
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const str = '2019-01-01';
const matched = regex.exec(str);
console.log(matched.groups.day); // '01'可以看到，我们使用 (?<name>...) 的语法为原子组命名。在 matched.groups 中，我们可以通过名称来访问原子组匹配到的内容，而不用使用数字索引。
命名分组在处理较为复杂的正则表达式时，可以帮助我们更快更易地理解正则表达式。
非捕获分组
有时候，我们需要使用原子组来进行匹配，但是匹配到的内容我们并不关心。在这种情况下，使用普通的原子组将让正则表达式变得冗长。为了解决这个问题，ES9 引入了非捕获分组。
与命名分组不同，非捕获分组用 (?:...) 来表示。例如，以下正则表达式可以匹配一个 IP 地址：
const regex = /(?:\d{1,3}\.){3}\d{1,3}/;
const str = '192.168.0.1';
const matched = regex.exec(str);
console.log(matched[0]); // '192.168.0.1'可以看到，我们使用了一个非捕获分组 (?:\d{1,3}\.) 用来匹配每一个 IP 地址段，而使用 (...) 可能并不方便。
结论
ES9 中引入的原子组新特性让我们可以更方便地处理复杂的正则表达式，代码更加易读易懂。在今后的开发中，我们可以尝试使用这些新特性来提高代码的效率和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6720ab572e7021665e035552