正则表达式是前端开发不可或缺的一部分，但是它常常会给开发者带来不小的困扰，特别是在需要对匹配结果进行进一步处理时更是如此。ES9 中新增的 RegExp Groups，为解决这一难题带来了全新的解决方案。
传统正则表达式的局限
在传统的正则表达式中，如果需要对匹配结果进行进一步处理，需要通过捕获括号进行分组，例如：
const str = 'aaa123bbb456ccc789';
const re = /(\d+)/g;
let match = re.exec(str);
while (match !== null) {
console.log(match[1]);
match = re.exec(str);
}在上面的例子中，我们使用了捕获括号 (\d+) 对匹配到的数字部分进行了分组，并通过 match[1] 访问到了该分组的结果。
然而，这样的方式有一些局限性：
- 需要对捕获括号进行编号，并且从 1 开始，不方便阅读和书写。
- 在进行嵌套分组的时候，很容易产生混乱，并且写法也比较麻烦。
- 如果需要对多个分组结果进行进一步操作，还需要在代码中进行多次访问。
RegExp Groups 的优势
在 ES9 中新增的 RegExp Groups 可以在不使用捕获括号的情况下进行分组，并且可以使用命名分组来更加方便地进行访问。例如：
const str = 'aaa123bbb456ccc789';
const re = /(?<number>\d+)/g;
for (const match of str.matchAll(re)) {
console.log(match.groups.number);
}在这个例子中，我们使用了 (?<number>\d+) 的形式定义了一个命名分组，通过 match.groups.number 即可访问到分组的结果。相对于传统方式，使用 RegExp Groups 的方式具有几个优势：
- 不需要进行编号，可以直接使用命名分组；这使得正则表达式的代码更加易读易懂。
- 可以进行嵌套分组，并且写法更加简洁。
- 分组结果可以通过
match.groups进行一次性访问，不需要多次访问。
总结
ES9 中的 RegExp Groups 为前端开发者带来了全新的匹配与分组方式，它可以有效地解决传统正则表达式复杂、繁琐的问题，使得代码的可读性和可维护性都得到了极大的提升。在实际开发中，建议尽可能地使用 RegExp Groups 来替代传统方式，以提高代码的清晰度和可读性。
示例代码
下面是一个完整的使用 ES9 RegExp Groups 的示例代码：
-- -------------------- ---- ------- ----- ----- - - ------------ ------------- ------------- -- ----- -- - ------------------------------------------------ --- ------ ----- -- ------------------- - ----------------- -------------------- -------- -------------------------- -
输出结果为：
Tag: p, Content: apple Tag: p, Content: orange Tag: p, Content: banana
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d684a48841e9894bb471a