JavaScript replaceAll()——替换 JS 中字符串的所有实例

原文：JavaScript replaceAll() – Replace All Instances of a String in JS，作者：Dionysia Lemonaki

在 JavaScript 程序中，你可能需要将一个字符或单词替换为另一个字符或单词。

具体来说，你可能需要用其他东西替换该字符或单词的所有实例，而不只是一个。

在 JavaScript 中有几种方法可以实现这一点。

其中一种方法是使用内置的 replaceAll() 方法，你将在本文中学习使用该方法。

以下是我们将介绍的内容：

• JavaScript 中的 replaceAll() 是什么
• replaceAll() 语法
• replaceAll() 以字符串作为第一个参数
• replaceAll() 以正则表达式作为第一个参数
• replaceAll() VS replace()

JavaScript 中的 replaceAll() 是什么

replaceAll() 方法是 JavaScript 标准库的一部分。当你使用它时，你替换了一个字符串的所有实例。

有多种方法可以替换字符串的所有实例，但使用 replaceAll() 是最直接和最快的方法。

需要注意的是，此功能是在 ES2021 中引入的。

虽然 replaceAll() 方法兼容所有主流浏览器，但在针对旧版本浏览器进行开发时，它并​​不是最好的解决方案，因为这些旧版本可能无法理解和支持它。

replaceAll() 方法——语法分解

replaceAll() 方法的一般语法如下所示：

string.replaceAll(pattern, replacement)

让我们分解一下：

• string 是你正在使用的原始字符串，也是你将调用 replaceAll() 方法的字符串
• replaceAll() 方法有 2 个参数：
• pattern 是第一个参数，可以是子字符串或正则表达式——这指的是你要更改并替换为其他内容的项目
• 如果 pattern 是正则表达式，则需要包含 g 标志（其中 g 代表全局），否则 replaceAll() 将引发异常——具体而言，错误将是 TypeError
• 第二个参数 replacement，可以是另一个字符串，也可以是替换 pattern 的函数

这里需要注意的是 replaceAll() 方法不会更改原始字符串。相反，它返回一个新副本。

指定 pattern 的所有实例将被 replacement 替换。

如何使用第一个参数是字符串的 replaceAll()

之前，你看到 replaceAll() 方法接受两个参数——pattern 作为第一个参数，replacement 作为第二个参数。

你还看到该 pattern 可以是字符串或正则表达式。

现在，让我们看看 replaceAll() 将字符串作为第一个参数时如何运行。

假设你有以下示例：

const my_string = "I like dogs because dogs are adorable!";

let pattern = "dogs";
let replacement = "cats";

let my_new_string = my_string.replaceAll(pattern,replacement);

我存储文本 I like dogs because dogs are adorable! 在名为 my_string 的变量中。

这是我正在使用的原始字符串，我想修改它的一些内容。

具体来说，我想更改在原始字符串中出现两次的子字符串 dogs——这将是我的 pattern。

我将这个我想用其他东西替换的子字符串存储在一个名为 pattern 的变量中。

然后我将字符串 cats 存储在一个名为 replacement 的变量中——这是将替换 dogs 的字符串。

然后我对原始字符串调用 replaceAll() 方法，将两个子字符串作为参数传递，并将结果存储在名为 my_new_string 的变量中。

console.log(my_new_string);

// I like cats because cats are adorable!

replaceAll() 方法将用 cats 替换字符串 I like dogs because dogs are adorable! 中的子字符串 dogs 的所有实例。

原始字符串将保持不变。

这里需要注意的是，使用字符串作为第一个参数时的替换是区分大小写的。这意味着只有与 pattern 匹配的大小写相同的字符串才会被替换。

const my_string = "I like Dogs because dogs are adorable!";

let pattern = "dogs";
let replacement = "cats";

let my_new_string = my_string.replaceAll(pattern,replacement);

console.log(my_new_string);

在上面的示例中，有两个 dogs 的实例，但第一个具有大写字母 D。

从输出中可以看出，替换是区分大小写的：

I like Dogs because cats are adorable!

如何使用第一个参数是正则表达式的 replaceAll()

正如你之前看到的，你可以传递一个正则表达式（也称为 regex）作为第一个参数。

正则表达式是创建搜索模式的字符序列。

执行此操作的一般语法类似于以下内容：

string.replaceAll(/pattern/g, replacement)

让我们以上一节中的示例为例，不是使用字符串，而是使用正则表达式作为第一个参数：

const my_string = "I like dogs because dogs are adorable!";

let pattern = /dogs/g;
let replacement = "cats";

let my_new_string = my_string.replaceAll(pattern,replacement);

console.log(my_new_string);

//output

// I like cats because cats are adorable!

当使用正则表达式作为第一个参数时，请确保使用 g 标志。

如果你不这样做，你最终会在代码中得到一个错误：

const my_string = "I like dogs because dogs are adorable!";

let pattern = /dogs/;
let replacement = "cats";

let my_new_string = my_string.replaceAll(pattern,replacement);

console.log(my_new_string);

// output

// test.js:6 Uncaught TypeError: String.prototype.replaceAll called with a // non-global RegExp argument
//    at String.replaceAll (<anonymous>)
//   at test.js:6:31

让我们稍微调整一下原始字符串。

const my_string = "I like Dogs because dogs are adorable!";

let pattern = /dogs/g;
let replacement = "cats";

let my_new_string = my_string.replaceAll(pattern,replacement);

console.log(my_new_string);

我现在有两个 dogs 的实例，但其中一个是大写的 D。

我最终得到以下输出：

I like Dogs because cats are adorable!

从该输出中，你可以看出替换是区分大小写的。

要使其不区分大小写，请确保在 g 标志之后添加 i 标志，如下所示：

const my_string = "I like Dogs because dogs are adorable!";

let pattern = /dogs/gi;
let replacement = "cats";

let my_new_string = my_string.replaceAll(pattern,replacement);

console.log(my_new_string);

// output

// I like cats because cats are adorable!

正则表达式 /dogs/gi 将匹配包含该子字符串的所有实例，并使替换不区分大小写。

replaceAll() 与 replace() 方法有什么区别

replaceAll() 和 replace() 方法之间的区别在于 replaceAll() 直接执行全局替换。

replaceAll() 方法将替换你指定的字符串或正则表达式模式的所有实例，而 replace() 方法将仅替换第一次出现的实例。

这是 replace() 使用字符串作为第一个参数的运行方式：

const my_string = "I like dogs because dogs are adorable!";

let pattern = "dogs";
let replacement = "cats";

let my_new_string = my_string.replace(pattern,replacement);

console.log(my_new_string);

// output
// I like cats because dogs are adorable!

这是 replace() 使用正则表达式作为第一个参数的运行方式：

const my_string = "I like dogs because dogs are adorable!";

let pattern = /dogs/;
let replacement = "cats";

let my_new_string = my_string.replace(pattern,replacement);

console.log(my_new_string);

// output
// I like cats because dogs are adorable!

使用 replace() 方法执行全局替换的唯一方法是使用带有 g 标志的正则表达式：

const my_string = "I like dogs because dogs are adorable!";

let pattern = /dogs/g;
let replacement = "cats";

let my_new_string = my_string.replace(pattern,replacement);

console.log(my_new_string);

// output

// I like cats because cats are adorable!

小结

你现在知道了 replaceAll() 方法的工作原理以及可以操作它的一些方法。

要了解有关 JavaScript 的更多信息，请查看 freeCodeCamp 的 JavaScript 算法和数据结构认证。

你将从基础开始，学习对初学者友好的交互式课程。你还将构建五个项目以加强对所学概念的理解。

感谢你阅读本文，祝你编码愉快！