JavaScript 字符串处理的两种方式 ——indexOf 和 matchAll 是否能满足需求？ECMAScript 2021 中的整合新方法来了

在 JavaScript 中，字符串处理是非常常见的需求，比如搜索、替换、截取等等。常用的字符串处理方法包括 indexOf 和 matchAll 等。然而，在实际使用中，我们会发现这些方法并不能完全满足需求。那么怎么办呢？ECMAScript 2021 中的整合新方法带来了新的解决方案。

indexOf 和 matchAll 方法的不足

indexOf 方法

indexOf 方法可以用来查找一个字符串在另一个字符串中第一次出现的位置，其语法如下：

string.indexOf(searchValue[, fromIndex])

其中，searchValue 是要查找的字符串，fromIndex 是查找的起始位置。如果未找到该字符串，则返回 -1。

例如：

const str = "Hello world!";
const searchStr = "world";
const index = str.indexOf(searchStr);

console.log(index); // 6

虽然 indexOf 方法非常方便，但是它只能找到一个位置，如果要找到所有的位置，就比较麻烦了。

matchAll 方法

matchAll 方法可以用来查找所有匹配的字符串，其语法如下：

string.matchAll(regexp)

其中，regexp 是要匹配的正则表达式。返回的是一个迭代器对象，遍历该对象可以得到所有的匹配结果。

例如：

const str = "Hello world and hello to you!";
const regex = /hello/gi;
const matches = str.matchAll(regex);

for (const match of matches) {
  console.log(match[0]); // hello
}

matchAll 方法可以找到所有的匹配结果，但是需要用迭代器对象逐一遍历，比较麻烦。

ECMAScript 2021 中的新方法

ECMAScript 2021 中新增了两个方法：String.prototype.match 和 String.prototype.replaceAll。

String.prototype.match 方法

String.prototype.match 方法和 matchAll 方法一样，可以用来查找所有匹配的字符串，但是返回的是一个数组，而不是迭代器对象，可以直接访问。

其语法如下：

string.match(regexp)

同样是匹配正则表达式，返回的是一个数组，元素是字符串中所有与正则表达式匹配的子串。

例如：

const str = "Hello world and hello to you!";
const regex = /hello/gi;
const matches = str.match(regex);

console.log(matches); // ["Hello", "hello"]

String.prototype.replaceAll 方法

String.prototype.replaceAll 方法可以用来替换字符串中的所有匹配项，其语法如下：

string.replaceAll(searchValue, replaceValue)

其中，searchValue 是要替换的字符串或正则表达式，replaceValue 是用来替换的字符串或一个函数。如果 searchValue 是一个字符串，则只会替换第一个匹配项，如果想要替换所有匹配项，则需要使用正则表达式。

例如：

const str = "Hello world and hello to you!";
const replaceStr = "hi";
const regex = /hello/gi;
const replaceFn = (match) => match.toUpperCase();

const newStr = str.replaceAll(regex, replaceStr).replaceAll(/\s+/g, "-").replaceAll(regex, replaceFn);

console.log(newStr); // "hi world-and-HI-to-you!"

总结

在字符串处理中，indexOf 和 matchAll 两个方法都有不足，不能完全满足需求。ECMAScript 2021 中的 String.prototype.match 和 String.prototype.replaceAll 方法带来了新的解决方案，使得字符串处理更加方便、简洁。需要注意的是，这两个新方法仍然需要在支持 ECMAScript 2021 的浏览器环境下使用，如果需要兼容旧版本的浏览器，则需要使用其他方法来处理字符串。

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