Capitalizar todas las palabras con JS

Para capitalizar (es decir, convertir palabras con la primera letra en mayúscula como: “hola mundo” a “Hola Mundo”) con JavaScript es bastante fácil. Veamos el código primero:

const frase = "hola soy asfo y estoy capitalizando las palabras";
const fraseSeparada = frase.split(" ");
for (var i = 0; i < fraseSeparada.length; i++) {
    fraseSeparada[i] = fraseSeparada[i].charAt(0).toUpperCase() + fraseSeparada[i].slice(1);
}
const fraseCapitalizada = fraseSeparada.join(" ");
console.log(fraseCapitalizada);

Ahora, vamos a explicarlo, primero tenemos nuestra frase asignada en una variable, bien podemos convertir esto a una función y sería el parámetro que le pasáramos a la función.

Después, vamos a separar la frase usando la función .split() que nos devolverá un arreglo, es decir, en este ejemplo, veríamos un arreglo de la siguiente forma:

["hola", "soy", "asfo", "y", "estoy", "capitalizando", "las", "palabras"]

Entonces usando un ciclo iremos recorriendo cada espacio del arreglo y después, en la posición de cada parte del arreglo reemplazando la palabra existente con su versión capitalizada, para ello, la función charAt(0) y a la manera en que trabaja JavaScript, selecciona el primer caracter de la cadena (string), como recordatorio y el por qué menciono en la manera que trabaja JS, es porque en JS todas las cadenas de caracteres son en realidad arreglos, "hola" como string/cadena de caracteres en realidad es ["h", "o", "l", "a"] como arreglo/array y podemos validarlo de la siguiente forma:

const frase = "hola";
console.log(frase[0]);

Veremos que en consola aparece la h.

Después, convertimos esa letra, la primera, en mayúscula, con .toUpperCase(). Para finalizar, eliminamos usando .slice() el primer caracter.

Aquí podemos destacar 3 cosas:

1.-Si la frase viene con mayúsculas, ej: “HOLA MUNDO”, se retornará “HOLA MUNDO” igual, así que podemos hacer, que, todo se pase a minúsculas previamente, pero en este caso al ser un ejemplo con una cadena forzada pues sabemos que funcionará.

2.-El chartAt(0) puede como digo cambiarse por [0] de la base. Sin embargo para ser más claros usamos esta función (recordemos un código más legible es mejor para los desarrolladores)

3.-Este código puede ser convertido a una función.

Así que para que sigas mejorando, te dejamos de tarea acomodar aún más el código 😉 y quizá, hasta adaptarlo a TypeScript.