freeCodeCamp JavaScript 课程精讲：用方括号索引（Bracket Notation）取出字符串的首字符

本指南围绕 freeCodeCamp 开源仓库中 Basic JavaScript 单元的经典课时 Use Bracket Notation to Find the First Character in a String 展开，系统讲解字符串索引、零基（Zero-based）计数原理与标准解法，并剖析 freeCodeCamp 如何通过断言与正则自动验证代码。学完本课，你既能独立通关该课时，也能顺势掌握"取任意字符、末字符、倒数第 N 个字符"的整套字符串访问技能。

一、这一课时在课程体系中的位置

先理解这份文档的本质：它不是纯说明文档，而是 freeCodeCamp 课程仓库中以 Markdown + frontmatter 形式存储、可被自动判题的"教学关卡"。文件开头的 YAML frontmatter 是：

id: bd7123c9c549eddfaeb5bdef
title: Use Bracket Notation to Find the First Character in a String
challengeType: 1
forumTopicId: 18341
dashedName: use-bracket-notation-to-find-the-first-character-in-a-string

• id：课时全局唯一标识；
• title：课时标题；
• challengeType: 1：课时类型编号；
• forumTopicId：关联论坛讨论主题的编号；
• dashedName：URL 友好的短横线命名。

它在学习序列中的位置可由 basic-javascript.json 确认：本课时紧随 "Find the Length of a String" 之后，位于 "Understand String Immutability"、"Use Bracket Notation to Find the Nth Character in a String"、取最后一个字符、取倒数第 N 个字符等课时之前，形成"长度 → 首字符 → 不可变性 → 任意位字符 → 末字符"的渐进链条。也就是说，本课是整个字符串访问技能线的第一块基石。

二、核心概念：什么是 Bracket Notation（方括号索引）

课时文档给出的定义非常精炼：Bracket notation 是一种在字符串中按特定索引（index）取得某个字符的方式，写法是"字符串变量后紧跟方括号、方括号内写索引数字"。

const firstName = "Charles";
const firstLetter = firstName[0];

执行之后，firstLetter 的值就是字符串 C。

这里最关键、也最反人类直觉的，是文档反复强调的思想：

Most modern programming languages, like JavaScript, don't start counting at 1 like humans do. They start at 0. This is referred to as Zero-based indexing.

人类习惯从 1 开始数数，而 JavaScript 等编程语言从 0 开始计数，这就是零基索引（zero-based indexing）。因此"第一个字符"位于索引 0 而不是索引 1——这是字符串访问类题目中最经典、也最容易踩坑的认知点。

以文档中的 "Charles" 为例，字符与索引的对应关系为：

字符	C	h	a	r	l	e	s
索引	0	1	2	3	4	5	6

课程任务中实际使用的字符串是 "Lovelace"，对应关系为：

字符	L	o	v	e	l	a	c	e
索引	0	1	2	3	4	5	6	7

可见 L 正是第 0 个字符，lastName[0] 的值就是字符串 "L"。注意 "Lovelace" 共有 8 个字符，其合法索引范围是 0 到 7，上界恰好等于字符个数减 1——这正是后文"取最后一个字符用 length - 1"的由来。

三、实战任务解析：初始代码（seed）的含义

读完概念讲解后，文档在 # --instructions-- 中给出任务：

Use bracket notation to find the first character in the lastName variable and assign it to firstLetterOfLastName.

并从如下初始代码开始作答：

// Setup
let firstLetterOfLastName = "";
const lastName = "Lovelace";

// Only change code below this line
firstLetterOfLastName = lastName; // Change this line

从这段 seed 代码可以拆解出三个信息：

1. 平台用 const 声明了只读字符串 lastName = "Lovelace"，作答时不能修改它；
2. 目标变量 firstLetterOfLastName 用 let 声明、初始为空字符串，需要由你赋值；
3. 平台把改动点刻意留在 // Change this line 处，提示你只需修改这一行。

任务真正考查的是把前两个概念串起来：识别 "Lovelace" 的首字符是 L，且 L 位于索引 0，然后写出 lastName[0]。

四、标准解法与本地运行验证

课时文档在 # --solutions-- 部分给出了完整参考解法：

let firstLetterOfLastName = "";
const lastName = "Lovelace";

// Only change code below this line
firstLetterOfLastName = lastName[0];

答案的核心仅一行：firstLetterOfLastName = lastName[0];。执行后该变量持有字符串 "L"，而不是整个 lastName，也不是 lastName[1]（那会得到 "o"）。

你无需配置任何项目环境即可自行验证：本机装有 Node.js 的话打开终端，或用浏览器开发者工具（F12 → Console），粘贴下面代码即可看到输出：

let firstLetterOfLastName = "";
const lastName = "Lovelace";
firstLetterOfLastName = lastName[0];
console.log(firstLetterOfLastName); // 输出 L

五、自动测试如何验证你的代码

freeCodeCamp 课时之所以能"即写即评"，是因为每个关卡的 # --hints-- 内置了断言。本课的测试断言如下：

assert(firstLetterOfLastName === 'L');

assert(__helpers.removeJSComments(code).match(/firstLetterOfLastName\s*=\s*lastName\s*\[\s*\d\s*\]/));

两条断言从两个层面约束答案：

• 结果正确性：firstLetterOfLastName 必须用全等运算符 === 与字符 'L' 严格相等，杜绝类型上的取巧；
• 实现方式：第二条用正则匹配"形如 firstLetterOfLastName = lastName[数字] 的赋值"。其中 __helpers.removeJSComments(code) 先剔除代码中的注释，避免在注释里伪造匹配文本；\[\s*\d\s*\] 表示方括号内包含一个数字（允许空白）。

这意味着直接写 firstLetterOfLastName = "L" 虽然结果正确，却无法通过第二条测试——题目检验的是"你是否掌握了用索引取值的语法"，而非单纯的结果答案。这也体现了整个 Basic JavaScript 单元"考察过程、不唯结论"的设计理念。

六、同类技法横向扩展：从首字符到任意字符

本课只要求首字符，但同目录下的三个相邻课时验证了同一语法的扩展性，建议按序练习以形成完整的字符访问矩阵。

1. 取第 N 个字符 —— 见 Use Bracket Notation to Find the Nth Character in a String

既然计算机从 0 开始计数，"第二个字符"位于索引 1，课时任务最终要求 lastName[2] 取出第三个字符 "v"：

const firstName = "Ada";
const secondLetterOfFirstName = firstName[1]; // "d"

2. 取最后一个字符 —— 见 Use Bracket Notation to Find the Last Character in a String

字符串长度未知时无法写死索引，因此引入 length 属性做减法，lastName[lastName.length - 1] 即末字符：

const firstName = "Ada";
const lastLetter = firstName[firstName.length - 1]; // "a"

该课时测试还额外要求代码中必须出现 .length（断言用 /\.length/g 统计出现次数），确保你真正使用这一技巧。

3. 取倒数第 N 个字符 —— 见 Use Bracket Notation to Find the Nth-to-Last Character in a String

同一原理推广到倒数第 N 位：用 length - N 定位，lastName[lastName.length - 2] 可取出 "Lovelace" 中倒数第二个字符 "c"：

const firstName = "Augusta";
const thirdToLastLetter = firstName[firstName.length - 3]; // "s"

这些课时与 "Find the Length of a String"、"Understand String Immutability" 等共同构成 Basic JavaScript 的字符串知识闭环，全部源码位于 curriculum/challenges/english/blocks/basic-javascript 目录，便于对照研读。

七、索引访问的注意点小结

综合上述四个课时，可以提炼出使用方括号索引的关键规则：

• 索引从 0 开始：第 1 个字符索引为 0，第 N 个字符索引为 N - 1；
• 末字符用 length - 1：合法索引上界是"字符个数减 1"，如 8 个字符的 "Lovelace" 索引范围是 0 到 7；
• 空格与标点同样占位：字符串中每个位置都对应一个索引，逐字处理时不可忽略空白字符；
• 适用场景：当需要按位置取字符、或配合循环按序遍历字符串时，bracket notation 是最基础的工具，也是后续 Basic Algorithm Scripting 中字符串算法题的底层技能。

八、在本地阅读与运行这套课程

仓库集课程内容与源码于一体，阅读零门槛：直接打开 bd7123c9c549eddfaeb5bdef.md，即可查看 --description--（概念讲解）、--instructions--（任务）、--hints--（测试断言）、--seed--（初始代码）与 --solutions--（参考解法）的完整结构；配套课时与课程块整体定义分别在 basic-javascript 目录与 basic-javascript.json 中。若想进一步了解这类课时在网页端如何被渲染与评测，可继续浏览 client/src/templates/Challenges 相关源码。

九、小结

通过本课，你可以确认自己掌握了三件事：

1. Bracket notation 的定义与写法：string[index] 用于取出字符串中指定索引位置的字符；
2. 零基索引的意义：首字符是 string[0] 而非 string[1]；
3. freeCodeCamp 关卡的结构与判题逻辑：--seed-- 给起点、--hints-- 用断言与正则双重校验、--solutions-- 给参考实现，确保学习的是原理而非答案。

完成本课后，建议前往同一目录，依次挑战"第 N 个字符""最后一个字符""倒数第 N 个字符"三个进阶课时，把这套"零基索引 + length 定位"的心智模型固化为扎实的字符串操作能力。