HOWTO · JavaScript
在 JavaScript 中将字符串转换为标题大小写
将字符串转换为标题大小写是指将除初始字符之外的其余字符保持小写。在本文中,核心实现将基于 slice、replace、split、join 和 map 以及一个循环。
本页内容
JavaScript 提供了字符串方法 toLowerCase() 和 toUpperCase(),但没有内建的 capitalize() 方法可以将整句话转换为标题大小写。本指南所说的标题大小写,是先将输入转换为小写,再把每个由普通空格分隔的单词的首字符转换为大写。这种实用规则适用于简单的英文文本,但并不适用于所有标题格式规范。
这些示例使用 split() 创建单词数组、转换每个单词的首字符,再用 join() 重新组合成字符串。循环和 map() 示例使用 charAt() 获取首字符,并用 slice() 取得其余部分。提供的执行证据显示,三个独立示例均成功运行;每个示例后面都有可选择复制的控制台输出。
使用 JavaScript 的 for 循环转换字符串为标题大小写
循环版本会逐步展示每项操作。首先,toLowerCase() 将字母统一转换为小写,split(' ') 按普通空格分割字符串并创建数组。接着,循环把数组中的每一项替换为首字符的大写形式与单词其余部分的组合。最后,join(' ') 将这些单词重新组合为一个字符串。JavaScript 的 split() 是用于创建该数组的字符串操作。
运行以下示例:
本节中的代码以及显示的标签或输出仍为英文。
function titleCase(str) {
const words = str.toLowerCase().split(' ');
for (let i = 0; i < words.length; i++) {
words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
}
return words.join(' ');
}
console.log(titleCase('hello pumpkin pumpkin you my hello honey bunny!'));
Hello Pumpkin Pumpkin You My Hello Honey Bunny!
如果你想在循环中加入逐词处理逻辑,例如跳过某个单词,或根据单词所在位置应用规则,这种方式会很实用。
使用 JavaScript 的 map() 方法转换字符串为标题大小写
map() 会对数组中的每一项调用回调函数,并返回一个由回调结果组成的新数组。这里,它执行了与循环相同的首字符转换,同时不修改原来的分割数组。随后,join(' ') 会将转换后的单词组合起来。
运行以下示例:
本节中的代码以及显示的标签或输出仍为英文。
function titleCase(str) {
return str.toLowerCase()
.split(' ')
.map(function (word) {
return word.charAt(0).toUpperCase() + word.slice(1);
})
.join(' ');
}
console.log(titleCase('you gone MAD?'));
You Gone Mad?
如果逐词直接转换的写法更清晰,可以选用这个版本。由于 map() 返回的是数组,记得最后调用 join(' '),这样结果才是字符串,而不是数组。
使用 replace() 方法将 JavaScript 字符串转换为标题大小写
你也可以使用 replace() 将分割后每个单词的首字符转换为大写。下面的正则表达式会匹配单词开头的一个字符;回调函数转换该字符,而空单词没有匹配项,因此会保持为空。前后的分割与组合步骤和其他示例相同。
运行以下示例:
本节中的代码以及显示的标签或输出仍为英文。
function titleCase(str) {
return str.toLowerCase()
.split(' ')
.map(function (word) {
return word.replace(/^([\s\S])/, function (first) {
return first.toUpperCase();
});
})
.join(' ');
}
console.log(titleCase("i'm just appreciating hoho!"));
I'm Just Appreciating Hoho!
这个版本把首字符转换放在 replace() 的回调函数中。不过,它仍会逐个处理单词,因此在此实现中,replace() 不能替代 split() 和 join()。
选择一种实现并了解其限制
如果你希望转换步骤便于添加条件,可以使用 for 循环。若想简洁地逐词转换并得到新数组,可以使用 map()。replace() 版本则提供了另一种转换首字符的方式,但它需要正则表达式;在某些情况下,charAt() 和 slice() 可能更容易理解。现有证据无法证明哪种方式必然更快,因此应选择最能清楚表达所需规则的写法。
这些示例按普通空格字符分割字符串,并不会将所有类型的空白字符一视同仁。输入中的制表符或换行符仍会留在单词内部,而连续空格会产生空数组项;示例中的转换会保留这些空项,join(' ') 也会保留连续空格。如果输入可能包含不同类型的空白字符,应先根据需要规范化或使用合适的分割规则,同时决定是否要保留重复空格。
这些示例会转换每个空格分隔片段开头的 JavaScript 字符,并不遵循所有语言的标题大小写惯例。标点符号会保留在原处,因此单词内部的撇号不会被视为新的单词边界。某些文字系统和人名的大小写转换可能需要依照地区或语言采用专门规则。请根据数据调整单词边界和大小写规则,不要假设这种简单转换适合所有语言或显示名称。