JavaScript 字符串首字母大写：ucFirst 函数的完整实现与边界处理

• 文档
• 教程
• 前端

在 JavaScript 中实现“把字符串首字母变成大写”这一看似简单的需求时，会遇到两个绕不开的技术点：字符串不可变性（无法原地修改字符，只能构造新字符串）与空字符串边界（str[0]在空串上返回undefined，直接调用.toUpperCase()会抛错）。本文以现代 JavaScript 教程（zh.javascript.info）中“首字母大写”任务为骨架，结合仓库内配套的源码与 Mocha 测试，完整讲解ucFirst(str)的实现思路、两种安全变体，以及 Unicode 字符下的注意事项。

任务回顾：把字符串的首字母变成大写

本任务的原始描述位于 1-js/05-data-types/03-string/1-ucfirst/task.md：编写一个函数ucFirst(str)，返回首字母大写的字符串str，例如：

ucFirst("john") == "John";

该任务在教程中被标记为 importance 5（较高重要性），是字符串章节的基础练习。它考察的知识点覆盖了教程 1-js/05-data-types/03-string/article.md 中「访问字符」「字符串是不可变的」「改变大小写」「获取子字符串」等多个核心小节，因此本文会逐层拆解这些原理。

为什么不能直接“替换”首字符：字符串是不可变的

直觉上的第一反应可能是“把第一个字符替换成大写形式”。但 JavaScript 中的字符串是**不可变（immutable）**的，无法修改其中的任何字符。教程在 article.md 的「字符串是不可变的」一节中给出了直接证明：

let str = 'Hi'; str[0] = 'h'; // error —— 严格模式下抛出 TypeError，静默模式下赋值被忽略 alert( str[0] ); // 无法运行，str[0] 仍然是 'H'

因此，任何看似“修改”字符串的操作，其本质都是创建一个新的字符串并重新赋值给变量。例如教程中把'Hi'变成'hi'的做法：

let str = 'Hi'; str = 'h' + str[1]; // 用拼接构造新字符串来“替换” alert( str ); // hi

同理，ucFirst也不能“替换”第一个字符，而必须基于已有字符串构造出一个首字母大写的新字符串。

标准解法：重新构造一个新字符串

本任务的官方解答位于 1-js/05-data-types/03-string/1-ucfirst/solution.md，核心思路一行代码即可概括：

let newStr = str[0].toUpperCase() + str.slice(1);

这条表达式由三个独立的字符串操作拼装而成，下面逐一拆解。

如何取出首字符：str[0] 与 charAt(0)

str[0]是访问字符的现代写法（下标从 0 开始）。教程 article.md 的「访问字符」一节指出，除了方括号，还可以使用历史方法str.charAt(pos)：

let str = `Hello`; alert( str[0] ); // H alert( str.charAt(0) ); // H

两者唯一的区别在于越界时的返回值：如果位置不存在字符，[]返回undefined，而charAt返回空字符串''：

let str = `Hello`; alert( str[1000] ); // undefined alert( str.charAt(1000) ); // ''（空字符串）

正是这一差异，构成了下文两种边界处理变体的分水岭。

如何大写化：toUpperCase

取出首字符后，用toUpperCase()把它变成大写。教程 article.md 的「改变大小写」一节展示了它的用法：

alert( 'Interface'.toUpperCase() ); // INTERFACE alert( 'Interface'.toLowerCase() ); // interface // 也可以只处理单个字符 alert( 'Interface'[0].toLowerCase() ); // 'i'

如何截取剩余部分：slice

str.slice(1)从下标 1 开始截取到字符串末尾，即“除首字符外的其余部分”。教程 article.md 的「获取子字符串」一节总结了 JavaScript 中三种取子串方法的区别：

教程的建议是：slice允许负值参数、写法更简短，是三者中最灵活、最值得记住的一个。在ucFirst场景中，slice(1)简洁地表达了“去掉第一个字符，保留其余全部内容”，这正是选用slice的原因。

空字符串的陷阱：undefined.toUpperCase() 抛错

上面的一行解法存在一个隐蔽的小问题：如果str是空字符串，str[0]的值是undefined，而undefined上没有toUpperCase()方法，直接调用会抛出TypeError: Cannot read properties of undefined之类的错误：

let str = ""; str[0].toUpperCase(); // TypeError！undefined 没有 toUpperCase 方法

也就是说，ucFirst("")必须优雅地返回""，而不是让程序崩溃。这是该任务的核心边界条件，解答文档 solution.md 给出了两种规避方案。

两种可靠的实现变体

变体一：利用 charAt(0) 总返回字符串的特性

由于str.charAt(0)在空字符串上返回的是空字符串''，而''.toUpperCase()也是''，整条表达式天然安全：

function ucFirst(str) { return str.charAt(0).toUpperCase() + str.slice(1); } alert( ucFirst("john") ); // John alert( ucFirst("") ); // ""（空字符串，不报错）

验证一下空串路径：''.toUpperCase()得到''，''.slice(1)也得到''，拼接结果仍是''。这种写法不需要显式的空值判断，代码更短。

变体二：先检查空字符串（教程采用的方案）

第二种变体保留str[0]的现代写法，但先对空字符串做显式判断，直接原样返回：

function ucFirst(str) { if (!str) return str; return str[0].toUpperCase() + str.slice(1); }

这里的if (!str)利用了空字符串的 falsy 特性：""为假值，因此空串会直接走return str（即返回""），不会触碰到str[0].toUpperCase()。对非空字符串，str[0]一定是一个真实字符，可以安全调用toUpperCase()。

两种变体各有取舍：变体一靠charAt的“永不越界”语义隐式兜底，代码最精简；变体二显式表达“空字符串直接返回”的业务意图，可读性更好，也是教程最终采用的方案。

完整可运行的实现

教程解答文档 solution.md 给出的完整实现如下（带run demo标记，可在浏览器环境中直接运行）：

function ucFirst(str) { if (!str) return str; return str[0].toUpperCase() + str.slice(1); } alert( ucFirst("john") ); // John

该函数同样保存在仓库的 1-js/05-data-types/03-string/1-ucfirst/_js.view/solution.js 中，供读者直接查看或复用。

用 Mocha 测试验证实现

仓库为本题配套了基于 Mocha 的单元测试，位于 1-js/05-data-types/03-string/1-ucfirst/_js.view/test.js：

describe("ucFirst", function() { it('Uppercases the first symbol', function() { assert.strictEqual(ucFirst("john"), "John"); }); it("Doesn't die on an empty string", function() { assert.strictEqual(ucFirst(""), ""); }); });

两个用例恰好对应本任务的两大验收标准：

1. 功能正确性：ucFirst("john")必须严格等于"John"（assert.strictEqual使用===级别的严格比较）；
2. 边界健壮性：空字符串输入必须返回""，而不是抛出异常。

在仓库中，Mocha 测试的组织与运行方式可参见 1-js/03-code-quality/05-testing-mocha/article.md 的讲解——教程以describe/it/assert的结构描述被测函数的行为，beforeEach/afterEach等钩子用于初始化与清理环境，assert.strictEqual则是其中最常用的断言形式。

深入：Unicode 与代理对下的注意事项

str[0]按UTF-16 编码单元取字符，而教程 article.md 的「内部，Unicode」一节提醒过：像 emoji、罕见象形文字这类符号由一对“代理对（surrogate pair）”编码，length会显示为 2，str[0]只能取到其中一半：

alert( '𝒳'.length ); // 2，大写数学符号 X alert( '𝒳'[0] ); // 代理对的其中一块，单独打印没有意义

这带来两个值得注意的细节：

• 幸运的是：对没有大小写映射的字符（如代理对的高半区），toUpperCase()会原样返回，因此str[0].toUpperCase() + str.slice(1)在字符串以 emoji 开头时仍能保持代理对完整，结果不会“坏掉”；
• 但要注意：大小写转换并不总是 1 字符对 1 字符。例如'ß'.toUpperCase()的结果是'SS'（长度从 1 变成 2）。如果业务对这类字符有要求，就不能简单假设“首字符变大写后长度不变”，需要按具体语言规则处理。

另外，如果希望按“字符”而非“编码单元”操作字符串（例如处理以代理对开头的字符串），可以利用for..of或展开运算符先取出完整字符，再对其首字符做转换。教程 article.md 展示过for..of能正确遍历代理对：

for (let char of "Hello") { alert(char); // H,e,l,l,o }

基于此，也可以写出按完整字符（code point）处理首字母大写的版本：

function ucFirst(str) { if (!str) return str; const [first, ...rest] = str; return first.toUpperCase() + rest.join(''); }

这个版本通过解构把第一个完整字符与剩余字符分离，对代理对的处理比str[0]更符合直觉，代价是写法稍长、需要额外的一次遍历。

小结

实现ucFirst(str)这一题，本质上是在回答三个问题：

1. 为什么不能原地改——JavaScript 字符串不可变，只能“基于旧字符串构造新字符串”，核心表达式是str[0].toUpperCase() + str.slice(1)；
2. 空字符串怎么办——str[0]在空串上是undefined，不能调toUpperCase()；要么改用str.charAt(0)（越界时返回''，天然安全），要么先if (!str) return str显式兜底；
3. 怎么保证正确——用assert.strictEqual同时覆盖“首字母大写”和“空串不崩溃”两个用例，如仓库 test.js 所示。

这条实现链路中涉及的[]/charAt取字符、toUpperCase大小写转换、slice取子串，以及 UTF-16 代理对与不可变性，都是 JavaScript 字符串编程中最基础也最常用的能力，理解透彻后可以自然迁移到格式化姓名、标题化文本、拼写检查等大量真实场景中。

• 文档
• 教程
• 前端