ARTICLE DETAIL

资讯详情

深耕商务建站与企业官网运营的一线实战洞察。

freeCodeCamp JavaScript 入门精讲:用 String.length 统计字符串长度(Find the Length of a String 挑战拆解)

freeCodeCamp JavaScript 入门精讲:用 String.length 统计字符串长度(Find the Length of a String 挑战拆解) freeCodeCamp JavaScript 入门精讲用 String.length 统计字符串长度Find the Length of a String 挑战拆解【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇围绕 freeCodeCamp 开源课程 Basic JavaScript 课程块中的一课——Find the Length of a String展开先讲透 JavaScript 字符串长度属性.length的语法与计数规则再逐段拆解这个挑战文件Markdown 格式的 frontmatter、描述、测试断言、种子代码与参考答案让你既掌握语言知识点也读懂 freeCodeCamp 挑战题目challenge的仓库存储与自动校验机制。1. 这一课讲什么、放在哪里Find the Length of a String是 freeCodeCamp 的 JavaScript 基础课程basic-javascriptblock中的一课用于教会初学者读取字符串的长度。挑战的元数据定义在块结构中位于 curriculum/structure/blocks/basic-javascript.json 的challengeOrder列表里它的前后两课分别是Appending Variables to Strings56533eb9ac21ba0edf2244ed和Use Bracket Notation to Find the First Character in a Stringbd7123c9c549eddfaeb5bdef。从排序可以看出课程设计意图先掌握字符串的声明、拼接再学习以.length获得长度随后紧接若干课使用下标方括号配合.length定位单个字符由整串过渡到单个字符。该块在仓库中的helpCategory被标记为JavaScript见块 JSON 顶部而挑战正文本体存储在课程英文源文件中curriculum/challenges/english/blocks/basic-javascript/bd7123c9c448eddfaeb5bdef.md。2. 核心知识点在字符串变量或字符串字面量后写.length2.1 语法与返回值在 JavaScript 中统计一个字符串包含多少个字符只需要在字符串变量或字符串字面量后面写.lengthconsole.log(Alan Peter.length);控制台会输出数字10。这里揭示了两个要点.length是一个属性property无需调用括号它的返回值是数字number类型可以直接参与运算、比较或赋值。2.2 空格也计入长度原文档特别强调Alan 与 Peter 之间的那个空格同样被统计在内因此Alan Peter的长度是10而非9。这是初学者最常踩的误区之一——在视觉上一个空格看起来不算字但在字符串内部它是实实在在的一个字符code point其 Unicode 码点是U0020。同理Ada 这类不含空格的字符串const firstName Ada; console.log(firstName.length); // 3文档中给出的示例是若声明const firstName Ada则可用firstName.length得知字符串Ada的长度。2.3 为什么它能写在原始值上字符串属于 JavaScript 的基本数据类型primitive本身并不是对象。但从源码与语言语义看当你对字符串字面量或变量访问属性如.length时引擎会把它临时包装为String对象从而暴露该属性——因此在两种写法下.length都可用hello.length; // 字符串字面量直接跟 .length → 5 const msg hi; // 赋值给变量后再访问 msg.length; // 23. 任务指令instructions解读--instructions--一节给出唯一要完成的任务Use the.lengthproperty to setlastNameLengthto the number of characters inlastName.即不修改变量声明把lastNameLength赋值为lastName中字符的个数。本课中的lastName固定为字符串Lovelace——它有8个字符L-o-v-e-l-a-c-e因此最终lastNameLength 8。4. 种子代码seed与参考答案4.1 初始代码挑战的起始状态原文档 的--seed-- / --seed-contents--区块如下// Setup let lastNameLength 0; const lastName Lovelace; // Only change code below this line lastNameLength lastName;注意// Setup区段的两行是不允许改动的lastNameLength先用let初始化为0lastName用const固定为字符串学习者的改动只允许发生在// Only change code below this line之后。4.2 参考答案let lastNameLength 0; const lastName Lovelace; lastNameLength lastName.length;把lastName换成lastName.length后右侧求值结果是从8开始的数字赋给lastNameLength即完成任务。这里的赋值方向值得初学者注意等号左侧是目标变量右侧是表达式lastName.length.length返回的字符个数替换掉了原本错误的字符串值。5. 三条测试断言freeCodeCamp 如何判定通过--hints--区块是自动评测的规则集合本课共有三条断言见 原文档逐条拆开可以精确理解判题逻辑断言 1不允许修改// Setup区段的变量声明assert( __helpers.removeJSComments(code).match(/let lastNameLength 0;/) __helpers.removeJSComments(code).match(/const lastName Lovelace;/) );它先用辅助函数__helpers.removeJSComments(code)把解答中的 JS 注释剥离再分别用正则匹配let lastNameLength 0;与const lastName Lovelace;确保这两个初始声明原样保留。先去掉注释再匹配是为了防止学习者把被注释掉的声明滥竽充数。断言 2结果值必须为 8assert(typeof lastNameLength ! undefined lastNameLength 8);这里同时做了两道检查变量必须已定义类型不是undefined且严格等于数字8。严格相等意味着字符串8之类都无法通过。断言 3必须通过.length得出结果禁止硬编码assert(__helpers.removeJSComments(code).match(/\s*lastName\.length/g) !__helpers.removeJSComments(code).match(/lastName\s*\s*8/));正则\s*lastName\.length要求代码中出现 lastName.length这样的赋值形态同时反向匹配lastName\s*\s*8予以否定杜绝把lastName直接改成数字8的作弊式硬编码。这正体现了挑战的教学目标——让学习者真正调用.length属性而不是背答案。结合前文对basic-javascript块的课程排序本课之后紧接着Use Bracket Notation to Find the First Character等课程来看这一课的.length用法是为后续用下标访问单个字符、用length - 1取最后一个字符打基础的。6. 挑战文件的 frontmatter题目是如何被仓库解析的每个挑战 markdown 顶部都有以---包裹的 YAML frontmatter用于唯一标识与分类。本课的字段如下字段值说明idbd7123c9c448eddfaeb5bdef全仓库唯一的挑战 ID也是文件名不带.mdtitleFind the Length of a String面向学习者显示的标题challengeType1挑战类型编号1对应JavaScriptforumTopicId18182关联的论坛讨论主题编号dashedNamefind-the-length-of-a-stringURL 友好的连字符形式名称这些字段在仓库里都有真实的校验逻辑作支撑例如 curriculum/schema/challenge-schema.js 中规定challengeType是取值0到33的必填数字、dashedName必须匹配 slug 正则challengeType: 1的数字含义定义在共享配置 packages/shared/src/config/challenge-types.ts其中const js 1;并在导出对象中作为challengeTypes.js使用。也就是说本课在评测与渲染体系中被归入 JavaScript 类型的代码挑战。7. 文档各区块section在仓库约定中的含义沿用 freeCodeCamp 挑战文件约定本课 markdown 包含以下用# --xxx--标记命名的区块各区块职责清晰--description--面向学习者的概念讲解与示例本课介绍了.length的两种用法并给出Alan Peter.length输出10的例子--instructions--具体要完成的编码任务--hints--评测用的assert规则见上文第 5 节--seed-- / --seed-contents--编辑器预置的起始代码见上文第 4.1 节--solutions--参考答案供学习者查看解答时使用。8. 同一课程块里的延伸从长度到第几个字符理解了.length之后同属basic-javascript块的后续课程会引导你把它与下标结合起来。例如以 Lovelace长度 8为例取第一个字符下标从0开始lastName[0]得到L对应挑战 bd7123c9c549eddfaeb5bdef.md取最后一个字符最后一个字符的下标是length - 1即lastName[lastName.length - 1]得到e。由于长度8、首字符下标0最后一个字符下标必然是7这正对应Use Bracket Notation to Find the Last Character in a String一课bd7123c9c451eddfaeb5bdef.md所演示的firstName[firstName.length - 1]写法取任意第 N 个字符同样借助0起始的下标定位任意位置bd7123c9c450eddfaeb5bdef.md。可见.length是字符串下标导航的基础设施——先知道整体有多长才能知道边界在哪里。9. 易错点与自测建议结合本课内容与实际评测规则练习时建议自查以下几点把空格当字符 、标点等都算一个字符别凭肉眼数不要把.length写在错误对象上如lastNameLength.length是把数字当字符串结果会是undefined数字没有length属性区分属性访问与赋值本课要求的是赋值语句lastNameLength lastName.length;若写成lastName lastName.length会同时违反不改动 Setup 声明的约束自测边界情况空字符串.length为0单个字符a.length为1带空格的Alan Peter.length为10。想在本仓库中继续研究可对照阅读挑战源文件 bd7123c9c448eddfaeb5bdef.md、块的完整题目排序 curriculum/structure/blocks/basic-javascript.json、frontmatter 与区块的 schema 校验规则 curriculum/schema/challenge-schema.js以及挑战类型常量定义 packages/shared/src/config/challenge-types.ts从而把一个字符串知识点还原到课程内容如何被组织、校验与评测的完整链路中。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表
PREV
查看更多资讯
NEXT
返回资讯列表