Comment mettre en majuscule la première lettre de chaque mot en JavaScript - un didacticiel JS majuscules

Dans cet article, vous allez apprendre à mettre en majuscule la première lettre de n'importe quel mot en JavaScript. Après cela, vous allez mettre en majuscule la première lettre de tous les mots d'une phrase.

La belle chose à propos de la programmation est qu'il n'y a pas de solution universelle pour résoudre un problème. Par conséquent, dans cet article, vous allez voir plusieurs façons de résoudre le même problème.

Mettre en majuscule la première lettre d'un mot

Tout d'abord, commençons par mettre en majuscule la première lettre d'un seul mot. Une fois que vous aurez appris comment faire cela, nous passerons au niveau suivant - le faire sur chaque mot d'une phrase. Voici un exemple:

const publication = "freeCodeCamp"; 

En JavaScript, nous commençons à compter à partir de 0. Par exemple, si nous avons un tableau, la première position est 0 et non 1.

De plus, nous pouvons accéder à chaque lettre à partir d'une chaîne de la même manière que nous accédons à un élément à partir d'un tableau. Par exemple, la première lettre du mot " freeCodeCamp " est à la position 0.

Cela signifie que nous pouvons obtenir la lettre f de freeCodeCamp en faisant publication[0].

De la même manière, vous pouvez accéder à d'autres lettres du mot. Vous pouvez remplacer "0" par n'importe quel nombre, tant que vous ne dépassez pas la longueur du mot. En dépassant la longueur du mot, je veux dire essayer de faire quelque chose comme publication[25, ce qui génère une erreur car il n'y a que douze lettres dans le mot "freeCodeCamp".

Comment mettre en majuscule la première lettre

Maintenant que nous savons comment accéder à une lettre à partir d'un mot, mettons-la en majuscule.

En JavaScript, nous avons une méthode appelée toUpperCase(), que nous pouvons appeler sur des chaînes ou des mots. Comme nous pouvons l'impliquer à partir du nom, vous l'appelez sur une chaîne / mot, et il retournera la même chose mais en majuscules.

Par exemple:

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

En exécutant le code ci-dessus, vous obtiendrez un F majuscule au lieu de f. Pour récupérer le mot entier, nous pouvons faire ceci:

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

Maintenant, il concatène "F" avec "reeCodeCamp", ce qui signifie que nous récupérons le mot "FreeCodeCamp". C'est tout!

Résumons

Pour être sûr que les choses sont claires, récapitulons ce que nous avons appris jusqu'à présent:

  • En JavaScript, le comptage commence à 0.
  • Nous pouvons accéder à une lettre à partir d'une chaîne de la même manière que nous accédons à un élément à partir d'un tableau - par exemple string[index].
  • N'utilisez pas un index qui dépasse la longueur de la chaîne (utilisez la méthode length - string.length- pour trouver la plage que vous pouvez utiliser).
  • Utilisez la méthode intégrée toUpperCase()sur la lettre que vous souhaitez transformer en majuscule.

Mettre en majuscule la première lettre de chaque mot d'une chaîne

La prochaine étape consiste à prendre une phrase et à mettre en majuscule chaque mot de cette phrase. Prenons la phrase suivante:

const mySentence = "freeCodeCamp is an awesome resource"; 

Divisez-le en mots

Nous devons mettre en majuscule la première lettre de chaque mot de la phrase freeCodeCamp is an awesome resource.

La première étape consiste à diviser la phrase en un tableau de mots. Pourquoi? Nous pouvons donc manipuler chaque mot individuellement. Nous pouvons le faire comme suit:

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

Itérer sur chaque mot

Après avoir exécuté le code ci-dessus, la variable wordsreçoit un tableau avec chaque mot de la phrase. Le tableau est le suivant ["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); } 

Maintenant, l'étape suivante consiste à parcourir le tableau de mots et à mettre en majuscule la première lettre de chaque mot.

Dans le code ci-dessus, chaque mot est pris séparément. Ensuite, il met en majuscule la première lettre, et à la fin, il concatène la première lettre en majuscule avec le reste de la chaîne.

Rejoignez les mots

Que fait le code ci-dessus? Il itère sur chaque mot et le remplace par la majuscule de la première lettre + le reste de la chaîne.

Si nous prenons "freeCodeCamp" comme exemple, cela ressemble à ceci freeCodeCamp = F + reeCodeCamp.

Après avoir parcouru tous les mots, le wordstableau est ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]. Cependant, nous avons un tableau, pas une chaîne, ce qui n'est pas ce que nous voulons.

La dernière étape consiste à joindre tous les mots pour former une phrase. Alors, comment faisons-nous cela?

En JavaScript, nous avons une méthode appelée join, que nous pouvons utiliser pour renvoyer un tableau sous forme de chaîne. La méthode prend un séparateur comme argument. Autrement dit, nous spécifions ce qu'il faut ajouter entre les mots, par exemple un espace.

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(" "); 

Dans l'extrait de code ci-dessus, nous pouvons voir la méthode join en action. Nous l'appelons sur le wordstableau, et nous spécifions le séparateur, qui dans notre cas est un espace.

Par conséquent, ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]devient FreeCodeCamp Is An Awesome Resource.

Autres méthodes

En programmation, il existe généralement plusieurs façons de résoudre le même problème. Voyons donc une autre approche.

const mySentence = "freeCodeCamp is an awesome resource"; const words = mySentence.split(" "); words.map((word) => { return word[0].toUpperCase() + word.substring(1); }).join(" "); 

What is the difference between the above solution and the initial solution? The two solutions are very similar, the difference being that in the second solution we are using the map function, whereas in the first solution we used a for loop.

Let's go even further, and try to do a one-liner. Be aware! One line solutions might look cool, but in the real world they are rarely used because it is challenging to understand them. Code readability always comes first.

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

The above code uses RegEx to transform the letters. The RegEx might look confusing, so let me explain what happens:

  • ^ matches the beginning of the string.
  • \w matches any word character.
  • {1} takes only the first character.
  • Thus, ^\w{1} matches the first letter of the word.
  • | works like the boolean OR. It matches the expression after and before the |.
  • \s+ matches any amount of whitespace between the words (for example spaces, tabs, or line breaks).

Thus, with one line, we accomplished the same thing we accomplished in the above solutions. If you want to play around with the RegEx and to learn more, you can use this website.

Conclusion

Congratulations, you learnt a new thing today! To recap, in this article, you learnt how to:

  • access the characters from a string
  • capitalize the first letter of a word
  • split a string in an array of words
  • join back the words from an array to form a string
  • use RegEx to accomplish the same task

If you like what I write, the chances are you would love what I email. Consider subscribing to my mailing list. If you're not a fan of newsletters, we can always keep in touch on Twitter.