精講:用 String.length 統(tǒng)計(jì)字符串長(zhǎng)度(Find the Length of a String 挑戰(zhàn)拆解))
freeCodeCamp JavaScript 入門(mén)精講用 String.length 統(tǒng)計(jì)字符串長(zhǎng)度Find the Length of a String 挑戰(zhàn)拆解【免費(fèi)下載鏈接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本篇圍繞 freeCodeCamp 開(kāi)源課程 Basic JavaScript 課程塊中的一課——Find the Length of a String展開(kāi)先講透 JavaScript 字符串長(zhǎng)度屬性.length的語(yǔ)法與計(jì)數(shù)規(guī)則再逐段拆解這個(gè)挑戰(zhàn)文件Markdown 格式的 frontmatter、描述、測(cè)試斷言、種子代碼與參考答案讓你既掌握語(yǔ)言知識(shí)點(diǎn)也讀懂 freeCodeCamp 挑戰(zhàn)題目challenge的倉(cāng)庫(kù)存儲(chǔ)與自動(dòng)校驗(yàn)機(jī)制。1. 這一課講什么、放在哪里Find the Length of a String是 freeCodeCamp 的 JavaScript 基礎(chǔ)課程basic-javascriptblock中的一課用于教會(huì)初學(xué)者讀取字符串的長(zhǎng)度。挑戰(zhàn)的元數(shù)據(jù)定義在塊結(jié)構(gòu)中位于 curriculum/structure/blocks/basic-javascript.json 的challengeOrder列表里它的前后兩課分別是Appending Variables to Strings56533eb9ac21ba0edf2244ed和Use Bracket Notation to Find the First Character in a Stringbd7123c9c549eddfaeb5bdef。從排序可以看出課程設(shè)計(jì)意圖先掌握字符串的聲明、拼接再學(xué)習(xí)以.length獲得長(zhǎng)度隨后緊接若干課使用下標(biāo)方括號(hào)配合.length定位單個(gè)字符由整串過(guò)渡到單個(gè)字符。該塊在倉(cāng)庫(kù)中的helpCategory被標(biāo)記為JavaScript見(jiàn)塊 JSON 頂部而挑戰(zhàn)正文本體存儲(chǔ)在課程英文源文件中curriculum/challenges/english/blocks/basic-javascript/bd7123c9c448eddfaeb5bdef.md。2. 核心知識(shí)點(diǎn)在字符串變量或字符串字面量后寫(xiě).length2.1 語(yǔ)法與返回值在 JavaScript 中統(tǒng)計(jì)一個(gè)字符串包含多少個(gè)字符只需要在字符串變量或字符串字面量后面寫(xiě).lengthconsole.log(Alan Peter.length);控制臺(tái)會(huì)輸出數(shù)字10。這里揭示了兩個(gè)要點(diǎn).length是一個(gè)屬性property無(wú)需調(diào)用括號(hào)它的返回值是數(shù)字number類型可以直接參與運(yùn)算、比較或賦值。2.2 空格也計(jì)入長(zhǎng)度原文檔特別強(qiáng)調(diào)Alan 與 Peter 之間的那個(gè)空格同樣被統(tǒng)計(jì)在內(nèi)因此Alan Peter的長(zhǎng)度是10而非9。這是初學(xué)者最常踩的誤區(qū)之一——在視覺(jué)上一個(gè)空格看起來(lái)不算字但在字符串內(nèi)部它是實(shí)實(shí)在在的一個(gè)字符code point其 Unicode 碼點(diǎn)是U0020。同理Ada 這類不含空格的字符串const firstName Ada; console.log(firstName.length); // 3文檔中給出的示例是若聲明const firstName Ada則可用firstName.length得知字符串Ada的長(zhǎng)度。2.3 為什么它能寫(xiě)在原始值上字符串屬于 JavaScript 的基本數(shù)據(jù)類型primitive本身并不是對(duì)象。但從源碼與語(yǔ)言語(yǔ)義看當(dāng)你對(duì)字符串字面量或變量訪問(wèn)屬性如.length時(shí)引擎會(huì)把它臨時(shí)包裝為String對(duì)象從而暴露該屬性——因此在兩種寫(xiě)法下.length都可用hello.length; // 字符串字面量直接跟 .length → 5 const msg hi; // 賦值給變量后再訪問(wèn) msg.length; // 23. 任務(wù)指令instructions解讀--instructions--一節(jié)給出唯一要完成的任務(wù)Use the.lengthproperty to setlastNameLengthto the number of characters inlastName.即不修改變量聲明把lastNameLength賦值為lastName中字符的個(gè)數(shù)。本課中的lastName固定為字符串Lovelace——它有8個(gè)字符L-o-v-e-l-a-c-e因此最終lastNameLength 8。4. 種子代碼seed與參考答案4.1 初始代碼挑戰(zhàn)的起始狀態(tài)原文檔 的--seed-- / --seed-contents--區(qū)塊如下// Setup let lastNameLength 0; const lastName Lovelace; // Only change code below this line lastNameLength lastName;注意// Setup區(qū)段的兩行是不允許改動(dòng)的lastNameLength先用let初始化為0lastName用const固定為字符串學(xué)習(xí)者的改動(dòng)只允許發(fā)生在// Only change code below this line之后。4.2 參考答案let lastNameLength 0; const lastName Lovelace; lastNameLength lastName.length;把lastName換成lastName.length后右側(cè)求值結(jié)果是從8開(kāi)始的數(shù)字賦給lastNameLength即完成任務(wù)。這里的賦值方向值得初學(xué)者注意等號(hào)左側(cè)是目標(biāo)變量右側(cè)是表達(dá)式lastName.length.length返回的字符個(gè)數(shù)替換掉了原本錯(cuò)誤的字符串值。5. 三條測(cè)試斷言freeCodeCamp 如何判定通過(guò)--hints--區(qū)塊是自動(dòng)評(píng)測(cè)的規(guī)則集合本課共有三條斷言見(jiàn) 原文檔逐條拆開(kāi)可以精確理解判題邏輯斷言 1不允許修改// Setup區(qū)段的變量聲明assert( __helpers.removeJSComments(code).match(/let lastNameLength 0;/) __helpers.removeJSComments(code).match(/const lastName Lovelace;/) );它先用輔助函數(shù)__helpers.removeJSComments(code)把解答中的 JS 注釋剝離再分別用正則匹配let lastNameLength 0;與const lastName Lovelace;確保這兩個(gè)初始聲明原樣保留。先去掉注釋再匹配是為了防止學(xué)習(xí)者把被注釋掉的聲明濫竽充數(shù)。斷言 2結(jié)果值必須為 8assert(typeof lastNameLength ! undefined lastNameLength 8);這里同時(shí)做了兩道檢查變量必須已定義類型不是undefined且嚴(yán)格等于數(shù)字8。嚴(yán)格相等意味著字符串8之類都無(wú)法通過(guò)。斷言 3必須通過(guò).length得出結(jié)果禁止硬編碼assert(__helpers.removeJSComments(code).match(/\s*lastName\.length/g) !__helpers.removeJSComments(code).match(/lastName\s*\s*8/));正則\s*lastName\.length要求代碼中出現(xiàn) lastName.length這樣的賦值形態(tài)同時(shí)反向匹配lastName\s*\s*8予以否定杜絕把lastName直接改成數(shù)字8的作弊式硬編碼。這正體現(xiàn)了挑戰(zhàn)的教學(xué)目標(biāo)——讓學(xué)習(xí)者真正調(diào)用.length屬性而不是背答案。結(jié)合前文對(duì)basic-javascript塊的課程排序本課之后緊接著Use Bracket Notation to Find the First Character等課程來(lái)看這一課的.length用法是為后續(xù)用下標(biāo)訪問(wèn)單個(gè)字符、用length - 1取最后一個(gè)字符打基礎(chǔ)的。6. 挑戰(zhàn)文件的 frontmatter題目是如何被倉(cāng)庫(kù)解析的每個(gè)挑戰(zhàn) markdown 頂部都有以---包裹的 YAML frontmatter用于唯一標(biāo)識(shí)與分類。本課的字段如下字段值說(shuō)明idbd7123c9c448eddfaeb5bdef全倉(cāng)庫(kù)唯一的挑戰(zhàn) ID也是文件名不帶.mdtitleFind the Length of a String面向?qū)W習(xí)者顯示的標(biāo)題challengeType1挑戰(zhàn)類型編號(hào)1對(duì)應(yīng)JavaScriptforumTopicId18182關(guān)聯(lián)的論壇討論主題編號(hào)dashedNamefind-the-length-of-a-stringURL 友好的連字符形式名稱這些字段在倉(cāng)庫(kù)里都有真實(shí)的校驗(yàn)邏輯作支撐例如 curriculum/schema/challenge-schema.js 中規(guī)定challengeType是取值0到33的必填數(shù)字、dashedName必須匹配 slug 正則challengeType: 1的數(shù)字含義定義在共享配置 packages/shared/src/config/challenge-types.ts其中const js 1;并在導(dǎo)出對(duì)象中作為challengeTypes.js使用。也就是說(shuō)本課在評(píng)測(cè)與渲染體系中被歸入 JavaScript 類型的代碼挑戰(zhàn)。7. 文檔各區(qū)塊section在倉(cāng)庫(kù)約定中的含義沿用 freeCodeCamp 挑戰(zhàn)文件約定本課 markdown 包含以下用# --xxx--標(biāo)記命名的區(qū)塊各區(qū)塊職責(zé)清晰--description--面向?qū)W習(xí)者的概念講解與示例本課介紹了.length的兩種用法并給出Alan Peter.length輸出10的例子--instructions--具體要完成的編碼任務(wù)--hints--評(píng)測(cè)用的assert規(guī)則見(jiàn)上文第 5 節(jié)--seed-- / --seed-contents--編輯器預(yù)置的起始代碼見(jiàn)上文第 4.1 節(jié)--solutions--參考答案供學(xué)習(xí)者查看解答時(shí)使用。8. 同一課程塊里的延伸從長(zhǎng)度到第幾個(gè)字符理解了.length之后同屬basic-javascript塊的后續(xù)課程會(huì)引導(dǎo)你把它與下標(biāo)結(jié)合起來(lái)。例如以 Lovelace長(zhǎng)度 8為例取第一個(gè)字符下標(biāo)從0開(kāi)始lastName[0]得到L對(duì)應(yīng)挑戰(zhàn) bd7123c9c549eddfaeb5bdef.md取最后一個(gè)字符最后一個(gè)字符的下標(biāo)是length - 1即lastName[lastName.length - 1]得到e。由于長(zhǎng)度8、首字符下標(biāo)0最后一個(gè)字符下標(biāo)必然是7這正對(duì)應(yīng)Use Bracket Notation to Find the Last Character in a String一課bd7123c9c451eddfaeb5bdef.md所演示的firstName[firstName.length - 1]寫(xiě)法取任意第 N 個(gè)字符同樣借助0起始的下標(biāo)定位任意位置bd7123c9c450eddfaeb5bdef.md??梢?jiàn).length是字符串下標(biāo)導(dǎo)航的基礎(chǔ)設(shè)施——先知道整體有多長(zhǎng)才能知道邊界在哪里。9. 易錯(cuò)點(diǎn)與自測(cè)建議結(jié)合本課內(nèi)容與實(shí)際評(píng)測(cè)規(guī)則練習(xí)時(shí)建議自查以下幾點(diǎn)把空格當(dāng)字符 、標(biāo)點(diǎn)等都算一個(gè)字符別憑肉眼數(shù)不要把.length寫(xiě)在錯(cuò)誤對(duì)象上如lastNameLength.length是把數(shù)字當(dāng)字符串結(jié)果會(huì)是undefined數(shù)字沒(méi)有l(wèi)ength屬性區(qū)分屬性訪問(wèn)與賦值本課要求的是賦值語(yǔ)句lastNameLength lastName.length;若寫(xiě)成lastName lastName.length會(huì)同時(shí)違反不改動(dòng) Setup 聲明的約束自測(cè)邊界情況空字符串.length為0單個(gè)字符a.length為1帶空格的Alan Peter.length為10。想在本倉(cāng)庫(kù)中繼續(xù)研究可對(duì)照閱讀挑戰(zhàn)源文件 bd7123c9c448eddfaeb5bdef.md、塊的完整題目排序 curriculum/structure/blocks/basic-javascript.json、frontmatter 與區(qū)塊的 schema 校驗(yàn)規(guī)則 curriculum/schema/challenge-schema.js以及挑戰(zhàn)類型常量定義 packages/shared/src/config/challenge-types.ts從而把一個(gè)字符串知識(shí)點(diǎn)還原到課程內(nèi)容如何被組織、校驗(yàn)與評(píng)測(cè)的完整鏈路中。【免費(fèi)下載鏈接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp創(chuàng)作聲明:本文部分內(nèi)容由AI輔助生成(AIGC),僅供參考