ES11 中新增的 replaceAll 正则方法

在前端开发中，字符串的处理是经常会用到的一项技能。而处理字符串时，我们也经常需要使用正则表达式。在 ES6 中，replace 方法新增了对正则的支持，可以通过正则表达式来替换字符串中的内容。但是，在嵌套的情况下，我们还需要多次使用 replace 方法来完成替换的操作。不过，ES11 中新增了 replaceAll 方法，可以省略嵌套 replace 方法的使用。下面，我将详细介绍 replaceAll 方法的使用和示例。

replaceAll 方法的用法

使用 replaceAll 方法，只需要传入两个参数：第一个参数是要替换的正则表达式或字符串，第二个参数是要替换为的字符串。例如：

const str = 'ES11 is so cool!';
const replacedStr = str.replaceAll('ES11', 'ES2022');
console.log(replacedStr); // 'ES2022 is so cool!'

在这个例子中，我们将字符串中的 'ES11' 替换为了 'ES2022'。

需要注意的是，第一个参数可以是字符串，也可以是正则表达式。如果第一个参数是字符串，那么只会替换第一个匹配到的字符串。如果第一个参数是正则表达式，那么会替换所有匹配到的字符串。例如：

const str = 'ES11 is so cool! ES11 is so cool!';
const replacedStr = str.replaceAll(/ES11/g, 'ES2022');
console.log(replacedStr); // 'ES2022 is so cool! ES2022 is so cool!'

在这个例子中，我们使用了正则表达式 /ES11/g，表示全局匹配 'ES11' 字符串，进行了批量替换操作。

replaceAll 方法解决的问题

在使用 replace 方法时，如果需要多次替换字符串中的内容，就需要使用嵌套的 replace 方法。例如：

const str = 'ES11 is so cool! ES11 is so cool!';
const replacedStr = str.replace(/ES11/g, 'ES2022').replace(/cool/g, 'awesome');
console.log(replacedStr); // 'ES2022 is so awesome! ES2022 is so awesome!'

在这个例子中，我们首先使用正则表达式 /ES11/g，将字符串中的 'ES11' 替换为 'ES2022'，然后在替换后的字符串中再次使用正则表达式 /cool/g，将 'cool' 替换为 'awesome'。这个操作可以达到我们想要的目的，但是需要多次使用 replace 方法，代码复杂度比较高。

而使用 replaceAll 方法，我们可以直接使用正则表达式 /ES11|cool/g 进行一次性的替换操作，代码更加简单明了。例如：

const str = 'ES11 is so cool! ES11 is so cool!';
const replacedStr = str.replaceAll(/ES11|cool/g, function(match){
  return match === 'ES11' ? 'ES2022' : 'awesome';
});
console.log(replacedStr); // 'ES2022 is so awesome! ES2022 is so awesome!'

在这个例子中，我们直接使用正则表达式 /ES11|cool/g 进行了一次性的替换操作，同时通过一个回调函数来对匹配到的字符串进行不同的替换。相对于使用多次 replace 方法，这种方式更加简单、方便。

replaceAll 方法的兼容性

需要注意的是，replaceAll 方法是在 ES11 中新增的，因此在早期的浏览器版本中不支持。如果需要在旧版浏览器中使用 replaceAll 方法，可以通过将正则表达式转换为字符串的方式重新替换来实现。例如：

-- -------------------- ---- -------
-- ------------------------------ -
  --------------------------- - ---------------- -------- -
    ------ ---------------------------------
  --
-

----- --- - ----- -- -- ----- ---- -- -- -------
----- ----------- - ---------------------------- ----------------
  ------ ----- --- ------ - -------- - ----------
---
------------------------- -- ------- -- -- -------- ------ -- -- ---------

在这个例子中，我们给 String.prototype 添加 replaceAll 方法，通过将原字符串转换为数组，然后使用 split 和 join 方法对数组进行操作，最后将操作结果转换为字符串来代替原来的字符串。

结语

通过使用 replaceAll 方法，我们可以在字符串替换时省去嵌套使用多个 replace 方法的操作，代码实现更加简洁便捷。同时，replace 方法也发生了很多变化，在处理字符串时更加强大、灵活。希望本文能对你在字符串处理方面有所帮助！

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