随着现代 Web 应用变得日益复杂，前端 JavaScript 编程也变得越来越重要。ES11 中引入了一些新的 JavaScript 语言特性，其中一个新功能是 String.prototype.matchAll() 方法。本文将详细介绍这个新方法，包括学习指南和示例代码。
String.prototype.matchAll() 方法是什么？
String.prototype.matchAll() 方法是一个 JavaScript 字符串原型方法，它返回一个包含所有与正则表达式匹配的子串的迭代器。这个迭代器允许您遍历所有匹配的子串，以及每个子串的捕获组。
与其他正则表达式语言中的全局匹配类似，matchAll() 方法比 match() 方法更加灵活和强大，尤其是在需要遍历多个匹配时。
String.prototype.matchAll() 方法的语法
String.prototype.matchAll(regexp)
参数
regexp: 必需。一个正则表达式对象。
返回值
一个迭代器，包含与 regexp 匹配的所有子串及其捕获组。每个迭代器的项都是一个数组，第一个元素是匹配的子串，其余元素是其捕获组。
String.prototype.matchAll() 方法的学习指南
如果您已经熟悉 JavaScript 正则表达式的基础知识，那么学习 matchAll() 方法应该很简单。以下是一些有用的建议：
1.了解迭代器
matchAll() 返回一个迭代器，这意味着您可以使用 for-of 循环或 forEach() 方法遍历迭代器的结果。例如：
const string = "hello world, hello JavaScript";
const regexp = /hello(\s\w+)?/g;
for (const match of string.matchAll(regexp)) {
console.log(match);
}在这个示例中，我们使用 for-of 循环来遍历迭代器。在每次循环时，match 变量都会保存当前匹配的结果。
2.了解捕获组
正则表达式可以使用捕获组来标记子匹配，这些标记可称为“捕获组”（Capturing Group）。matchAll() 返回的结果包括捕获组数组。例如：
const string = "2021-07-20, 2019-06-21, 2018-05-19";
const regexp = /(\d{4})-(\d{2})-(\d{2})/g;
for (const match of string.matchAll(regexp)) {
console.log(match[1], match[2], match[3]);
}在这个示例中，我们使用 (\d{4})-(\d{2})-(\d{2}) 来匹配日期格式。match() 方法只返回第一个匹配项，而 matchAll() 方法可以返回所有匹配项及其捕获组。在每次循环时，我们遍历捕获组并输出每个捕获组的值。
3.了解正则表达式
matchAll() 方法需要一个正则表达式对象作为其唯一参数。这意味着您需要了解如何使用正则表达式，以及如何构建正确的正则表达式以获得所需的匹配项。例如：
const string = "http://www.example.com/test, https://www.example.com/test";
const regexp = /(https?):\/\/([^\/]+)(.*)/g;
for (const match of string.matchAll(regexp)) {
console.log(match[1], match[2], match[3]);
}在这个示例中，我们使用正则表达式 /^https?:\/\/([^\/]+)(.*)/g 来匹配 HTTP 和 HTTPS 的 URL。在每次循环时，我们遍历捕获组并输出每个捕获组的值。
String.prototype.matchAll() 方法的示例代码
以下是一些有用的示例代码，可帮助您更好地理解 matchAll() 方法的使用方法：
示例 1：遍历多个匹配
const string = "hello world, hello JavaScript";
const regexp = /hello(\s\w+)?/g;
for (const match of string.matchAll(regexp)) {
console.log(match);
}示例 2：捕获组
const string = "2021-07-20, 2019-06-21, 2018-05-19";
const regexp = /(\d{4})-(\d{2})-(\d{2})/g;
for (const match of string.matchAll(regexp)) {
console.log(match[1], match[2], match[3]);
}示例 3：匹配 URL
const string = "http://www.example.com/test, https://www.example.com/test";
const regexp = /(https?):\/\/([^\/]+)(.*)/g;
for (const match of string.matchAll(regexp)) {
console.log(match[1], match[2], match[3]);
}总结
String.prototype.matchAll() 方法是一个非常有用的 JavaScript 正则表达式工具，它允许您遍历所有匹配的子串及其捕获组。通过学习本文所提供的学习指南和示例代码，您将能够更有效地使用 matchAll() 方法，并在开发 Web 应用程序时获得更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b3c0b348841e9894ffc901