用 ECMAScript 2021 (ES12) 中的 String.replaceAll() 方法替换特定字符-JavaScript中文网-JavaScript教程资源分享门户

在日常的前端开发工作中，字符串处理是一个非常基础和常见的操作。ECMAScript 2021 (ES12) 中新增了一个字符串方法 String.replaceAll()，该方法可以一次性替换字符串中的全部匹配项，极大地简化了字符串替换的操作。

基础使用

String.replaceAll() 方法的基本语法如下：

str.replaceAll(searchValue, replaceValue)

其中，searchValue 是需要被替换的字符串或正则表达式，replaceValue 是用来替换 searchValue 的字符串或函数。

下面是一个简单的示例，将字符串 "abc" 中的 "b" 字符替换为 "d":

const str = "abc";
const newStr = str.replaceAll("b", "d");
console.log(newStr); // 输出 "adc"

需要注意的是，String.replaceAll() 方法不会改变原字符串，而是返回一个新的字符串。

支持正则表达式

String.replaceAll() 方法支持正则表达式作为 searchValue，这意味着我们可以用更加灵活的方式进行字符串替换。

例如，我们想将字符串中的所有数字替换为 "x"，可以使用正则表达式 /[\d]+/g：

const str = "hello 123 world 456";
const newStr = str.replaceAll(/[\d]+/g, "x");
console.log(newStr); // 输出 "hello x world x"

同时，String.replaceAll() 方法还支持在 replaceValue 中使用与正则表达式相关的关键字，例如 $&、$1、$2 等等，这些关键字对应着正则表达式中的整体匹配、第一个捕获组、第二个捕获组等等。

下面是一个示例，将字符串中的 "a" 字符串用 "a" 替换，并在 "a" 中加入一个 "x"：

const str = "apple, banana, orange";
const newStr = str.replaceAll("a", "<b>$&x</b>");
console.log(newStr); // 输出 "<b>ax</b>pple, b<b>ax</b>n<b>ax</b>nx, or<b>ax</b>nge"

字符串替换实践

实际的前端开发中，字符串替换操作是非常常见的。下面是一个实际需求的场景：

将长度超过 10 的字符串截取前 10 个字符，并在末尾添加省略号。

我们可以使用 String.slice() 方法来截取前 10 个字符，然后使用 String.replaceAll() 方法将原字符串中的前 10 个字符替换为截取后的字符串，并在末尾添加省略号。

示例代码如下：

const str = "这是一个长度很长的字符串，需要截取前十个字符并添加省略号";
if (str.length > 10) {
  const newStr = str.slice(0, 10) + "...";
  const finalStr = str.replaceAll(str.slice(0, 10), newStr);
  console.log(finalStr);
}

在这个示例代码中，我们首先判断字符串是否需要被替换。如果需要替换，则使用 String.slice() 方法截取前 10 个字符，并在末尾添加省略号。然后，使用 String.replaceAll() 方法将原字符串中的前 10 个字符用新的字符串替换。

总结

String.replaceAll() 方法是 ECMAScript 2021 (ES12) 新增的字符串方法，可以方便地进行字符串替换操作。该方法既支持普通字符串作为搜索目标，也支持正则表达式作为搜索目标，并支持一些与正则表达式相关的关键字。

在前端开发中，字符串替换操作非常常见。使用 String.replaceAll() 方法可以简化字符串替换的操作，并提高开发效率。在使用 String.replaceAll() 方法时，需要注意该方法不会改变原字符串，并始终返回一个新的字符串。

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