ES12 的新特性 String.prototype.replaceAll() 详解-JavaScript中文网-JavaScript教程资源分享门户

在 ES12 中，引入了一个新的 String 原型方法 replaceAll()。这个方法可以在字符串中查找并替换所有匹配的子字符串，而不仅仅是第一个匹配。这个方法的使用非常方便，可以大大简化前端开发中对字符串的操作。

语法

String.prototype.replaceAll(searchValue, replaceValue)

searchValue：要查找并替换的字符串或正则表达式。
replaceValue：用于替换匹配字符串的新字符串或者一个返回新字符串的函数。

示例

下面是一个简单的示例，展示了如何使用 replaceAll() 方法来替换字符串中的所有匹配项：

const str = "hello world";
const newStr = str.replaceAll("l", "x");
console.log(newStr); // "hexxo worxd"

在上面的示例中，我们将字符串中所有的 "l" 替换成了 "x"。

下面是一个使用正则表达式的示例，它将字符串中所有的数字替换成了 "x"：

const str = "1234abcd5678efgh";
const newStr = str.replaceAll(/\d/g, "x");
console.log(newStr); // "xxxxabcdxxxxefgh"

学习意义

在前端开发中，字符串操作是非常常见的。在过去，我们通常使用 replace() 方法来替换字符串中的某个子字符串。但是，replace() 方法只会替换第一个匹配项。如果我们想要替换所有匹配项，就需要使用正则表达式，并且使用 replace() 方法的第二个参数来指定替换字符串。这种方式比较繁琐，容易出错。

在 ES12 中，引入了 replaceAll() 方法，它可以方便地替换所有匹配项，避免了繁琐的正则表达式操作。使用 replaceAll() 方法可以提高开发效率，减少出错的可能性。

指导意义

在实际开发中，我们通常会遇到需要替换字符串中所有匹配项的情况。如果使用 replace() 方法，就需要写一些复杂的正则表达式，容易出错。而使用 replaceAll() 方法，代码量更少，也更易读。

不过需要注意的是，replaceAll() 方法并不是所有浏览器都支持的。在使用之前，需要先检查浏览器是否支持这个方法。如果不支持，可以使用正则表达式来实现相同的功能。

下面是一个检查浏览器是否支持 replaceAll() 方法的示例：

if (!String.prototype.replaceAll) {
  String.prototype.replaceAll = function(searchValue, replaceValue) {
    return this.replace(new RegExp(searchValue, "g"), replaceValue);
  };
}

这个示例中，我们使用了一个判断语句来检查浏览器是否支持 replaceAll() 方法。如果不支持，就定义一个名为 replaceAll() 的新方法，它使用正则表达式来替换所有匹配项。

结论

ES12 中引入的 String.prototype.replaceAll() 方法可以方便地替换字符串中的所有匹配项，避免了繁琐的正则表达式操作。使用这个方法可以提高开发效率，减少出错的可能性。需要注意的是，这个方法并不是所有浏览器都支持的，需要先检查浏览器是否支持。如果不支持，可以使用正则表达式来实现相同的功能。

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