在 JavaScript 中将每个单词的第一个字母大写
将字符串中每个单词的首字母大写：
-
使用
split()方法将字符串拆分为单词数组。 -
使用
Array.map()方法迭代数组。 -
使用
join()方法将数组连接成一个字符串。
function toTitleCase(str) {
const titleCase = str
.toLowerCase()
.split(' ')
.map(word => {
return word.charAt(0).toUpperCase() + word.slice(1);
})
.join(' ');
return titleCase;
}
// 👇️ Bobby Hadz
console.log(toTitleCase('bobby hadz'));
// 👇️ Hello World
console.log(toTitleCase('hello world'));
// 👇️ ''
console.log(toTitleCase(''));
我们创建了一个可重用函数，将字符串中每个单词的首字母大写。
我们首先将整个字符串转换为小写，以确保每个单词中只有第一个字母是大写的。
如果我们不想将单词中的所有非首字母小写，请删除对
toLowerCase()方法的调用。
我们使用 String.split() 方法将字符串拆分为单词数组。
// 👇️ ['Hello', 'world']
console.log('Hello world'.split(' '));
我们传递给 Array.map 方法的函数会针对数组中的每个元素进行调用。
map() 方法返回一个新数组，其中包含从回调函数返回的值。
在函数中，我们访问每个单词的第一个字符，将其转换为大写并将其连接到字符串的其余部分。
// 👇️ ['Hello', 'World']
console.log(
'hello world'.split(' ').map(word => {
return word.charAt(0).toUpperCase() + word.slice(1);
}),
);
此时，我们有一个数组，其中包含字符串中的单词，每个单词的首字母大写。
最后一步是使用 Array.join() 方法将数组连接成一个字符串。
// 👇️ "Hello World"
console.log(
'hello world'
.split(' ')
.map(word => {
return word.charAt(0).toUpperCase() + word.slice(1);
})
.join(' '),
);
我们还可以使用 CSS 将每个单词的首字母大写。
使用 CSS 将每个单词的首字母大写
将每个单词的第一个字母大写：
- 选择元素。
- 将元素的文本转换样式设置为大写。
这是示例的 HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<p id="paragraph">fql jiyik com</p>
<script type="module" src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const paragraph = document.getElementById('paragraph');
paragraph.style.textTransform = 'capitalize';
p 标签在运行 JavaScript 代码后变成 Fql Jiyik Com。
当 text-transform 属性设置为 capitalize 时，每个单词的第一个字母都会大写。
字符串中的其他字符保持不变。
使用 String.replace() 将每个单词的首字母大写
将每个单词的第一个字母大写：
-
将
String.replace()方法与正则表达式结合使用。 - 正则表达式应匹配每个单词的第一个字母。
-
使用
toUpperCase()方法将匹配项转换为大写。
function toTitleCase(str) {
return str.replace(/(^\w|\s\w)/g, m => m.toUpperCase());
}
// 👇️ Hello World
console.log(toTitleCase('hello world'));
// 👇️ Fql Jiyik Com
console.log(toTitleCase('fql jiyik com'));
String.replace() 方法返回一个新字符串，其中一个、一些或所有正则表达式的匹配项被替换为提供的替换项。
该方法采用以下参数：
- pattern 要在字符串中查找的模式。 可以是字符串或正则表达式。
- replacement 一个字符串，用于将匹配的子字符串替换为提供的模式。
String.replace() 方法返回一个新字符串，其中替换了模式的匹配项。 该方法不会更改原始字符串。
字符串在 JavaScript 中是不可变的。
正斜杠 // 标记正则表达式的开始和结束。
function toTitleCase(str) {
return str.replace(/(^\w|\s\w)/g, m => m.toUpperCase());
}
^\w 匹配字符串中的第一个字母。
管道 | 特殊字符表示 OR，例如 X|Y 匹配 X 或 Y。
\s\w 部分匹配空白字符后的第一个字母。
我们设置 g 标志是因为我们想要匹配单词中第一个字母的所有出现，而不仅仅是第一次出现。
总的来说，正则表达式匹配字符串的第一个字母和每个单词的第一个字母。
我们传递给 replace() 方法的第二个参数是一个在每次匹配时调用的函数。
我们使用 String.toUpperCase() 方法将每个匹配项（每个单词的第一个字母）转换为大写。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
