在 ES2021 中，新增了一种字符串匹配方法 replaceAll()，使得 JavaScript 中字符串的处理更加方便和高效。本文将详细介绍这一方法的使用方法，以及其背后的原理和意义，希望能对前端开发者有所帮助。
方法介绍
在 JavaScript 中，字符串是一种基本数据类型，常常需要进行操作和处理。其中一个常见的操作就是替换字符串中的某些字符或模式。在 ES6 中，我们通常使用 String.prototype.replace() 方法来实现这一目的。但是，这个方法有一个致命的弱点，就是只能替换第一个匹配到的字符或模式，而不能替换全部。
在 ES2021 中，新增的 replaceAll() 方法就解决了这个问题。它可以替换字符串中所有匹配到的字符或模式，而不仅仅是第一个。该方法的使用方法如下：
str.replaceAll(searchValue, replaceValue)
其中，searchValue 表示需要匹配的字符或模式，支持正则表达式；replaceValue 表示用来替换的字符串或函数。如果 replaceValue 是字符串，那么所有匹配到的字符或模式都会被替换为这个字符串。如果 replaceValue 是一个函数，那么每个匹配到的字符或模式都会被这个函数的返回值替换。
对于所有需要使用字符串替换操作的场景，使用 replaceAll() 方法都会比 replace() 更加方便和高效。下面我们来看一些具体的应用场景和例子。
应用场景
替换字符串中的所有匹配项
最常见的应用场景是，将字符串中的某个字符或模式全部替换为另一个字符串。在以前的版本中，我们通常需要使用正则表达式全局匹配的方式：
str.replace(/searchValue/g, replaceValue)
而在 ES2021 中，我们可以直接使用 replaceAll() 方法：
str.replaceAll(searchValue, replaceValue)
例如，我们要将一段文本中的所有空格替换为连字符：
const text = "Hello world !"
const newText = text.replaceAll(" ", "-") // "Hello-world-!"删除字符串中的所有匹配项
另一个常见的应用场景是，删除字符串中的所有匹配项。在以前的版本中，我们通常使用正则表达式匹配和空字符串替换的方式：
str.replace(/searchValue/g, "")
而在 ES2021 中，我们可以直接使用 replaceAll() 方法，将替换字符串指定为空字符串即可：
str.replaceAll(searchValue, "")
例如，我们要将一段文本中所有的句号全部删除：
const text = "Hello. World.!"
const newText = text.replaceAll(".", "") // "Hello World!"替换字符串中的多个匹配项
有时候，我们需要替换字符串中多个不同的匹配项。在以前的版本中，我们需要多次调用 replace() 方法，或者使用正则表达式的 "或" 条件来匹配多个字符串。
而在 ES2021 中，我们可以使用 replaceAll() 方法的正则表达式匹配功能，同时替换多个不同的字符或模式。例如，我们要将一段文本中所有的句号和逗号都替换成空格：
const text = "Hello, World." const newText = text.replaceAll(/[.,]/g, " ") // "Hello World"
此处我们使用了正则表达式 /[.,]/g，这表示匹配到任何一个逗号或句号。由于是全局匹配，所以 replaceAll() 方法会将整个文本中所有匹配到的逗号和句号全部替换为一个空格。
使用函数进行替换
除了使用固定的字符串进行替换，在 replaceAll() 方法中还可以使用函数来进行替换。对于每一个匹配到的字符或模式，该函数都会被调用，并且可以返回一个新的字符串作为替换值。
例如，我们要将一段文本中的所有 HTML 标记都删除，可以使用 replaceAll() 方法加上正则表达式匹配，同时在函数中将所有匹配到的内容都替换为空字符串：
const html = '<div><h1>Hello, World!</h1></div>' const text = html.replaceAll(/<\/?[^>]+>/g, () => "")
这里的正则表达式 /</?[^>]+>/g 用于匹配所有的 HTML 标签，包括尖括号和中间的内容。在函数中，我们直接返回了一个空字符串，从而删除了所有的标签。
总结
ES2021 中新增的 replaceAll() 方法使得字符串的替换操作更加方便和高效，避免了以前需要多次调用 replace() 方法或者使用正则表达式全局匹配的问题。除了可以使用固定字符串作为替换值之外，还可以使用函数来动态生成替换值，进一步丰富了该方法的使用场景。
在编写前端应用时，特别是在处理用户输入、字符串格式化等方面，使用 replaceAll() 方法能够帮助我们更加高效和准确地完成任务。同时，由于该方法兼容性良好，建议在项目中积极使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b1c77fadd4f0e0ffafa658