ES9 中的 Named Capturing Groups 及其用法-JavaScript中文网-JavaScript教程资源分享门户

ES9 中的 Named Capturing Groups 及其用法

正则表达式在前端开发中有着广泛的应用，从数据校验到字符串匹配，都可以用到正则表达式。而 ES9 中的 Named Capturing Groups 就是一种新的正则表达式特性，它可以为正则表达式的匹配结果命名，并方便我们后续的处理。本文将介绍 ES9 中 Named Capturing Groups 的用法，并给出一些实际应用案例。

什么是 Named Capturing Groups？

在 ES9 中，我们可以使用圆括号为正则表达式的某一部分分组，并通过后缀冒号和名称为这个分组命名，形如：(?exp)。这个分组就是 Named Capturing Groups，其中“name”就是它的名称。

Named Capturing Groups 可以把匹配结果进行命名，使得我们在后处理中更加方便的获取匹配结果。同时也可以通过名称引用这个分组，来进行正则表达式的进一步匹配。

Named Capturing Groups 的语法

如上所述，ES9 中 Named Capturing Groups 的语法形如：(?exp)，其中“name”就是该分组的名称，“exp”是正则表达式的语法，表示分组的匹配内容。

具体来说，ES9 中的 Named Capturing Groups 可以按如下方式使用：

// javascriptcn.com 代码示例
const str = 'ES9 is awesome';

// 匹配 str 中的单词，并把它们命名为 word
const regexp = /\b(?<word>\w+)\b/g;

const matches = [...str.matchAll(regexp)];
console.log(matches); // [Array(2), Array(2)]
console.log(matches[0].groups.word); // ES9
console.log(matches[1].groups.word); // is

以上代码使用了 Named Capturing Groups 把字符串中的单词进行了匹配，并把单词命名为“word”。我们可以使用 matches[0].groups.word 和 matches[1].groups.word 分别获取两个单词的值。

Named Capturing Groups 的应用实例

接下来我们将给出三个实例，展示 Named Capturing Groups 在实际应用中的使用方法。

3.1 从 URL 中获取参数

我们经常会需要从 URL 中获取参数，可以使用下面的代码实现：

// javascriptcn.com 代码示例
const url = 'https://www.example.com/index.html?id=1234&name=bob';

const regexp = /(?<name>[\w-]+)=?(?<value>[\w-]*)/g;
const matches = new Map();

let match;
while ((match = regexp.exec(url)) !== null) {
  matches.set(match.groups.name, match.groups.value);
}

console.log(matches.get('id')); // 1234
console.log(matches.get('name')); // bob

以上代码使用 Named Capturing Groups 和 Map 对象实现了从 URL 中抓取参数的功能，并将它们分别保存到 matches 中。

3.2 从 csv 文件中提取数据

假设我们有一个 csv 文件，其中包含学生的成绩，通过正则表达式和 Named Capturing Groups，可以方便的提取出每个学生的成绩信息：

// javascriptcn.com 代码示例
const csv = `Alice, 85, 90, 88
Bob, 78, 90, 92
Charlie, 88, 92, 84`;

const regexp = /^(?<name>\w+),\s*(?<score1>\d+)\s*,\s*(?<score2>\d+)\s*,\s*(?<score3>\d+)\s*$/gm;
const matches = [];

let match;
while ((match = regexp.exec(csv)) !== null) {
  const { name, score1, score2, score3 } = match.groups;
  matches.push({ name, scores: [score1, score2, score3] });
}

console.log(matches);
/*
[
  { name: 'Alice', scores: [ '85', '90', '88' ] },
  { name: 'Bob', scores: [ '78', '90', '92' ] },
  { name: 'Charlie', scores: [ '88', '92', '84' ] }
]
*/

以上代码使用 Named Capturing Groups 和 Array 对象，从 csv 文件中抓取学生姓名和成绩，然后把它们组成一个数组返回。

3.3 替换字符串中符合要求的内容

在处理字符串时，通常会需要对某些特定的内容进行替换。ES9 中的 Named Capturing Groups 可以帮助我们方便的提取出需要替换的内容。

const str = 'The cat in the hat';

const regexp = /\b(?<word>cat|hat)\b/g;
const result = str.replace(regexp, '$<word>'.toUpperCase());

console.log(result); // The CAT in the HAT

以上代码使用 Named Capturing Groups 和 String 的 replace() 方法实现了把字符串中的“cat”和“hat”替换为大写的“CAT”和“HAT”的功能。

总结

本文主要介绍了 ES9 中的 Named Capturing Groups 的基本用法和三个实用示例。它不仅可以方便我们对正则表达式的匹配结果进行命名和引用，还可以帮助我们在处理字符串时更加高效便捷地获取我们需要的内容。因此，在前端开发中，我们有必要深入学习和掌握 Named Capturing Groups 的用法。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6541b1637d4982a6ebb4883f