原文: How to Capitalize the First Letter of Each Word in JavaScript – a JS Uppercase Tutorial

在这篇文章中,你将学习如何在 JavaScript 中把任何单词的第一个字母大写。之后,你将会把一个句子中所有单词的第一个字母大写。

编程的美妙之处在于,没有一个通用的解决方案来解决一个问题。因此,在这篇文章中,你将看到解决同一问题的多种方法。

将单词的第一个字母大写

首先,让我们从大写单个单词的第一个字母开始。在你学会了如何做到这一点之后,我们将进入下一个层次——对一个句子中的每个词都这样做。下面是一个例子:

const publication = "freeCodeCamp";

在 JavaScript 中,我们从 0 开始计数,例如,如果我们有一个数组,第一个位置是  0,而不是 1。

另外,我们可以像访问数组中的元素一样,访问字符串中的每个字母。例如,“freeCodeCamp” 这个词的第一个字母是在 0 的位置。

这意味着我们可以通过 publication[0]freeCodeCamp 中获得字母 f

以同样的方式,你可以从这个词中获取其他字母。你可以用任何数字代替 “0”,只要你不超过单词的长度。我所说的超过字长,是指试图做类似 publication[25] 的事情,这就会产生一个错误,因为 “freeCodeCamp” 这个词中只有 12 个字母。

如何使第一个字母大写

现在我们知道了如何从一个词中获取一个字母,让我们来把它大写。

在 JavaScript 中,我们有一个叫作 toUpperCase() 的方法,我们可以在字符串或单词上调用它。正如它的名字所暗示的那样,你在一个字符串/单词上调用它,它将返回同样的东西,但是是大写字母。

比如:

const publication = "freeCodeCamp";
publication[0].toUpperCase();

运行上面的代码,你会得到一个大写的 F,而不是 f。为了得到整个单词,我们可以这样做:

const publication = "freeCodeCamp";
publication[0].toUpperCase() + publication.substring(1);

现在它将 “F” 与 “reeCodeCamp” 连接起来,这意味着我们得到了 “FreeCodeCamp” 这个词。就是这样!

让我们回顾一下

为了确保事情清楚,让我们回顾一下到目前为止我们所学的东西。

  • 在 JavaScript 中,计数从 0 开始。
  • 我们可以用访问数组中的一个元素的方式来访问字符串中的一个字母——比如 string[index]
  • 不要使用超过字符串长度的索引(使用 length 方法——string.length——来找到你可以使用的范围)。
  • 对你想转换为大写的字母使用内置方法 toUpperCase()

将一个字符串中每个单词的第一个字母大写

下一步是取一个句子,并将该句子中的每个词都大写。让我们来看看下面这个句子:

const mySentence = "freeCodeCamp is an awesome resource";

把它拆成单词

我们必须将句子 freeCodeCamp is an awesome resource 中每个单词的第一个字母大写。

我们采取的第一步是将该句子分割成一个单词数组。为什么?这样我们就可以对每个词进行单独操作。我们可以这样做:

const mySentence = "freeCodeCamp is an awesome resource";
const words = mySentence.split(" ");

遍历每个单词

在我们运行上述代码后,变量 words 被分配给一个数组,其中包含句子中的每个词。这个数组是 ["freeCodeCamp", "is", "an", "awesome", "resource"]

const mySentence = "freeCodeCamp is an awesome resource";
const words = mySentence.split(" ");

for (let i = 0; i < words.length; i++) {
    words[i] = words[i][0].toUpperCase() + words[i].substr(1);
}

现在,下一步是在单词数组上循环,并将每个单词的第一个字母大写。

在上面的代码中,每个词都是单独取的。然后,它将第一个字母大写,最后,它将大写的第一个字母与字符串的其他部分连接起来。

连接单词

上面的代码在做什么?它遍历每个单词,用第一个字母的大写字母 + 字符串的其余部分替换它。

如果我们以 “freeCodeCamp” 为例,它看起来像这样 freeCodeCamp = F + reeCodeCamp

在它遍历了所有的单词之后,words 数组是 ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]。然而,我们有一个数组,而不是一个字符串,这不是我们想要的。

最后一步是将所有的词连接起来,形成一个句子。那么,我们如何做到这一点呢?

在 JavaScript 中,我们有一个叫作 join 的方法,我们可以用它来把一个数组返回成一个字符串。这个方法需要一个分隔符作为参数。也就是说,我们指定在单词之间添加什么,例如一个空格。

const mySentence = "freeCodeCamp is an awesome resource";
const words = mySentence.split(" ");

for (let i = 0; i < words.length; i++) {
    words[i] = words[i][0].toUpperCase() + words[i].substr(1);
}

words.join(" ");

在上面的代码片段中,我们可以看到 join 方法的作用。我们在单词数组上调用它,并指定分隔符,在我们的例子中是一个空格。

因此,["FreeCodeCamp", "Is", "An", "Awesome", "Resource"] 成为 FreeCodeCamp Is An Awesome Resource

其他方法

在编程中,通常情况下,有多种方法来解决同一个问题。因此,让我们看看另一种方法。

const mySentence = "freeCodeCamp is an awesome resource";
const words = mySentence.split(" ");

words.map((word) => { 
    return word[0].toUpperCase() + word.substring(1); 
}).join(" ");

上述解决方案与初始解决方案的区别是什么?这两个解决方案非常相似,不同的是在第二个解决方案中我们使用的是 map 函数,而在第一个解决方案中我们使用的是 for 循环。

让我们更进一步,尝试做一个单行线。请注意,单行的解决方案可能看起来很酷,但在现实世界中,它们很少被使用,因为要理解它们很困难。代码的可读性永远是第一位的。

const mySentence = "freeCodeCamp is an awesome resource";

const finalSentence = mySentence.replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase());

上面的代码使用正则来转换字母。正则可能看起来令人困惑,所以让我解释一下发生了什么。

  • ^ 匹配字符串的开头。
  • \w 匹配任何字的字符。
  • {1} 只取第一个字符。
  • 因此,^\w{1} 匹配单词的第一个字母。
  • | 的工作原理类似于布尔式 OR,它匹配 | 后面和前面的表达式。
  • \s+ 匹配单词之间任何数量的空白(例如空格、制表符或换行符)。

因此,只用一行,我们就完成了上述解决方案中所完成的同样事情。如果你想试试正则,并想了解更多,你可以使用这个网站

总结

恭喜你,你今天学到了新的东西!回顾一下,在这篇文章中,你学会了如何:

  • 访问一个字符串中的字符
  • 将一个词的第一个字母大写
  • 将一个字符串分割成一个单词数组
  • 将数组中的单词连接起来,形成一个字符串
  • 使用正则来完成同样的任务

谢谢你阅读本文!如果你想保持联系,让我们在 Twitter @catalinmpit 上联系。如果你想阅读我的更多内容,我也会定期在我的博客 catalins.tech 上发表文章。