在前端开发中，操作字符串是一个非常常见的场景，每个开发者都应该对字符串的各种操作方法熟练掌握。而 ES6 中新增的 replaceAll 方法可以帮助我们更快捷方便地对字符串进行替换操作，本文将对其在实战中的应用做详细介绍，并带来实用的示例代码。
replaceAll 方法简介
在 ES6 之前，我们可以使用 replace 方法来对字符串进行替换操作，但它只能替换第一次出现的目标字符串。而 replaceAll 方法可以实现全局替换，将所有匹配到的目标字符串都替换成指定字符串。
replaceAll 方法的语法如下：
str.replaceAll(searchValue, replaceValue)
其中，searchValue 表示要被替换的目标字符串，可以是正则表达式，replaceValue 表示替换成的新字符串，可以是字符串或函数。
需要注意的是，该方法并不会改变原字符串，而是返回一个新的字符串，我们需要将其赋值给变量或使用其它方式来获取它。
实战应用
替换字符串中的所有空格
在前端开发中，我们经常要对字符串进行空格处理，例如去除开头和结尾的空格，或将多个空格替换成一个空格等。而使用 replaceAll 方法可以方便快捷地将字符串中的所有空格替换成指定字符，例如下面的示例代码：
const str = ' Hello World ' const newStr = str.replaceAll(/\s+/g, '-') console.log(newStr) // "--Hello--World--"
该示例代码中，我们使用正则表达式 / \s + /g 匹配所有的空格，并将其替换成 - 字符串，最后得到了新的字符串。
替换字符串中的占位符
在前端开发中，我们经常要将一些数据动态地插入到字符串中，例如替换一些 URL 中的参数、设置页面标题等。使用占位符可以方便地达到这个目的，而使用 replaceAll 方法可以更快捷地完成字符串替换，例如下面的示例代码：
const url = 'https://api.example.com/users/{id}/articles/{articleId}'
const id = '123'
const articleId = '456'
const newUrl = url.replaceAll('{id}', id).replaceAll('{articleId}', articleId)
console.log(newUrl) // "https://api.example.com/users/123/articles/456"该示例代码中，我们先定义了一个包含占位符的 URL，然后使用两个 replaceAll 方法将占位符替换成真实数据，最后得到了新的 URL。
替换字符串中的 Emoji 表情
在前端开发中，我们也经常需要对包含 Emoji 表情的字符串进行处理，例如将 Emoji 表情替换成指定字符或插入自定义的表情等。而使用 replaceAll 方法可以方便快捷地将字符串中的所有 Emoji 表情替换成指定字符，例如下面的示例代码：
const str = 'Hello 🌍, I ❤️ JavaScript!'
const newStr = str.replaceAll(/\p{Emoji_Presentation}/gu, '*')
console.log(newStr) // "Hello *, I * JavaScript!"该示例代码中，我们使用正则表达式 \p{Emoji_Presentation} 匹配所有的 Emoji 表情，并将其替换成 * 字符串，最后得到了新的字符串。
需要注意的是，直接使用 replaceAll 方法无法处理 Unicode 超过 \uFFFF 的 Emoji 表情，需要使用正则表达式结合 u 修饰符来处理。
总结
ES6 中的 replaceAll 方法可以帮助我们更方便地对字符串进行替换操作，它可以实现全局替换，替换所有匹配到的目标字符串。在实战中，我们可以将其应用在各种场景中，例如替换字符串中的所有空格、替换字符串中的占位符、替换字符串中的 Emoji 表情等。
需要注意的是，正则表达式的使用需要熟悉，合理地使用它可以帮助我们更高效地进行字符串替换。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659e02b0add4f0e0ff71fb84