¿Quiéres saber cómo convertir un string a mayúsculas en JavaScript? En esta entrada te explico todo lo que debes conocer para aplicarlo en tus proyectos de desarrollo web.
¡Empezamos!
Índice de contenidos
En el desarrollo de aplicaciones web, es común encontrarse con la necesidad de convertir un String (cadena de caracteres) a mayúsculas. Ya sea para mostrar un texto en letras mayúsculas o para comparar cadenas sin tener en cuenta las diferencias de capitalización, JavaScript proporciona diversas formas de implementar esta funcionalidad.
En este artículo, veremos algunas funciones existentes para realizar esta conversión: el método toUpperCase(), el método toLocaleUpperCase(), el uso combinado de los métodos charCodeAt() y fromCharCode(), así como el uso de los métodos map() y join().
Una de las formas más sencillas de convertir un String a mayúsculas en JavaScript es utilizando el método toUpperCase(). Este método forma parte del prototipo de objetos String y se encarga de devolver una nueva cadena con todos los caracteres en mayúsculas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Convertir String a Mayúsculas con JavaScript</title>
</head>
<body>
<script>
let miTexto = "Caronte Web Studio";
console.log(miTexto);
let miTextoMayusculas = miTexto.toUpperCase();
console.log(miTextoMayusculas);
</script>
</body>
</html>El ejemplo anterior simplemente declara una variable con el texto ‘Caronte Web Studio’, lo muestra en consola y después declara una segunda variable que convierte dicho texto a mayúsculas. Se trata de la forma más sencilla de convertir un string a mayúsculas en JavaScript.
Otro método útil para convertir un String a mayúsculas en JavaScript es el método toLocaleUpperCase(). Al igual que toUpperCase(), este método también forma parte del prototipo de objetos string y se encarga de devolver una nueva cadena con todos los caracteres en mayúsculas. Sin embargo, toLocaleUpperCase() tiene en cuenta las reglas de mayúsculas y minúsculas específicas de la configuración regional del lenguaje.
El funcionamiento básico de toLocaleUpperCase() es muy parecido al de toUpperCase().
En este ejemplo, utilizamos el método toLocaleUpperCase() de manera similar a toUpperCase(). La cadena «mitexto» se convierte a mayúsculas según las reglas regionales y se guarda en la variable «miTextoMayusculas». Al mostrar en consola «miTextoMayusculas», obtenemos la salida «CARONTE WEB STUDIO».
Puedes probar el código anterior y observarás que el resultado es el mismo que en el caso anterior. Sin embargo, este método tiene una ventaja que se explica a continuación.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Convertir String a Mayúsculas con JavaScript</title>
</head>
<body>
<p id="miParrafo"></p>
<script>
let miTexto = "Caronte Web Studio";
console.log(miTexto);
let miTextoMayusculas = miTexto.toLocaleUpperCase();
console.log(miTextoMayusculas);
document.getElementById("miParrafo").innerHTML = miTextoMayusculas;
</script>
</body>
</html>Lo mejor del del método toLocaleUpperCase() es que puede manejar caracteres acentuados y otros caracteres especiales según las reglas del idioma correspondiente. Veamos un ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Convertir String a Mayúsculas con JavaScript</title>
</head>
<body>
<p id="miParrafo"></p>
<script>
let miTexto = "el mejor café del mundo";
console.log(miTexto);
let miTextoMayusculas = miTexto.toLocaleUpperCase();
console.log(miTextoMayusculas);
</script>
</body>
</html>En este caso, la cadena texto contiene la palabra «café» con un acento. Al utilizar toLocaleUpperCase(), se respeta el acento y se obtiene la cadena en mayúsculas «EL MEJOR CAFÉ DEL MUNDO».
Al igual que con toUpperCase(), el método toLocaleUpperCase() no modifica la cadena original, sino que devuelve una nueva cadena en mayúsculas. Por lo tanto, debemos asignar el resultado a una nueva variable si deseamos conservar el string original.
Otra forma eficiente de convertir un String a mayúsculas en JavaScript es utilizando los métodos map() y join(). Estos métodos permiten realizar transformaciones en los elementos de un array, en este caso, en los caracteres del string. Por ejemlo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Convertir String a Mayúsculas con JavaScript</title>
</head>
<body>
<p id="miParrafo"></p>
<script>
let miTexto = "el mejor café del mundo";
console.log(miTexto);
let miTextoMayusculas = miTexto.split('').map(char => char.toUpperCase()).join('');
console.log(miTextoMayusculas);
</script>
</body>
</html>En este ejemplo, hemos utilizado el método split() para dividir el string «miTexto» en un array de caracteres. Luego, aplicamos el método map() en cada uno de los caracteres del array, utilizando una función de flecha (char => char.toUpperCase()) para convertir cada carácter a mayúsculas. Finalmente, utilizamos el método join() para unir los caracteres del array resultante en un nuevo string «miTextoMayusculas».
Para ir concluyendo, te voy a mostrar un ejemplo más avanzado en el que se emplean dos botones para cambiar un texto de mayúsculas a minúsculas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Convertir String a Mayúsculas con JavaScript</title>
</head>
<body>
<p id="miParrafo">El mejor café del mundo</p>
<button id="botonMayus">Mayus</button>
<button id="botonMinus">Minus</button>
<script>
let miParrafo = document.getElementById("miParrafo");
let miString = miParrafo.textContent;
let botonMayus = document.getElementById("botonMayus");
let botonMinus = document.getElementById("botonMinus");
botonMayus.addEventListener("click", function(){
let miParrafoMayus = miString.toLocaleUpperCase();
miParrafo.innerHTML = miParrafoMayus;
})
botonMinus.addEventListener("click", function(){
let miParrafoMinus = miString.toLocaleLowerCase();
miParrafo.innerHTML = miParrafoMinus;
})
</script>
</body>
</html>En este código, se crea una página HTML con un párrafo <p> que contiene el texto «El mejor café del mundo». También se agregan dos botones: uno con el id «botonMayus» y otro con el id «botonMinus».
Dentro de la etiqueta <script>, se realiza lo siguiente:
En resumen, este código implementa una funcionalidad que permite convertir el texto de un párrafo de mayúsculas a minúsculas y viceversa mediante el uso de los métodos toLocaleUpperCase() y toLocaleLowerCase() respectivamente.
Espero que este artículo te haya servido de ayuda para aprender cómo convertir un string a mayúsculas en JavaScript con diferentes métodos. Te recomiendo copiar los códigos explicados en este artículo y realizar pruebas con ellos para terminar de entenderlos.
Si tienes dudas, ¡puedes dejarme un comentario!
¡Hasta la próxima!
Desde hace unas semanas, los rumores eran cada vez más fuertes, y ahora ya es… Leer más
El entorno B2B (Business to Business) en España vive una etapa de profunda transformación impulsada… Leer más
Qué es el SEO y por qué es importante para tu empresa. En este artículo… Leer más
El 13 de marzo de 2025, Google anunció el despliegue de su primera actualización central… Leer más
La migración SEO es una operación crítica para una web que fácilmente se puede convertir… Leer más
En el ámbito del SEO, uno de los aspectos clave es la gestión de enlaces… Leer más