如何使用 JavaScript String.prototype.replace() 方法

String.prototype.replace() 方法搜索第一次出现的字符串,并将其替换为指定的字符串。它在不改变原始字符串的情况下执行此操作。

此方法也适用于正则表达式,因此你正在搜索的项目可能是正则表达式。

作为替换值返回的值可能是字符串或函数。

String.prototype.replace() 方法的基本语法

const variable = variable.replace("stringToReplace", "expectedString");

你可以通过以下方式使用 replace() 方法:

  • 将初始字符串或字符串分配给变量
  • 声明另一个变量
  • 对于新变量的值,在新变量名前加上 replace() 方法
  • 逗号分隔要替换的字符串和括号中的预期字符串

String.prototype.replace() 方法使用示例

这是一个基本的示例:

const coding = "I learned how to code from TV";
const replacedString = coding.replace("TV", "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp

在上面的示例中:

  • 我声明了一个名为 coding 的变量,并为它赋值了字符串 “I learned how to code from TV
  • 我声明了另一个名为 replacedString 的变量
  • 对于 replacedString 变量的值,我引入了 replace() 方法,并指定我想将初始变量中的 “TV” 替换为 “freeCodeCamp”。

下面是一个示例,展示了 replace() 方法永远不会改变(更改)初始字符串:

const coding = "I learned how to code from TV";
const replacedString = coding.replace("TV", "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp
console.log(coding); // Result: I learned how to code from TV

在下面的示例中,我使用正则表达式搜索匹配 “TV” 的文本并将其替换为 “freeCodeCamp”:

const coding = "I learned how to code from TV";
const replacedString = coding.replace(/TV/, "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp

由于 replace() 方法仅适用于字符串中某些文本第一次出现,如果你想用另一个单词完全替换字符串中的某个单词怎么办?你可以使用 replaceAll() 方法。

如何使用 replaceAll() 方法

与 replace() 方法稍微相似的字符串方法是 replaceAll() 方法。

此方法完全替换字符串中某个单词。

replaceAll() 方法示例

const coding = "I learned how to code from TV. TV remains in my heart for life.";
const replacedString = coding.replaceAll("TV", "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp. freeCodeCamp remains in my heart for life.

replaceAll() 方法把每次出现的 “TV” 都被替换为 “freeCodeCamp”。

使用原始的 replace() 方法,你可以通过使用正则表达式搜索字符串中某个单词,并将其替换为另一个单词,来实现 replaceAll() 的功能。

const coding = "I learned how to code from TV. TV remains in my heart for life.";
const replacedString = coding.replace(/TV/g, "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp. freeCodeCamp remains in my heart for life.

我能够使用正则表达式的 g 标志搜索与 “TV” 匹配的每个单词,并将其替换为 “freeCodeCamp”。

如何将函数传递给 replace() 方法

正如我之前所说,你可以将要返回的值作为函数的替换值。

在下面的示例中,我使用 replace() 方法将本文的标题转换为 URL slug:

const articleTitle = "JavaScript Replace – How to Use the String.prototype.replace() Method";
const slugifyArticleTitle = articleTitle.toLowerCase().replace(/ /g, function (article) {
    return article.split(" ").join("-");
  });

console.log(slugifyArticleTitle); //Result: javascript-replace-–-how-to-use-the-string.prototype.replace()-method

在上面的脚本中:

  • 我声明了一个名为 articleTitle 的变量,并把这篇文章的标题赋值给它
  • 我声明了另一个名为 slugifyArticleTitle 的变量,并使用 toLowerCase() 方法将文章标题转换为小写字母
  • 我引入了 replace() 方法并用 / /g 搜索每个空格
  • 然后我将一个函数传递给 replace() 方法,并为其分配了一个 article 参数,该参数是指被转换为小写字母的字符串(文章标题)
  • 在函数内部,返回的是将文章标题按空格进行拆分,这是通过 split() 方法完成的
  • 在所有有空格的地方拆分文章标题后,我使用 join() 方法用连字符连接字符串中的各个字母

总结

String.prototype.replace() 方法是一个强大的字符串方法,你可以在 JavaScript 中处理字符串时完成很多事情。

除了 String.prototype.replace() 方法之外,我还向你展示了如何使用 String.prototype.replaceAll() 方法—— String.prototype.replace() 方法的混合体。

你应该小心使用 String.prototype.replaceAll() 方法,因为某些浏览器尚不支持它。除了使用 replaceAll(),我还向你展示了如何通过使用正则表达式搜索特定字符串中的所有值来实现相同的功能。