有用的字符串方法

既然我们已经了解了字符串的基础知识，现在让我们更进一步，开始思考可以使用内置方法对字符串进行哪些有用的操作，例如查找文本字符串的长度、连接和拆分字符串、替换字符串中的一个字符，以及更多。

预备知识	了解 HTML 和 CSS 基础。了解字符串基础。
学习成果	使用 JavaScript 内置的常用属性和方法进行字符串操作。

作为对象的字符串

在 JavaScript 中，大多数值都可以像对象一样使用。例如，当你创建一个字符串时，通过

const string = "This is my string";

尽管变量本身不是一个对象，但它仍然有大量的属性和方法可用，因为它在访问属性时可以作为对象使用。你可以在 String 对象页面中查看页面侧面的列表，就能看到这一点！

现在，在你开始头疼之前，别担心！在你学习之旅的早期，你真的不需要了解其中的大多数。但有一些你可能会经常使用的，我们将在本文中介绍。

让我们在浏览器开发者控制台中输入一些示例。

查找字符串的长度

这很容易——你使用 length 属性。尝试输入以下行

const browserType = "mozilla";
browserType.length;

这应该返回数字 7，因为 "mozilla" 有 7 个字符长。这在很多方面都很有用；例如，你可能想查找一系列名称的长度，以便按长度顺序显示它们，或者让用户知道他们在表单字段中输入的用户名过长，如果它超过了某个长度。

检索特定字符串字符

另外，你可以使用方括号表示法返回字符串中的任何字符——这意味着你在变量名末尾包含方括号（[]）。在方括号内，你包含要返回的字符的数字，例如，要检索第一个字母，你会这样做

browserType[0];

记住：计算机从 0 开始计数，而不是 1！

要检索任何字符串的最后一个字符，我们可以使用以下行，将此技术与我们上面介绍的 length 属性结合起来

browserType[browserType.length - 1];

字符串 "mozilla" 的长度是 7，但由于计数从 0 开始，最后一个字符的位置是 6；使用 length-1 可以得到最后一个字符。

测试字符串是否包含子字符串

有时你会想查找一个较小的字符串是否存在于一个较大的字符串中（我们通常说一个子字符串是否存在于一个字符串中）。这可以使用 includes() 方法来完成，它接受一个参数 —— 你要搜索的子字符串。

如果字符串包含该子字符串，它返回 true，否则返回 false。

const browserType = "mozilla";

if (browserType.includes("zilla")) {
  console.log("Found zilla!");
} else {
  console.log("No zilla here!");
}

通常你会想知道一个字符串是否以特定的子字符串开头或结尾。这是一个足够常见的需求，因此有两个特殊的方法可以做到这一点：startsWith() 和 endsWith()

const browserType = "mozilla";

if (browserType.startsWith("zilla")) {
  console.log("Found zilla!");
} else {
  console.log("No zilla here!");
}

const browserType = "mozilla";

if (browserType.endsWith("zilla")) {
  console.log("Found zilla!");
} else {
  console.log("No zilla here!");
}

查找子字符串在字符串中的位置

你可以使用 indexOf() 方法查找子字符串在较大字符串中的位置。此方法接受两个参数 – 你要搜索的子字符串，以及一个可选参数，用于指定搜索的起始点。

如果字符串包含该子字符串，indexOf() 返回该子字符串第一次出现的索引。如果字符串不包含该子字符串，indexOf() 返回 -1。

const tagline = "MDN - Resources for developers, by developers";
console.log(tagline.indexOf("developers")); // 20

从 0 开始，如果你从字符串的开头计算字符数（包括空格），子字符串 "developers" 的第一次出现是在索引 20 处。

console.log(tagline.indexOf("x")); // -1

另一方面，这会返回 -1，因为字符 x 不存在于字符串中。

既然你已经知道如何查找子字符串的第一次出现，那么如何查找后续出现呢？你可以通过将大于上一次出现的索引值作为第二个参数传递给该方法来实现。

const firstOccurrence = tagline.indexOf("developers");
const secondOccurrence = tagline.indexOf("developers", firstOccurrence + 1);

console.log(firstOccurrence); // 20
console.log(secondOccurrence); // 35

在这里，我们告诉该方法从索引 21 (firstOccurrence + 1) 开始搜索子字符串 "developers"，它返回索引 35。

从字符串中提取子字符串

你可以使用 slice() 方法从字符串中提取子字符串。你需要传递

开始提取的索引
停止提取的索引。这是排他性的，意味着该索引处的字符不包含在提取的子字符串中。

例如

const browserType = "mozilla";
console.log(browserType.slice(1, 4)); // "ozi"

索引 1 处的字符是 "o"，索引 4 处的字符是 "l"。因此我们提取从 "o" 开始到 "l" 之前结束的所有字符，得到 "ozi"。

如果你知道要提取字符串中某个字符之后的所有剩余字符，则不必包含第二个参数。相反，你只需包含要从字符串中提取剩余字符的起始字符位置。尝试以下操作

browserType.slice(2); // "zilla"

这会返回 "zilla" —— 这是因为字符位置 2 是字母 "z"，并且因为你没有包含第二个参数，所以返回的子字符串是字符串中所有剩余的字符。

注意： slice() 还有其他选项；研究 slice() 页面以了解更多信息。

更改大小写

字符串方法 toLowerCase() 和 toUpperCase() 分别将字符串中的所有字符转换为小写或大写。这可能很有用，例如，如果你想在将所有用户输入的数据存储到数据库之前进行规范化。

我们来尝试输入以下几行，看看会发生什么

const radData = "My NaMe Is MuD";
console.log(radData.toLowerCase());
console.log(radData.toUpperCase());

更新字符串的部分内容

你可以使用 replace() 方法将字符串中的一个子字符串替换为另一个子字符串。

在这个例子中，我们提供了两个参数——我们想要替换的字符串，以及我们想要替换它的字符串

const browserType = "mozilla";
const updated = browserType.replace("moz", "van");

console.log(updated); // "vanilla"
console.log(browserType); // "mozilla"

请注意，replace() 与许多字符串方法一样，不会改变被调用的字符串本身，而是返回一个新字符串。如果你想更新原始的 browserType 变量，你必须这样做

let browserType = "mozilla";
browserType = browserType.replace("moz", "van");

console.log(browserType); // "vanilla"

另请注意，我们现在必须使用 let 而不是 const 声明 browserType，因为我们正在重新赋值。

请注意，这种形式的 replace() 只更改子字符串的第一次出现。如果你想更改所有出现，你可以使用 replaceAll()

let quote = "To be or not to be";
quote = quote.replaceAll("be", "code");

console.log(quote); // "To code or not to code"

学习挑战

在本节中，我们将让你尝试编写一些字符串操作代码。在下面的每个练习中，我们都有一个字符串数组，以及一个循环，用于处理数组中的每个值并将其显示在项目符号列表中。你现在不需要理解数组或循环——这些将在未来的文章中解释。你只需在每种情况下编写代码，使其以我们想要的格式输出字符串。

使用实时示例顶部的 “播放” 按钮在 MDN Playground 中打开每个示例，然后按照说明解决问题。如果你遇到困难，可以在每个实时示例下方查看解决方案。

如果在 MDN Playground 中出错且无法重新运行代码，可以使用“重置”按钮重置代码。

过滤问候语消息

在第一个练习中，我们将从简单开始——我们有一个贺卡消息数组，但我们只想筛选出圣诞节消息。我们希望你在 if () 结构中填写一个条件测试，以测试每个字符串，并仅当它是圣诞节消息时才将其打印到列表中。

思考一下你如何测试每条消息是否是圣诞节消息。所有这些消息中都存在哪个字符串，以及你可以使用什么方法来测试它是否存在？

<ul></ul>

const list = document.querySelector("ul");
const greetings = [
  "Happy Birthday!",
  "Merry Christmas my love",
  "A happy Christmas to all the family",
  "You're all I want for Christmas",
  "Get well soon",
];

for (const greeting of greetings) {
  // Your conditional test needs to go inside the parentheses
  // in the line below, replacing what's currently there
  if (greeting) {
    const listItem = document.createElement("li");
    listItem.textContent = greeting;
    list.appendChild(listItem);
  }
}

点击此处显示解决方案

你完成的 JavaScript 应该如下所示

const list = document.querySelector("ul");
const greetings = [
  "Happy Birthday!",
  "Merry Christmas my love",
  "A happy Christmas to all the family",
  "You're all I want for Christmas",
  "Get well soon",
];

for (const greeting of greetings) {
  if (greeting.includes("Christmas")) {
    const listItem = document.createElement("li");
    listItem.textContent = greeting;
    list.appendChild(listItem);
  }
}

修复大小写

此练习展示了英国城市名称，但大小写混乱。我们希望你将其更改为全部小写，除了首字母大写。一个好的方法是

将 city 变量中包含的整个字符串转换为小写并将其存储在新变量中。
获取此新变量中字符串的第一个字母并将其存储在另一个变量中。
使用这个最新变量作为子字符串，将小写字符串的第一个字母替换为已更改为大写的小写字符串的第一个字母。将此替换过程的结果存储在另一个新变量中。
将 result 变量的值更改为等于最终结果，而不是 city。

注意： 一个提示 — 字符串方法的参数不必是字符串字面量；它们也可以是变量，甚至是调用了方法的变量。

<ul></ul>

const list = document.querySelector("ul");
const cities = ["lonDon", "ManCHESTer", "BiRmiNGHAM", "liVERpoOL"];

for (const city of cities) {
  // write your code just below here

  const result = city;
  const listItem = document.createElement("li");
  listItem.textContent = result;
  list.appendChild(listItem);
}

点击此处显示解决方案

你完成的 JavaScript 应该如下所示

const list = document.querySelector("ul");
const cities = ["lonDon", "ManCHESTer", "BiRmiNGHAM", "liVERpoOL"];

for (const city of cities) {
  const lower = city.toLowerCase();
  const firstLetter = lower.slice(0, 1);
  const capitalized = lower.replace(firstLetter, firstLetter.toUpperCase());
  const result = capitalized;
  const listItem = document.createElement("li");
  listItem.textContent = result;
  list.appendChild(listItem);
}

从旧部件制作新字符串

在最后一个练习中，数组包含有关英格兰北部火车站信息的字符串。这些字符串是数据项，包含三字母的车站代码，后跟一些机器可读数据，后跟一个分号，最后是人类可读的车站名称。例如

MAN675847583748sjt567654;Manchester Piccadilly

我们希望提取车站代码和名称，并将它们组合成具有以下结构的字符串

MAN: Manchester Piccadilly

我们建议这样做：

提取三字母的车站代码并将其存储在一个新变量中。
找到分号的字符索引号。
使用分号的字符索引号作为参考点，提取人类可读的车站名称，并将其存储在一个新变量中。
连接这两个新变量和一个字符串字面量以创建最终字符串。
将 result 变量的值更改为最终字符串，而不是 station。

<ul></ul>

const list = document.querySelector("ul");
const stations = [
  "MAN675847583748sjt567654;Manchester Piccadilly",
  "GNF576746573fhdg4737dh4;Greenfield",
  "LIV5hg65hd737456236dch46dg4;Liverpool Lime Street",
  "SYB4f65hf75f736463;Stalybridge",
  "HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield",
];

for (const station of stations) {
  // write your code just below here

  const result = station;
  const listItem = document.createElement("li");
  listItem.textContent = result;
  list.appendChild(listItem);
}

点击此处显示解决方案

你完成的 JavaScript 应该如下所示

const list = document.querySelector("ul");
const stations = [
  "MAN675847583748sjt567654;Manchester Piccadilly",
  "GNF576746573fhdg4737dh4;Greenfield",
  "LIV5hg65hd737456236dch46dg4;Liverpool Lime Street",
  "SYB4f65hf75f736463;Stalybridge",
  "HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield",
];

for (const station of stations) {
  const code = station.slice(0, 3);
  const semiColon = station.indexOf(";");
  const name = station.slice(semiColon + 1);
  const result = `${code}: ${name}`;
  const listItem = document.createElement("li");
  listItem.textContent = result;
  list.appendChild(listItem);
}

总结

你无法回避这样一个事实：在编程中处理单词和句子非常重要——尤其是在 JavaScript 中，因为网站都是关于与人沟通的。本文为你提供了目前需要了解的字符串操作基础知识。随着你将来进入更复杂的主题，这应该对你很有帮助。

在下一篇文章中，我们将为你提供一些测试，你可以用来检查你对我们提供的字符串和字符串方法信息的理解和掌握程度。

帮助改进 MDN

了解如何贡献

此页面上次修改于 2025 年 8 月 18 日，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容问题