Artículo original escrito por Dionysia Lemonaki
Artículo original JavaScript toLowerCase() – How to Convert a String to Lowercase and Uppercase in JS
Traducido y adaptado por Michael M. Liendo

Este artículo explica cómo convertir una cadena de texto a caracteres en minúsculas y mayúsculas.

También veremos cómo convertir solo la primera letra de una palabra en mayúscula y cómo convertir la primera letra de cada palabra en una oración en mayúscula.

¡Empecemos!

Cómo utilizar el método toLowerCase() en JavaScript

El método toLowerCase convierte una cadena de texto en letras minúsculas.

La sintaxis general del método se ve así:

String.toLowerCase()

El método toLowerCase() no toma ningún parámetro.

Las cadenas en JavaScript son inmutables. El método toLowerCase () convierte la cadena de texto especificada en una nueva que consta solo de letras minúsculas y devuelve ese valor.

Significa que la cadena original antigua no se modifica ni se ve afectada de ninguna manera.

let saludo = '¡Hola!';

console.log(saludo.toLowerCase());

//salida
//¡hola!

La cadena de texto saludo consta de solo una letra mayúscula que se convierte a minúscula.

Las letras que ya están en minúsculas no se ven afectadas por el método toLowerCase(), solo las mayúsculas. Estas letras conservan su forma original.

La cadena del ejemplo siguiente consta de letras mayúsculas. Luego, todos se convierten a minúsculas cuando se aplica el método toLowerCase ().

const  otroSaludo = '¡¡BUENOS DÍAS!!';

console.log(otroSaludo.toLowerCase());
//salida
//¡¡buenos días!!

Cómo utilizar el método toUpperCase() en JavaScript

El método toUpperCase() es similar al método toLowerCase() pero en su lugar convierte el valor de la cadena de texto a mayúsculas.

La sintaxis general del método se ve así:

String.toUpper()

No toma ningún parámetro.

Como las cadenas en JavaScript son inmutables, el método toLowerCase() no cambia el valor de la cadena especificada.

En cambio, devuelve un nuevo valor. La cadena especificada se convierte en una nueva cuyo contenido consta solo de letras mayúsculas. Esto significa que ahora habrá dos cadenas: la original y la recién convertida en mayúscula.

console.log('¡Estoy gritando!'.toUpperCase());

//salida
//¡ESTOY GRITANDO!

Cualquier letra mayúscula que ya esté en la cadena no se verá afectada y permanecerá sin cambios cuando se llame al método toLowerCase().

Cómo poner en mayúscula solo la primera letra de una cadena de texto en JavaScript

¿Qué sucede si desea convertir solo la primera letra de una cadena en mayúscula?

A continuación se muestra un ejemplo simple que le muestra una forma de hacerlo.

Digamos que hay una variable llamada saludo con el valor de cadena de texto en hola, en letras minúsculas.

let saludo = 'hola';

Primero localiza y extrae la primera letra de esa cadena usando su índice. Luego llamas al método toUpperCase() en esa letra específica.

Como recordatorio, la indexación en JavaScript (y la mayoría de los lenguajes de programación) comienza en 0, por lo que la primera letra tiene un índice de 0.

Guarde esta operación en una nueva variable llamada primeraLetra.

let primeraLetra = saludo[0].toUpperCase();

console.log(primeraLetra);
// devuelve la letra 'H' en este caso

A continuación, desea aislar y cortar ese primer carácter y conservar el resto de la cadena de texto.

Una forma de hacerlo es mediante el método slice(). Esto crea una nueva cadena comenzando desde el índice especificado hasta el final de la palabra.

Desea comenzar desde la segunda letra hasta el final del valor.

En este caso, el argumento que debe pasar a slice() es un índice de 1 ya que es el índice de la segunda letra.

De esta forma, el primer carácter se excluye por completo. Se devuelve una nueva cadena sin ella, pero que contiene el resto de los caracteres, menos la primera letra.

Luego, guarde esa operación en una nueva variable.

let restoDelSaludo = saludo.slice(1);

console.log(restoDelSaludo);
//devuelve la cadena 'ola'

Al combinar las dos nuevas variables con la concatenación, obtiene una nueva cadena con solo la primera letra en mayúscula.

let nuevoSaludo = primeraLetra + restoDelSaludo;

console.log(nuevoSaludo);
//salida
// Hola

Otra forma es combinar los pasos anteriores y aislarlos en una función.

La función se crea solo una vez. Luego, la función devuelve una nueva cadena con la primera letra en mayúscula.

La cantidad de código que necesita escribir es sustancialmente menor y al mismo tiempo puede pasar cualquier cadena como argumento sin escribir código repetitivo.

function primeraLetra(str) {
     return str[0].toUpperCase() + str.slice(1);
 }

console.log(primeraLetra('hola'));
//output 
//Hola

Cómo poner en mayúscula la primera letra de cada palabra en JavaScript

Pero, ¿cómo se hace para colocar la primera letra de cada palabra en mayúscula de una oración?

Digamos que tiene una oración como la siguiente. Quieres poner en mayúscula cada primera palabra de la oración.

let aprendeAProgramar = 'aprende a programar gratis con freeCodeCamp';

El primer paso es dividir la oración en palabras individuales y trabajar con cada una por separado.

Para eso, usa el método split() y pasa un espacio como argumento. Significa que con cada espacio en la oración proporcionada, un elemento se pasa a un nuevo arreglo.

Divide la oración con base en espacios en blanco.

Cree una nueva variable y almacene el nuevo arreglo.

let splitAprendeAProgramar = aprendeAProgramar.split(" ");

console.log(splitAprendeAProgramar); 
//['aprende', 'a', 'programar', 'gratis', 'con', 'freeCodeCamp']

Ahora, a partir de esa oración, hay un nuevo arreglo de palabras que le permite manipular cada palabra por sí sola, por separado.

Dado que ahora hay un nuevo arreglo, puede usar el método map() para iterar sobre cada elemento individual dentro de ella.

En el método map(), utiliza el mismo procedimiento que se muestra en la sección anterior para tomar cada palabra individualmente, poner en mayúscula la primera letra y devolver el resto de la palabra.

let mayusSplitAprendeAProgramar = splitAprendeAProgramar.map(palabra => {
    return palabra[0].toUpperCase() + palabra.slice(1);
})

console.log(mayusSplitAprendeAProgramar);
//['Aprende', 'A', 'Programar', 'Gratis', 'Con', 'FreeCodeCamp']

La primera letra de cada palabra ahora está en mayúscula.

Todo lo que queda ahora es volver a combinar las palabras del arreglo en una sola oración.

Para eso, usa el método join() y pasa un espacio como argumento.

let NuevoAprendeAProgramar = mayusSplitAprendeAProgramar.join(" ");

console.log(NuevoAprendeAProgramar);
//Aprende A Programar Gratis Con FreeCodeCamp

Como se muestra en la sección anterior, también puede crear una función que combine todos estos pasos. Entonces podrá pasar como argumento cualquier cadena y cada primera palabra en ella estará en mayúsculas.

function mayusPrimeraLetraDeOracion(oracion) {
    let palabras = oracion.split(" ").map(palabra => {
        return palabra[0].toUpperCase() + palabra.slice(1);
    })
    return palabras.join(" ");
}

console.log(mayusPrimeraLetraDeOracion("estoy aprendiendo a programar"));
//Estoy Aprendiendo A Codificar

Conclusión

¡Y ahí lo tienes! Así es como se utilizan los métodos toLowerCase() y toUpperCase() en JavaScript.

Aprendió a poner en mayúscula la primera letra de una palabra y a poner en mayúscula la primera letra de cada palabra en una oración.

Si desea aprender JavaScript y obtener una mejor comprensión del idioma, freeCodeCamp tiene una Certificación JavaScript gratuita.

Comenzará desde lo básico como un principiante absoluto en el lenguaje y luego avanzará a materias más complejas, como programación orientada a objetos, programación funcional, estructuras de datos, algoritmos y técnicas de depuración útiles.

Al final, creará cinco proyectos para poner en práctica sus habilidades.

¡Gracias por leer y feliz aprendizaje!