在前端开发中，字符串的处理一直是一个比较常见的操作。在字符串替换方面，ES6中新增了String.prototype.replace()方法，然而它仅仅只能替换第一个匹配到的字符串，如果需要替换所有匹配到的字符串，我们需要使用正则表达式结合g（全局匹配）标志来实现。但是，在ES12中，我们终于迎来了一位真正意义上的字符串"替换全能王"，它就是String.prototype.replaceAll()方法。那么，这个新的方法和其他替换方法的性能有什么不同呢？本篇文章下文将详细探讨这个问题。
String.prototype.replace()方法
String.prototype.replace()方法是ES6中新增的字符串替换方法，它可以根据一个提供的搜索规则进行字符串的替换，我们来看一下它的语法：
string.replace(searchValue, replaceValue)
这个方法接收两个参数，第一个参数是一个正则表达式或者一个普通的字符串，用于表示需要被替换的字符串的位置和内容；第二个参数是一个字符串或者一个回调函数，表示用来替换被匹配到的字符串的新字符串或者计算出新字符串的回调函数。
如果第一个参数是一个字符串，那么它只会匹配第一个被找到的字符串。如果我们需要替换所有的匹配到的字符串，就需要使用正则表达式，如下所示：
const str = 'hello world, hello javascript, hello node.js' const newStr = str.replace(/hello/g, 'hi') console.log(newStr) // hi world, hi javascript, hi node.js
可以看到，我们在正则表达式中添加了g标记，表示全局匹配。这样，替换操作就会匹配到所有的"hello"字符串，并将它们全部替换为"hi"字符串。
但是，String.prototype.replace()方法的性能不是很好。当替换的字符串比较短的时候，它的性能还可以接受。但是当替换的字符串比较长的时候，它的性能就非常差了。这是因为，它的实现机制是先将字符串按照正则表达式的规则进行拆分，然后在每个匹配到的片段中执行替换操作，最后再将所有的片段拼接起来。这个过程消耗了大量的时间和性能。
String.prototype.replaceAll()方法
String.prototype.replaceAll()方法是ES12中新增的字符串替换方法，它可以替换掉所有匹配到的字符串，使用起来非常方便。它的语法如下：
string.replaceAll(searchValue, replaceValue)
这个方法和String.prototype.replace()方法非常类似，唯一的区别就是它可以替换掉所有匹配到的字符串。在性能方面，String.prototype.replaceAll()方法比String.prototype.replace()方法要好得多，特别是在替换的字符串比较长的时候。下面是一个使用String.prototype.replaceAll()方法的例子：
const str = 'hello world, hello javascript, hello node.js'
const newStr = str.replaceAll('hello', 'hi')
console.log(newStr) // hi world, hi javascript, hi node.js可以看到，我们不需要使用正则表达式也可以实现替换所有匹配到的字符串的目的。
性能对比
为了更直观地感受String.prototype.replaceAll()方法和String.prototype.replace()方法的性能差异，我们来看一下下面的代码示例：
-- -------------------- ---- ------- -- ---------------------------------- --- - - -- ------- - - -- - - ------- ---- - - -- ------ ------ - -------------------------- --------------------- ----- ----------------------------- -- ------------------------------- --- - - -- ------- - - -- - - ------- ---- - - -- ------ ------ - ----------------------- ------------------- ----- --------------------------
在这段代码中，我们分别使用了String.prototype.replaceAll()方法和String.prototype.replace()方法对一个10万次重复的字符串进行操作，并使用console.time()和console.timeEnd()方法记录下了它们的执行时间。我们来看一下这个代码执行的结果：
replaceAll: 29.493 ms replace: 402.255 ms
可以看到，String.prototype.replaceAll()方法的执行时间非常短，只有29.493毫秒；而String.prototype.replace()方法的执行时间则长达402.255毫秒。可以说，这种差距是非常明显的。
指导意义
从上面的对比可以看出，String.prototype.replaceAll()方法在替换字符串方面的性能表现非常出色，尤其是在替换的字符串比较长的时候。因此，我们在开发中应该优先选择使用它，而不是使用String.prototype.replace()方法。当然，在一些特定的场景下，String.prototype.replace()方法也是非常有用的，比如需要对匹配到的字符串进行一些自定义的操作等。
此外，由于String.prototype.replaceAll()方法是ES12中新增的方法，因此我们在使用它的时候应该注意浏览器的兼容性。在一些老旧的浏览器中可能不支持这个方法，因此需要做好相应的兼容工作。
最后，性能不是万能的，我们在使用String.prototype.replaceAll()方法的时候，也应该兼顾代码的可读性和可维护性，避免出现一些复杂的处理逻辑和不必要的重复代码。这样才能写出高质量的代码。
结论
在ES12中，String.prototype.replaceAll()方法是一个非常实用的字符串替换方法，它可以方便地替换掉所有匹配的字符串，同时也具备比String.prototype.replace()方法更优秀的性能表现。在开发中，我们应该根据具体的场景选择不同的字符串替换方法，并且注意代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672082502e7021665e028d9a