迹忆客 专注技术分享

在 TypeScript 中将字符串的第一个字母大写：

1. 使用 charAt() 方法获取字符串的第一个字母。
2. 对字母调用 toUpperCase() 方法。
3. 使用 slice() 方法获取字符串的其余部分。
4. 连接结果。

const str = 'hello world';

// ✅ 首字母大写
const result1 = str.charAt(0).toUpperCase() + str.slice(1);
console.log(result1); // 👉️ "Hello world"

// ✅ 首字母大写，其余小写
const result2 = str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
console.log(result2); // 👉️ "Hello world"

代码片段中的第一个示例将字符串的第一个字母转换为大写，其余部分保持原样。

第二个例子，将第一个字母大写并将其余字母转换为小写。

我们传递给 String.charAt 方法的唯一参数是我们想要获取的字符的索引。

索引在 JavaScript（和 TypeScript）中是从零开始的，这意味着字符串中第一个字符的索引是 0，而最后一个字符的索引 - string.length - 1。

然后我们使用 String.toUpperCase() 方法将位置 0 处的字符转为大写。

我们使用加法 + 运算符将第一个字符与字符串的其余部分连接起来。

我们传递给 String.slice 方法的唯一参数是起始索引——要包含在新字符串中的第一个字符的索引。

请注意 ，结果变量的类型是字符串。 如果在空字符串上使用，此解决方案将返回一个空字符串并且不会引发错误。

const str = '';

// ✅ 首字母大写
const result1 = str.charAt(0).toUpperCase() + str.slice(1);
console.log(result1); // 👉️ ""

// ✅ 首字母大写，其余小写
const result2 = str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
console.log(result2); // 👉️ ""

这是因为 charAt 和 slice 方法在越界访问索引时返回空字符串。

我们有意不使用方括号 [] 表示法来访问字符串中的第一个字符，因为当传递字符串中不存在的索引时它会返回 undefined。

const str = '';

// 👇️ const r: string
const result = str[100];

console.log(result); // 👉️ undefined

// ⛔️ Error: cannot read property 'toUpperCase'
// of undefined
result.toUpperCase();

尽管在上面的示例中结果变量的类型是字符串，但它存储了一个未定义的值，因此尝试对未定义的值调用方法会导致运行时错误。

在这种情况下，TypeScript 帮不了我们太多，尤其是在处理从远程 API 获取的字符串值时，因此我们有责任确保我们调用 toUpperCase 的值是一个字符串。

即使传递了字符串中不存在的索引，charAt 方法也会返回一个空字符串。