Cómo poner en mayúscula la primera letra de cada palabra en JavaScript: un tutorial de mayúsculas de JS

Programación

En este artículo, aprenderá a poner en mayúscula la primera letra de cualquier palabra en JavaScript. Después de eso, pondrá en mayúscula la primera letra de todas las palabras de una oración.

Lo hermoso de la programación es que no existe una solución universal para resolver un problema. Por lo tanto, en este artículo verá varias formas de resolver el mismo problema.

Poner en mayúscula la primera letra de una palabra

En primer lugar, comencemos escribiendo en mayúscula la primera letra de una sola palabra. Después de que aprenda a hacer esto, pasaremos al siguiente nivel, haciéndolo con cada palabra de una oración. Aquí hay un ejemplo:

const publication = "freeCodeCamp";

En JavaScript, comenzamos a contar desde 0. Por ejemplo, si tenemos una matriz, la primera posición es 0, no 1.

Además, podemos acceder a cada letra de una Cadena de la misma forma que accedemos a un elemento de una matriz. Por ejemplo, la primera letra de la palabra " freeCodeCamp " está en la posición 0.

Esto significa que podemos obtener la letra f de freeCodeCamp haciendo publication[0].

De la misma forma, puede acceder a otras letras de la palabra. Puede reemplazar "0" con cualquier número, siempre que no exceda la longitud de la palabra. Al exceder la longitud de la palabra, me refiero a intentar hacer algo como publication[25, lo que arroja un error porque solo hay doce letras en la palabra "freeCodeCamp".

Cómo poner en mayúscula la primera letra

Ahora que sabemos cómo acceder a una letra desde una palabra, pongámosla en mayúscula.

En JavaScript, tenemos un método llamado toUpperCase(), al que podemos invocar cadenas o palabras. Como podemos deducir del nombre, lo llama en una cadena / palabra, y devolverá lo mismo pero en mayúsculas.

Por ejemplo:

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

Al ejecutar el código anterior, obtendrá una F mayúscula en lugar de f. Para recuperar toda la palabra, podemos hacer esto:

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

Ahora concatena "F" con "reeCodeCamp", lo que significa que recuperamos la palabra "FreeCodeCamp". ¡Eso es todo!

Recapitulemos

Para asegurarnos de que las cosas estén claras, recapitulemos lo que hemos aprendido hasta ahora:

  • En JavaScript, el conteo comienza desde 0.
  • Podemos acceder a una letra de una cadena de la misma manera que accedemos a un elemento de una matriz, por ejemplo string[index].
  • No use un índice que exceda la longitud de la cadena (use el método de longitud - string.length- para encontrar el rango que puede usar).
  • Utilice el método incorporado toUpperCase()en la letra que desea transformar a mayúscula.

Ponga en mayúscula la primera letra de cada palabra de una cadena

El siguiente paso es tomar una oración y poner en mayúscula cada palabra de esa oración. Tomemos la siguiente oración:

const mySentence = "freeCodeCamp is an awesome resource";

Dividirlo en palabras

Tenemos que poner en mayúscula la primera letra de cada palabra de la oración freeCodeCamp is an awesome resource.

El primer paso que damos es dividir la oración en una serie de palabras. ¿Por qué? Entonces podemos manipular cada palabra individualmente. Podemos hacerlo de la siguiente manera:

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

Repite cada palabra

Después de ejecutar el código anterior, a la variable wordsse le asigna una matriz con cada palabra de la oración. La matriz es la siguiente ["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); }

Ahora, el siguiente paso es recorrer el conjunto de palabras y poner en mayúscula la primera letra de cada palabra.

En el código anterior, cada palabra se toma por separado. Luego pone en mayúscula la primera letra y, al final, concatena la primera letra en mayúscula con el resto de la cadena.

Une las palabras

¿Qué está haciendo el código anterior? Repite cada palabra y la reemplaza con la mayúscula de la primera letra + el resto de la cadena.

Si tomamos "freeCodeCamp" como ejemplo, se ve así freeCodeCamp = F + reeCodeCamp.

Después de iterar sobre todas las palabras, la wordsmatriz es ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"]. Sin embargo, tenemos una matriz, no una cadena, que no es lo que queremos.

The last step is to join all the words to form a sentence. So, how do we do that?

In JavaScript, we have a method called join, which we can use to return an array as a string. The method takes a separator as an argument. That is, we specify what to add between words, for example a space.

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

In the above code snippet, we can see the join method in action. We call it on the words array, and we specify the separator, which in our case is a space.

Therefore, ["FreeCodeCamp", "Is", "An", "Awesome", "Resource"] becomes FreeCodeCamp Is An Awesome Resource.

Other methods

In programming, usually, there are multiple ways of solving the same problem. So let's see another approach.

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.