ES11 中的字符串方法 replaceAll 详解

在 ES11 引入的新特性中，有一个非常实用的方法——replaceAll。本文将简单介绍该方法的作用以及使用方法，并给出一些实用的示例代码，希望对前端开发者有所帮助。

replaceAll 方法的作用

在 ES5 中，我们通过字符串的 replace 方法可以实现将字符串中的指定字符替换为另一种字符。

const str = 'hello, world!';
const newStr = str.replace(',', '');
console.log(newStr); // 'hello world!'

这里将字符串中的逗号替换为空格，输出结果为 hello world!。

不过，replace 方法只能替换第一个匹配到的字符，如果我们要替换字符串中所有匹配到的字符，就需要使用 replaceAll 方法。

const str = 'hello, world!';
const newStr = str.replaceAll(',', '');
console.log(newStr); // 'hello world!'

上述代码输出结果同样为 hello, world!，不过 replaceAll 方法会将所有匹配到的逗号都替换为空格，而不是只替换第一个匹配到的逗号。

replaceAll 方法的使用方法

replaceAll 的使用方法和 replace 基本相同，只是将方法名替换为了 replaceAll。

const newStr = str.replaceAll(oldValue, newValue);

其中，oldValue 表示需要被替换的值，newValue 表示替换成的新值。

replaceAll 实用示例

替换字符串中所有匹配的字符

const str = 'hello,hello, world!';
const newStr = str.replaceAll('hello', 'hi');
console.log(newStr); // 'hi,hi, world!'

将字符串中的所有 'hello' 替换为 'hi'。

替换字符串中的特殊字符

const str = 'hello. world!';
const newStr = str.replaceAll('.', '');
console.log(newStr); // 'hello world!'

将字符串中的所有 '.' 替换为空字符串，特别适合用于去除价格、数量等数字中的小数点。

批量替换字符串中的多个特殊字符

const str = '$20.50';
const newStr = str.replaceAll('.', '').replaceAll('$', '');
console.log(newStr); // '2050'

将字符串中的小数点和美元符号都替换为空字符串，得到纯数字结果。

批量替换数组中字符串中的特殊字符

const arr = ['$20.50', '$50.00', '$1.00'];
const newArr = arr.map((item) => {
  return item.replaceAll('.', '').replaceAll('$', '');
});
console.log(newArr); // ['2050', '5000', '100']

将数组中所有元素的小数点和美元符号都替换为空字符串，得到由纯数字组成的新数组。

总结

通过这篇文章，我们了解了 replaceAll 方法的作用，学习了它的使用方法，并给出了一些实用的示例代码。replace 和 replaceAll 方法的区别在于，前者只替换第一个匹配到的字符，而后者会将所有匹配到的字符都替换掉。在我们的前端开发过程中，掌握 replaceAll 方法可以大大提高工作效率。

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