ECMAScript 2020 的新特性：String.prototype.matchAll 方法与正则表达式的高级使用
在前端开发中，常常使用正则表达式来处理字符串。ECMAScript 2020 增加了一个新的方法：String.prototype.matchAll()。这个方法可以在多个匹配项上执行全局匹配，并返回一个迭代器，从而可以更加方便地进行正则表达式的高级使用。
matchAll 方法的使用
matchAll 方法可以接收一个正则表达式作为参数，也可以接收一个字符串参数，会自动将其转换为正则表达式对象。调用 matchAll 方法后会返回一个迭代器，我们可以通过 for...of 循环遍历这个迭代器来获取所有匹配项。
const str = "Hello, my name is John Doe. I am 30 years old. My email address is john.doe@example.com.";
const regex = /\b\S+@[a-zA-Z]+\.[a-zA-Z]+\b/g;
const matches = str.matchAll(regex);
for (const match of matches) {
console.log(match[0]); // john.doe@example.com
}上面的代码中，我们定义了一个正则表达式来匹配电子邮件地址，使用 matchAll 方法获取所有匹配项并输出到控制台。
matchAll 方法返回的是一个迭代器，我们可以使用 next() 方法来获取下一个匹配项，直到迭代器结束。
-- -------------------- ---- ------- ----- --- - ------- -- ---- -- ---- ---- - -- -- ----- ---- -- ----- ------- -- ----------------------- ----- ----- - -------------------------------- ----- ------- - -------------------- --- ----- - --------------- ----- ------------- - ---------------------------- -- -------------------- ----- - --------------- -
在上面的代码中，我们使用了 while 循环来获取所有匹配项。
新的特性：正则表达式命名捕获组
ECMAScript 2018 中引入了正则表达式命名捕获组的新特性。命名捕获组可以为匹配的子字符串指定一个名称，方便在后续的操作中使用。在 ECMAScript 2020 中，matchAll 方法也支持了正则表达式命名捕获组。
假设我们要从一个日期字符串中获取年、月、日三个部分，可以使用正则表达式命名捕获组来获取它们。
const dateStr = "2022-10-18";
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = dateStr.match(regex);
console.log(match.groups.year); // "2022"
console.log(match.groups.month); // "10"
console.log(match.groups.day); // "18"在上面的代码中，我们使用了 ?<year>、?<month>、?<day> 三个语法来为捕获组命名，然后通过 groups 属性获取捕获的内容。
使用 matchAll 方法来获取所有匹配项时，也可以使用命名捕获组来获取匹配的子字符串。
const dateStr = "2022-10-18 2022-10-19 2022-10-20";
const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/g;
const matches = dateStr.matchAll(regex);
for (const match of matches) {
console.log(`${match.groups.year}-${match.groups.month}-${match.groups.day}`);
}在上面的代码中，我们定义正则表达式时使用 g 标志来全局匹配日期字符串中的所有日期，并使用命名捕获组来获取每个匹配项的年、月、日三个部分。
总结
通过介绍 ECMAScript 2020 的新特性：String.prototype.matchAll 方法和正则表达式命名捕获组，我们可以更加方便地处理字符串中的文本信息。在实际的开发中，我们应该结合具体的业务需求来灵活使用正则表达式，以提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65aa1d97add4f0e0ff3a9f4a