跟着 MDN 学JavaScript day_9：字符串方法实战挑战与解题思路

前言

在学习了字符串的基础操作和常用方法之后，真正的考验来自于实践。MDN 提供的三个实战挑战分别涉及子字符串检测、大小写规范化与首字母大写、以及从复杂字符串中提取和重组信息。这些挑战模拟了实际开发中常见的文本处理需求，通过解决这些问题，可以加深对字符串方法的理解，并培养将理论知识应用于实际场景的能力。本文将详细分析每个挑战的解题思路，并提供完整的代码实现。

挑战一：过滤圣诞留言

问题背景分析

第一个挑战给出了一个包含多条问候留言的数组，其中包括生日祝福、圣诞祝福、康复祝福等不同类型的留言。任务是从这些留言中筛选出仅包含圣诞相关内容的留言，并将它们显示在列表中。

这个问题的核心在于如何判断一条留言是否属于圣诞主题。观察给定的留言数组，可以看到圣诞相关的留言都包含了"圣诞"这个关键词。因此，解题的关键是检查每个字符串中是否包含"圣诞"这个子字符串。

`includes` 方法的应用场景

在这个挑战中，includes 方法是最合适的选择。该方法返回布尔值，可以直接放在 if 语句的条件表达式中。与 indexOf 方法相比，includes 的语义更加清晰，代码可读性更高。

当使用 includes 方法时，需要注意它是区分大小写的。不过在这个例子中，所有留言都是中文，不存在大小写问题，因此可以直接使用。如果涉及英文内容，可能需要先转换为统一的大小写形式。

条件判断的实现方式

在 for 循环中，每次迭代都会将当前留言赋值给 greeting 变量。我们需要修改 if 语句中的条件，将原本的 greeting 替换为 greeting.includes("圣诞")。只有当这个表达式返回 true 时，当前的留言才会被添加到列表中。

不需要修改循环中的其他代码，也不需要添加 else 分支，因为我们只关心符合条件的留言，不符合条件的留言应该被忽略。

参考代码实现

javascript 复制代码

const list = document.querySelector("ul");
const greetings = [
  "生日快乐！",
  "亲爱的，圣诞快乐",
  "愿家家户户都能过一个愉快的圣诞",
  "这个圣诞我想要的只有你",
  "祝早日康复",
];

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

解题思路总结

这个挑战虽然简单，但体现了字符串方法在实际应用中的基本模式。当需要对文本数据进行过滤时，includes 方法提供了一种直观的解决方案。关键在于准确识别用于判断的关键词或模式。

挑战二：更正城市名称的大小写

问题背景分析

第二个挑战给出了一个包含英国城市名称的数组，这些名称的大小写格式混乱，有的全小写，有的全大写，有的混合大小写。任务是将每个城市名称转换为标准格式：全小写，但首字母大写。

这是一个典型的文本格式化问题，在实际开发中经常遇到。例如，用户提交的姓名、地址等信息可能大小写不一致，需要在存储前进行规范化处理。

转换策略的设计

题目已经给出了清晰的解决步骤。首先将整个字符串转换为小写，这样可以消除所有大小写差异。然后提取第一个字符，将其转换为大写。最后将大写后的首字母与剩余部分拼接起来。

这种分步处理的方式值得学习。当面对复杂问题时，将其分解为多个简单的子问题，可以降低解决难度，也便于调试和验证每个步骤的正确性。

`toLowerCase` 与 `toUpperCase` 的组合使用

toLowerCase 方法将整个字符串转换为小写，确保除了首字母之外的所有字符都是小写形式。但是转换后首字母也变成了小写，这不符合要求，因此需要将首字母单独处理。

提取首字母可以使用方括号表示法或者 slice 方法。cityLower[0] 获取第一个字符，然后使用 toUpperCase 将其转换为大写。剩余部分可以使用 slice 方法从索引 1 开始提取。最后使用模板字面量或加号将两个部分拼接起来。

字符串方法的链式调用

在这个解题过程中，可以注意到在 cityLower 变量上先使用了 slice 方法提取子串，但这个子串本身也是一个字符串，所以可以直接在上一个方法返回的结果上调用 toUpperCase 方法，形成方法链。

方法链是一种常见的编程风格，可以使代码更加紧凑。但需要注意，链式调用要求前一个方法的返回值是一个对象或值，而该对象或值又具有下一个方法。如果链中的某个方法返回了不合适的类型，链式调用就会失败。

参考代码实现

javascript 复制代码

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

for (const city of cities) {
  const lowerCity = city.toLowerCase();
  const firstLetter = lowerCity[0].toUpperCase();
  const restOfName = lowerCity.slice(1);
  const result = firstLetter + restOfName;

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

备选实现方式

如果使用方法链，可以将代码进一步简化为一行。但需要注意可读性，过于简化的代码可能不利于后续维护。

javascript 复制代码

const result = city.toLowerCase()[0].toUpperCase() + city.toLowerCase().slice(1);

这种写法虽然简洁，但调用了两次 toLowerCase 方法，效率略低。更好的做法是先转换小写并存储在变量中，然后复用这个变量。

解题思路总结

这个挑战展示了如何组合使用多个字符串方法完成复杂的格式化任务。核心思路是先统一格式再调整细节，这种模式在文本规范化处理中非常常见。

挑战三：从混合字符串中提取信息

问题背景分析

第三个挑战是最复杂的，给出了一个包含火车站信息的字符串数组。每个字符串的格式是固定的：开头的三个字母是车站代码，之后是一串机器可读的随机数据，然后是分号分隔符，最后是人类可读的车站名称。任务是从每个字符串中提取车站代码和车站名称，重新格式化为 代码: 名称 的形式。

这种从结构化字符串中提取信息的任务在实际开发中非常常见。例如，解析日志文件、处理 CSV 数据、提取 API 响应中的特定字段等，都需要类似的字符串解析技巧。

提取车站代码

车站代码位于字符串的最开始，固定为三个字母。因此提取车站代码最简单的方法是使用 slice 方法，从索引 0 开始，提取到索引 3 结束。slice(0, 3) 会返回前三个字符，这正是需要的车站代码。

定位分号的位置

在提取车站名称之前，需要知道分号所在的位置。分号是车站代码数据和车站名称之间的分隔符。使用 indexOf 方法可以找到分号在字符串中的索引位置。由于分号是唯一的，不需要处理多次出现的情况。

需要注意的是，分号本身的索引不应该包含在车站名称中，因为车站名称是从分号后面开始的。所以提取车站名称时，应该从分号索引加 1 的位置开始。

提取车站名称

找到分号位置后，可以使用 slice 方法从分号索引加 1 的位置开始提取到字符串末尾。由于不需要指定结束位置，可以只提供一个起始参数。这样会返回从该位置开始到字符串结束的所有字符。

需要注意的是，车站名称前面可能没有空格，提取后可能需要使用 trim 方法去除首尾空白。在这个例子中，分号后面直接跟着车站名称，没有多余空格，因此不需要额外处理。

字符串拼接与格式化

最后一步是将提取出的车站代码和车站名称按照要求的格式拼接起来。使用模板字面量是最清晰的方式，格式为 ${code}: ${name}。中间的冒号和空格需要严格按照示例格式添加。

参考代码实现

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 semicolonIndex = station.indexOf(";");
  const name = station.slice(semicolonIndex + 1);
  const result = `${code}: ${name}`;

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

边界情况处理

在实际应用中，还需要考虑一些边界情况。例如，如果字符串中没有分号，indexOf 会返回 -1，此时 semicolonIndex + 1 等于 0，slice(0) 会返回整个字符串，这可能不是期望的结果。在这个挑战中，输入数据是可信的，每个字符串都包含分号，因此不需要额外的错误处理。

另外，如果车站代码的长度可能变化，使用固定位置提取的方法就不适用了，需要采用其他策略，比如通过正则表达式匹配。

备选实现方式

也可以使用 split 方法将字符串按分号分割成数组。split 方法返回一个数组，第一个元素是分号前的部分，第二个元素是分号后的部分。然后从第一部分中提取前三个字符作为车站代码。

javascript 复制代码

const parts = station.split(";");
const code = parts[0].slice(0, 3);
const name = parts[1];
const result = `${code}: ${name}`;

这种方法的优势是代码更加直观，但需要理解数组的概念。对于初学者来说，使用 indexOf 和 slice 的组合更加基础。

解题思路总结

这个挑战综合运用了 slice、indexOf 等字符串方法，展示了如何从非结构化的文本中提取结构化信息。核心思路是找到关键的定位点（分号），然后基于这个定位点进行范围提取。这种方法在处理格式化文本时非常实用。

三个挑战的共性与差异

共同涉及的字符串方法

三个挑战都使用了字符串相关的核心方法。第一个挑战使用了 includes 进行条件判断，第二个挑战使用了 toLowerCase、toUpperCase 和 slice 进行格式化，第三个挑战使用了 slice 和 indexOf 进行信息提取。

这些方法都是字符串操作中最常用、最基础的技能。掌握了这些方法，就能够处理大部分日常的文本操作需求。

解决问题的思维方式

三个挑战体现了不同层次的思维模式：

挑战	核心技能	思维模式
挑战一	`includes`	模式匹配------判断存在性
挑战二	`toLowerCase` / `toUpperCase` / `slice`	结构理解------对不同部分做不同处理
挑战三	`slice` / `indexOf`	标记定位------识别分隔符后进行信息提取

这种从简单到复杂的递进设计，有助于循序渐进地培养字符串处理能力。

总结

MDN 的三个字符串挑战涵盖了文本过滤 、格式化 和信息提取 三种常见的应用场景。通过解决这些挑战，我们实践了 includes、toLowerCase、toUpperCase、slice、indexOf 等核心字符串方法。同时也学习了将复杂问题分解为简单步骤的思维方式，以及如何组合使用多个方法完成复杂的文本处理任务。

这些技能不仅在 JavaScript 学习中至关重要，在实际的前端开发工作中也将会频繁使用。掌握字符串方法，就是掌握了与用户输入、数据显示、文本解析等场景打交道的基本工具。

跟着 MDN 学JavaScript day_9：字符串方法实战挑战与解题思路