Capitalizar primera letra con Javascript

En este rápido tutorial aprenderemos como hacer que la primer letra de un string sea mayúscula

#La forma fácil

Para empezar, ¿Por qué necesitaríamos hacerlo en Javascript? ¿No es más fácil con CSS? Pues si, si es más fácil hacer esto en CSS, pero si por alguna circunstancia no podemos hacerlo así, no perdemos nada con saber como se hace, pero por si las dudas, para hacer todo esto en css solo necesitamos:

1.test {
2  text-transform: capitalize;
3}
4

#En Javascript

Para llegar a este resultado utilizando javascript, lo que necesitamos son 3 pasos:

1. Encontrar la primer letra
2. Convertirla a mayúscula
3. Juntarla con las demás

Traducido a código sería algo como esto:

charAt

charAt( pos ) nos regresa el carácter que se encuentre en la pos (posición) indicada, sabemos que los array empiezan en la posición cero, por lo tanto, para encontrar el primer carácter de nuestra cadena, usamos charAt( 0 ).

1const str = 'foo';
2const firstLetter = str.charAt(0);
3console.log(firstLetter); // f
4

toUpperCase

Ahora, toUpperCase convierte todos los caracteres enviados a mayúsculas, por eso es importante que primero encontremos la primer letra, para que solo la afecte a ella:

1const str = 'foo';
2const uppercaseStr = str.toUpperCase();
3console.log(uppercaseStr); // FOO
4

slice

slice( start. end ) lo que hace es cortar una cadena, comenzando desde el carácter especificado en start, y terminando en el carácter especificado por end, si end no se especifica, simplemente tomará el numero total de caracteres de la cadena, llegando hasta el final.

1const str = 'foo';
2const latterStr = str.slice(1);
3console.log(latterStr); // oo
4

Ahora ya tenemos todas las partes necesarias, solo nos queda unirlas:

1const str = 'foo';
2const firstLetter = str.charAt(0);
3const upperCaseStr = firstLetter.toUpperCase();
4const latterStr = str.slice(1);
5const result = upperCaseStr + latterStr;
6console.log(result); // Foo
7// Versión corta
8console.log(str.charAt(0).toUpperCase() + str.slice(1)); // Foo
9