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

跟着 MDN 学JavaScript day_9字符串方法实战挑战与解题思路前言在学习了字符串的基础操作和常用方法之后真正的考验来自于实践。MDN 提供的三个实战挑战分别涉及子字符串检测、大小写规范化与首字母大写、以及从复杂字符串中提取和重组信息。这些挑战模拟了实际开发中常见的文本处理需求通过解决这些问题可以加深对字符串方法的理解并培养将理论知识应用于实际场景的能力。本文将详细分析每个挑战的解题思路并提供完整的代码实现。挑战一过滤圣诞留言问题背景分析第一个挑战给出了一个包含多条问候留言的数组其中包括生日祝福、圣诞祝福、康复祝福等不同类型的留言。任务是从这些留言中筛选出仅包含圣诞相关内容的留言并将它们显示在列表中。这个问题的核心在于如何判断一条留言是否属于圣诞主题。观察给定的留言数组可以看到圣诞相关的留言都包含了圣诞这个关键词。因此解题的关键是检查每个字符串中是否包含圣诞这个子字符串。includes方法的应用场景在这个挑战中includes方法是最合适的选择。该方法返回布尔值可以直接放在if语句的条件表达式中。与indexOf方法相比includes的语义更加清晰代码可读性更高。当使用includes方法时需要注意它是区分大小写的。不过在这个例子中所有留言都是中文不存在大小写问题因此可以直接使用。如果涉及英文内容可能需要先转换为统一的大小写形式。条件判断的实现方式在for循环中每次迭代都会将当前留言赋值给greeting变量。我们需要修改if语句中的条件将原本的greeting替换为greeting.includes(圣诞)。只有当这个表达式返回true时当前的留言才会被添加到列表中。不需要修改循环中的其他代码也不需要添加else分支因为我们只关心符合条件的留言不符合条件的留言应该被忽略。参考代码实现constlistdocument.querySelector(ul);constgreetings[生日快乐,亲爱的圣诞快乐,愿家家户户都能过一个愉快的圣诞,这个圣诞我想要的只有你,祝早日康复,];for(constgreetingofgreetings){if(greeting.includes(圣诞)){constlistItemdocument.createElement(li);listItem.textContentgreeting;list.appendChild(listItem);}}解题思路总结这个挑战虽然简单但体现了字符串方法在实际应用中的基本模式。当需要对文本数据进行过滤时includes方法提供了一种直观的解决方案。关键在于准确识别用于判断的关键词或模式。挑战二更正城市名称的大小写问题背景分析第二个挑战给出了一个包含英国城市名称的数组这些名称的大小写格式混乱有的全小写有的全大写有的混合大小写。任务是将每个城市名称转换为标准格式全小写但首字母大写。这是一个典型的文本格式化问题在实际开发中经常遇到。例如用户提交的姓名、地址等信息可能大小写不一致需要在存储前进行规范化处理。转换策略的设计题目已经给出了清晰的解决步骤。首先将整个字符串转换为小写这样可以消除所有大小写差异。然后提取第一个字符将其转换为大写。最后将大写后的首字母与剩余部分拼接起来。这种分步处理的方式值得学习。当面对复杂问题时将其分解为多个简单的子问题可以降低解决难度也便于调试和验证每个步骤的正确性。toLowerCase与toUpperCase的组合使用toLowerCase方法将整个字符串转换为小写确保除了首字母之外的所有字符都是小写形式。但是转换后首字母也变成了小写这不符合要求因此需要将首字母单独处理。提取首字母可以使用方括号表示法或者slice方法。cityLower[0]获取第一个字符然后使用toUpperCase将其转换为大写。剩余部分可以使用slice方法从索引 1 开始提取。最后使用模板字面量或加号将两个部分拼接起来。字符串方法的链式调用在这个解题过程中可以注意到在cityLower变量上先使用了slice方法提取子串但这个子串本身也是一个字符串所以可以直接在上一个方法返回的结果上调用toUpperCase方法形成方法链。方法链是一种常见的编程风格可以使代码更加紧凑。但需要注意链式调用要求前一个方法的返回值是一个对象或值而该对象或值又具有下一个方法。如果链中的某个方法返回了不合适的类型链式调用就会失败。参考代码实现constlistdocument.querySelector(ul);constcities[lonDon,ManCHESTer,BiRmiNGHAM,liVERpoOL];for(constcityofcities){constlowerCitycity.toLowerCase();constfirstLetterlowerCity[0].toUpperCase();constrestOfNamelowerCity.slice(1);constresultfirstLetterrestOfName;constlistItemdocument.createElement(li);listItem.textContentresult;list.appendChild(listItem);}备选实现方式如果使用方法链可以将代码进一步简化为一行。但需要注意可读性过于简化的代码可能不利于后续维护。constresultcity.toLowerCase()[0].toUpperCase()city.toLowerCase().slice(1);这种写法虽然简洁但调用了两次toLowerCase方法效率略低。更好的做法是先转换小写并存储在变量中然后复用这个变量。解题思路总结这个挑战展示了如何组合使用多个字符串方法完成复杂的格式化任务。核心思路是先统一格式再调整细节这种模式在文本规范化处理中非常常见。挑战三从混合字符串中提取信息问题背景分析第三个挑战是最复杂的给出了一个包含火车站信息的字符串数组。每个字符串的格式是固定的开头的三个字母是车站代码之后是一串机器可读的随机数据然后是分号分隔符最后是人类可读的车站名称。任务是从每个字符串中提取车站代码和车站名称重新格式化为代码: 名称的形式。这种从结构化字符串中提取信息的任务在实际开发中非常常见。例如解析日志文件、处理 CSV 数据、提取 API 响应中的特定字段等都需要类似的字符串解析技巧。提取车站代码车站代码位于字符串的最开始固定为三个字母。因此提取车站代码最简单的方法是使用slice方法从索引 0 开始提取到索引 3 结束。slice(0, 3)会返回前三个字符这正是需要的车站代码。定位分号的位置在提取车站名称之前需要知道分号所在的位置。分号是车站代码数据和车站名称之间的分隔符。使用indexOf方法可以找到分号在字符串中的索引位置。由于分号是唯一的不需要处理多次出现的情况。需要注意的是分号本身的索引不应该包含在车站名称中因为车站名称是从分号后面开始的。所以提取车站名称时应该从分号索引加 1 的位置开始。提取车站名称找到分号位置后可以使用slice方法从分号索引加 1 的位置开始提取到字符串末尾。由于不需要指定结束位置可以只提供一个起始参数。这样会返回从该位置开始到字符串结束的所有字符。需要注意的是车站名称前面可能没有空格提取后可能需要使用trim方法去除首尾空白。在这个例子中分号后面直接跟着车站名称没有多余空格因此不需要额外处理。字符串拼接与格式化最后一步是将提取出的车站代码和车站名称按照要求的格式拼接起来。使用模板字面量是最清晰的方式格式为${code}: ${name}。中间的冒号和空格需要严格按照示例格式添加。参考代码实现constlistdocument.querySelector(ul);conststations[MAN675847583748sjt567654;Manchester Piccadilly,GNF576746573fhdg4737dh4;Greenfield,LIV5hg65hd737456236dch46dg4;Liverpool Lime Street,SYB4f65hf75f736463;Stalybridge,HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield,];for(conststationofstations){constcodestation.slice(0,3);constsemicolonIndexstation.indexOf(;);constnamestation.slice(semicolonIndex1);constresult${code}:${name};constlistItemdocument.createElement(li);listItem.textContentresult;list.appendChild(listItem);}边界情况处理在实际应用中还需要考虑一些边界情况。例如如果字符串中没有分号indexOf会返回-1此时semicolonIndex 1等于0slice(0)会返回整个字符串这可能不是期望的结果。在这个挑战中输入数据是可信的每个字符串都包含分号因此不需要额外的错误处理。另外如果车站代码的长度可能变化使用固定位置提取的方法就不适用了需要采用其他策略比如通过正则表达式匹配。备选实现方式也可以使用split方法将字符串按分号分割成数组。split方法返回一个数组第一个元素是分号前的部分第二个元素是分号后的部分。然后从第一部分中提取前三个字符作为车站代码。constpartsstation.split(;);constcodeparts[0].slice(0,3);constnameparts[1];constresult${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 学习中至关重要在实际的前端开发工作中也将会频繁使用。掌握字符串方法就是掌握了与用户输入、数据显示、文本解析等场景打交道的基本工具。