使用 ES2020 中的 String.prototype.matchAll：更便捷的匹配字符串-JavaScript中文网-JavaScript教程资源分享门户

使用 ES2020 中的 String.prototype.matchAll：更便捷的匹配字符串

JavaScript 中字符串的匹配是开发中经常使用的功能。在 ES5 中，我们可以使用 String.prototype.match() 来实现匹配字符串，但是该方法返回的是一个数组，需要进行二次处理才能达到我们想要的结果。而在 ES2020 中，新添加了一个方法 String.prototype.matchAll() 来解决这个问题，让我们更便捷地匹配字符串。

String.prototype.matchAll() 方法返回一个迭代器，它可以逐个迭代字符串中所有匹配正则表达式的结果。相比之前的 String.prototype.match() 方法，该方法可以返回一个更为详细的结果对象，不再需要进行二次处理。

使用 String.prototype.matchAll() 方法

我们可以通过下面的代码演示如何使用 String.prototype.matchAll() 方法：

const str = 'hello world, hello world!';
const regex = /hello/g;

const results = str.matchAll(regex);

console.log(results);

在上面的代码中，我们首先定义了一个含有重复 hello 字符串的字符串 str，然后定义了一个匹配正则表达式的变量 regex。接着，我们使用 matchAll() 方法将 str 字符串中所有匹配正则表达式的字符匹配到 results 的一个迭代器中。最后，我们使用 console.log() 打印出这个迭代器的内容。

这样可以看到我们会得到一个如下的迭代器内容：

/*
  [
    [ 'hello', index: 0, input: 'hello world, hello world!' ],
    [ 'hello', index: 12, input: 'hello world, hello world!' ]
  ]  
*/

如上所示，返回的是一个对象数组，每个对象都包含了匹配正则表达式的字符串、该字符串在原字符串中的位置等信息。这样在处理字符串时，我们可以更加方便地获取到匹配信息，避免了处理数据时的额外操作。

该方法与 String.prototype.match() 方法不同之处在于，match() 方法只会返回第一个匹配的字符串，返回的是一个数组；而 matchAll() 方法会匹配所有的字符串，返回的是一个迭代器。

使用迭代器

由于 String.prototype.matchAll() 方法返回的是一个迭代器，因此我们需要使用 for...of 循环或者扩展运算符（spread operator）来获取迭代器中的值。我们可以通过下面的代码来演示如何使用迭代器来读取匹配结果：

const str = 'hello world, hello world!';
const regex = /hello/g;

const results = str.matchAll(regex);

for (const result of results) {
  console.log(result);
}

运行上述代码，可以看到控制台会打印出下面的内容：

/*
  [ 'hello', index: 0, input: 'hello world, hello world!' ]
  [ 'hello', index: 12, input: 'hello world, hello world!' ]
*/

如上所示，通过 for...of 循环，我们可以逐个获取迭代器中的所有值，并对其进行处理。

总结

在 ES2020 中，我们可以使用 String.prototype.matchAll() 方法更方便地匹配字符串。该方法返回一个迭代器，可以逐个迭代字符串中所有匹配正则表达式的结果，无需进行二次处理。在处理字符串时，可以更加方便地获取到匹配信息，避免了处理数据时的额外操作。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6471da82968c7c53b0fc47a3