ECMAScript 2021 has added a new String function replaceAll
.
A long time ago in a galaxy not so far away, people used split
+ join
or regular expressions to replace all occurences of a string.
I created the following example to compare the new method to the old ones.
While I could see some differences in the first case, for example I can't use replacement patterns with split
+ join
or I need to escape special chars with RegExp(str,"g")
, I can't see any difference in the second case.
What are the differences between the new method and the old ones (behaviour difference, performance, browser compatibility...) ?
const source = "abcdefabcdef";
const str1 = "abc", str2 = "xyz";
const reg1 = /abc/g, reg2 = "xyz";
//Case 1 : When we want to replace a string by another
console.log(source.split(str1).join(str2));
console.log(source.replace(new RegExp(str1,"g"),str2));
//versus
console.log(source.replaceAll(str1,str2));
//Case 2 : When we want to use a regular expression
console.log(source.replace(reg1,reg2));
//versus
console.log(source.replaceAll(reg1,reg2));
//Result = "xyzdefxyzdef"
From gleaning the documentation for replaceAll
, we find the following tidbits:
const newStr = str.replaceAll(regexp|substr, newSubstr|function)
Note: When using a
regexp
you have to set the global ("g") flag; otherwise, it will throw a TypeError: "replaceAll must be called with a global RegExp".
In other words, when calling replaceAll
with a regex literal or RegExp
, it must use the global flag. So, there doesn't seem to be much gained by calling replaceAll
versus just using the current replace
. However, one difference with replaceAll
is that when passing it a string, it will automatically do a global replacement. This is where you might save yourself a bit of typing, by not having to enter a global flag.