Artículo original escrito por Catalin Pit
Artículo original How to Capitalize the First Letter of Each Word in JavaScript – a JS Uppercase Tutorial
Traducido y adaptado por Gibran Pelayo M.

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

Lo hermoso acerca de la programación es que no hay una solución universal para resolver un problema. Por lo tanto, en este artículo verás múltiples maneras de resolver el mismo problema.

Escribir en mayúscula la primera letra de una palabra

En primer lugar, empecemos con escribir en mayúscula la primera letra de una sola palabra. Después de que aprendas cómo hacerlo, iremos al siguiente nivel – hacerlo con cada palabra de una oración. Aquí hay un ejemplo:

const publicacion = "freeCodeCamp";

En JavaScript empezamos a contar desde 0. Es decir, si tenemos un arreglo, la primera posición es 0, no 1.

Además, podemos acceder a cada letra de una cadena de la misma manera que accedemos a un elemento de un arreglo. Por ejemplo, la primera letra de la palabra "freeeCodeCamp" está en la posición 0.

Esto significa que podemos obtener la letra f de freeCodeCamp al ejecutar publicacion[0].

Del mismo modo, puedes acceder a otras letras de la palabra. Puedes reemplazar el "0" con cualquier número, mientras no se exceda la longitud de la palabra. Si se excede dicha longitud, como tratar de ejecutar publicacion[25] , nos arroja un error, pues solo hay 12 letras en la palabra "freeCodeCamp".

Cómo escribir en mayúscula la primera letra

Ahora que sabemos cómo acceder a una letra de una palabra. Vamos a escribirla en mayúscula.

En JavaScript existe un método llamado toUpperCase(), con el cual podemos llamar cadenas o palabras. Como podemos inferir por el nombre, se invoca para una cadena/palabra, y devuelve la misma cosa, pero en mayúsculas.

Por ejemplo:

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

Al ejecutar el código de arriba, vas a obtener una F mayúscula en lugar de f. Para recuperar la palabra completa, podemos hacer esto:

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

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

Recapitulemos

Para asegurarnos que todo queda claro, veamos lo que hemos aprendido hasta ahora:

• En JavaScript, el conteo empieza desde 0.
• Podemos acceder a una letra de una cadena de la misma manera que accedemos a un elemento de un arreglo - por ejemplo. cadena[índice].
• No uses un índice que exceda la longitud de la cadena (usa el método de longitud - cadena.length - para encontrar el rango que puedes usar).
• Usa el método integrado toUpperCase() en la letra que quieres convertir a mayúscula.

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

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

const miOracion = "freeCodeCamp es un recurso impresionante";

Separar en palabras

Necesitamos escribir en mayúscula la primera letra de cada palabra del enunciado  freeCodeCamp es un recurso impresionante.

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

const miOracion = "freeCodeCamp es un recurso impresionante";
const palabras = miOracion.split(" ");

Iterar sobre cada palabra

Después de ejecutar el código de arriba, a la variable palabras se le asigna un arreglo con cada palabra de la oración. Dicho arreglo es así:  ["freeCodeCamp", "es", "un", "recurso", "impresionante"].

const miOracion = "freeCodeCamp es un recurso impresionante";
const palabras = miOracion.split(" ");

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

Ahora el siguiente paso es recorrer el arreglo de palabras y convertir a mayúscula la primera letra de cada palabra.

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

Unir las palabras

¿Qué es lo que hace el código de arriba? Itera sobre cada palabra, y la reemplaza con la primera letra en mayúscula + el resto de la cadena.

Si tomamos "freeCodeCamp" como ejemplo, se parece a esto freeCodeCamp = F + reeCodeCamp.

Después de iterar sobre todas las palabras, el arreglo palabras es ["FreeCodeCamp", "Es", "Un", "Recurso", "Impresionante"]. Sin embargo, tenemos un arreglo, no una cadena, que no es lo que queremos.

El último paso es unir todas las palabras para formar una oración. Pero, ¿cómo lo hacemos?

En JavaScript tenemos un método llamado join, que podemos usar para devolver un arreglo como cadena. El método toma un separador como argumento. Es decir, especificamos qué añadir entre palabras, por ejemplo, un espacio.

const miOracion = "freeCodeCamp es un recurso impresionante";
const palabras = miOracion.split(" ");

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

palabras.join(" ");

En el fragmento de código de arriba, podemos ver el método join en acción. Lo llamamos para el arreglo palabras, y especificamos el separador, que en nuestro caso es un espacio.

Por lo tanto, ["FreeCodeCamp", "Es", "Un", "Recurso", "Impresionante"] se convierte en FreeCodeCamp Es Un Recurso Impresionante.

Otros métodos

Usualmente en programación hay múltiples maneras de resolver el mismo problema. Así que veamos otro enfoque.

const miOracion = "freeCodeCamp es un recurso impresionante";
const palabras = miOracion.split(" ");

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

¿Cuál es la diferencia entre la solución de arriba y la solución del inicio? Las dos soluciones son muy similares, siendo la diferencia que en la segunda solución usamos la función map, mientras que en la primera solución usamos un bucle for.

Vayamos más lejos, e intentemos hacerlo en una sola línea. ¡Pero ten cuidado! Las soluciones de una línea pueden lucir geniales, pero en el mundo real son raramente usadas porque es difícil entenderlas.  La legibilidad del código siempre es primero.

const miOracion = "freeCodeCamp es un recurso impresionante";

const OracionFinal = miOracion.replace(/(^\w{1})|(\s+\w{1})/g, letra => letra.toUpperCase());

El código de arriba usa RegEx (Expresión Regular) para transformar las letras. La RegEx puede parecer confusa, así que déjenme explicar lo que pasa:

• ^ coincide con el comienzo de la cadena.
• \w coincide con cualquier carácter de la palabra.
• {1} toma solo el primer carácter.
• Por lo tanto, ^\w{1} coincide con la primera letra de la palabra.
• | funciona como el OR booleano. Coincide con la expresión antes y después del |.
• \s+ coincide con cualquier cantidad de espacios en blanco entre las palabras (por ejemplo, espacios, tabulaciones, o saltos de línea).

Así, con una sola línea, hemos logrado la misma cosa que logramos con las soluciones de arriba. Si quieres jugar con RegEx y aprender más. Puedes usar este sitio web.

Conclusión

¡Felicidades, aprendiste algo nuevo hoy! Como repaso, en este artículo supiste como:

• Acceder a los caracteres de una cadena.
• Escribir en mayúscula la primera letra de una palabra.
• Separar una cadena en un arreglo de palabras.
• Unir de nuevo las palabras de un arreglo para formar una cadena.
• Utilizar RegEx para cumplir la misma tarea.

¡Gracias por leer! Si quieres mantenerte en contacto, conectémonos en Twitter @catalinmpit. También publico artículos de manera regular en mi blog  catalins.tech si quieres leer más contenido mío.