{"id":14910,"date":"2023-07-11T13:05:00","date_gmt":"2023-07-11T11:05:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=14910"},"modified":"2023-07-11T12:02:00","modified_gmt":"2023-07-11T10:02:00","slug":"convertir-un-string-a-mayusculas-en-javascript","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/convertir-un-string-a-mayusculas-en-javascript\/","title":{"rendered":"Convertir un String a may\u00fasculas en JavaScript"},"content":{"rendered":"\n

\u00bfQui\u00e9res saber c\u00f3mo convertir un string a may\u00fasculas en JavaScript<\/strong>? En esta entrada te explico todo lo que debes conocer para aplicarlo en tus proyectos de desarrollo web<\/a>.<\/p>\n\n\n\n

\u00a1Empezamos!<\/p>\n\n\n\n

Introducci\u00f3n<\/h2>\n\n\n\n
\n
\n
\"may\u00fasculas<\/figure>\n<\/div>\n\n\n\n
\n

En el desarrollo de aplicaciones web, es com\u00fan encontrarse con la necesidad de convertir un String (cadena de caracteres) a may\u00fasculas<\/strong>. Ya sea para mostrar un texto en letras may\u00fasculas o para comparar cadenas sin tener en cuenta las diferencias de capitalizaci\u00f3n, JavaScript proporciona diversas formas de implementar esta funcionalidad.<\/p>\n\n\n\n

En este art\u00edculo, veremos algunas funciones existentes para realizar esta conversi\u00f3n: el m\u00e9todo toUpperCase()<\/em>, el m\u00e9todo toLocaleUpperCase()<\/em>, el uso combinado de los m\u00e9todos charCodeAt()<\/em> y fromCharCode()<\/em>, as\u00ed como el uso de los m\u00e9todos map()<\/em> y join()<\/em><\/strong>.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Convertir un String a may\u00fasculas en JavaScript con el M\u00e9todo toUpperCase()<\/h2>\n\n\n\n

Una de las formas m\u00e1s sencillas de convertir un String a may\u00fasculas en JavaScript es utilizando el m\u00e9todo toUpperCase()<\/em><\/strong>. Este m\u00e9todo forma parte del prototipo de objetos String<\/a> y se encarga de devolver una nueva cadena con todos los caracteres en may\u00fasculas.<\/p>\n\n\n\n

\n
\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Convertir String a May\u00fasculas con JavaScript<\/title>\n<\/head>\n<body>\n    <script>\n        let miTexto = \"Caronte Web Studio\";\n        console.log(miTexto);\n        let miTextoMayusculas = miTexto.toUpperCase();\n        console.log(miTextoMayusculas);   \n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n\n\n\n
\n
\"convertir<\/figure>\n<\/div>\n<\/div>\n\n\n\n
El ejemplo anterior simplemente declara una variable con el texto ‘Caronte Web Studio’, lo muestra en consola y despu\u00e9s declara una segunda variable que convierte dicho texto a may\u00fasculas. Se trata de la forma m\u00e1s sencilla de convertir un string a may\u00fasculas en JavaScript<\/strong>.<\/p>\n\n\n\n
Convertir un String a may\u00fasculas en JavaScript con el M\u00e9todo toLocaleUpperCase()<\/h2>\n\n\n\n
Otro m\u00e9todo \u00fatil para convertir un String a may\u00fasculas en JavaScript es el m\u00e9todo toLocaleUpperCase()<\/em><\/strong>. Al igual que toUpperCase()<\/em>, este m\u00e9todo tambi\u00e9n forma parte del prototipo de objetos string<\/em> y se encarga de devolver una nueva cadena con todos los caracteres en may\u00fasculas. Sin embargo, toLocaleUpperCase()<\/em> tiene en cuenta las reglas de may\u00fasculas y min\u00fasculas espec\u00edficas de la configuraci\u00f3n regional<\/strong> del lenguaje.<\/p>\n\n\n\n
Ejemplo b\u00e1sico<\/h3>\n\n\n\n
\n
\n
El funcionamiento b\u00e1sico de toLocaleUpperCase()<\/em> es muy parecido al de toUpperCase()<\/em>.<\/p>\n\n\n\n
En este ejemplo, utilizamos el m\u00e9todo toLocaleUpperCase()<\/em> de manera similar a toUpperCase()<\/em>. La cadena \u00abmitexto\u00bb se convierte a may\u00fasculas seg\u00fan las reglas regionales y se guarda en la variable \u00abmiTextoMayusculas\u00bb. Al mostrar en consola \u00abmiTextoMayusculas\u00bb, obtenemos la salida \u00abCARONTE WEB STUDIO\u00bb.<\/p>\n\n\n\n
Puedes probar el c\u00f3digo anterior y observar\u00e1s que el resultado es el mismo que en el caso anterior<\/strong>. Sin embargo, este m\u00e9todo tiene una ventaja que se explica a continuaci\u00f3n.<\/p>\n<\/div>\n\n\n\n
\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Convertir String a May\u00fasculas con JavaScript<\/title>\n<\/head>\n<body>\n    <p id=\"miParrafo\"><\/p>\n    <script>\n        let miTexto = \"Caronte Web Studio\";\n        console.log(miTexto);\n        let miTextoMayusculas = miTexto.toLocaleUpperCase();\n        console.log(miTextoMayusculas);\n        document.getElementById(\"miParrafo\").innerHTML = miTextoMayusculas;\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
Convertir un String con caracteres acentuados<\/h3>\n<\/div>\n<\/div>\n\n\n\n
Lo mejor del del m\u00e9todo toLocaleUpperCase()<\/em> es que puede manejar caracteres acentuados y otros caracteres especiales<\/strong> seg\u00fan las reglas del idioma correspondiente. Veamos un ejemplo:<\/p>\n\n\n\n
\n
\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Convertir String a May\u00fasculas con JavaScript<\/title>\n<\/head>\n<body>\n    <p id=\"miParrafo\"><\/p>\n    <script>\n        let miTexto = \"el mejor caf\u00e9 del mundo\";\n        console.log(miTexto);\n        let miTextoMayusculas = miTexto.toLocaleUpperCase();\n        console.log(miTextoMayusculas);\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n\n\n\n
\n
\"pasar<\/figure>\n<\/div>\n<\/div>\n\n\n\n
En este caso, la cadena texto contiene la palabra \u00abcaf\u00e9\u00bb con un acento. Al utilizar toLocaleUpperCase()<\/em>, se respeta el acento y se obtiene la cadena en may\u00fasculas \u00abEL MEJOR CAF\u00c9 DEL MUNDO\u00bb.<\/p>\n\n\n\n
Al igual que con toUpperCase()<\/em>, el m\u00e9todo toLocaleUpperCase()<\/em> no modifica la cadena original, sino que devuelve una nueva cadena en may\u00fasculas. Por lo tanto, debemos asignar el resultado a una nueva variable si deseamos conservar el string<\/em> original<\/strong>.<\/p>\n\n\n\n
Convertir un String a may\u00fasculas en JavaScript con el M\u00e9todo map() y join()<\/h2>\n\n\n\n
Otra forma eficiente de convertir un String a may\u00fasculas en JavaScript es utilizando los m\u00e9todos map()<\/em> y join()<\/em><\/strong>. Estos m\u00e9todos permiten realizar transformaciones en los elementos de un array, en este caso, en los caracteres del string<\/em>. Por ejemlo:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Convertir String a May\u00fasculas con JavaScript<\/title>\n<\/head>\n<body>\n    <p id=\"miParrafo\"><\/p>\n    <script>\n        let miTexto = \"el mejor caf\u00e9 del mundo\";\n        console.log(miTexto);\n        let miTextoMayusculas = miTexto.split('').map(char => char.toUpperCase()).join('');\n        console.log(miTextoMayusculas);\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
En este ejemplo, hemos utilizado el m\u00e9todo split()<\/em><\/strong> para dividir el string<\/em> \u00abmiTexto\u00bb en un array de caracteres. Luego, aplicamos el m\u00e9todo map()<\/em><\/strong> en cada uno de los caracteres del array, utilizando una funci\u00f3n de flecha<\/a> (char => char.toUpperCase()<\/em>)<\/strong> para convertir cada car\u00e1cter a may\u00fasculas. Finalmente, utilizamos el m\u00e9todo join()<\/em> para unir los caracteres del array resultante en un nuevo string<\/em> \u00abmiTextoMayusculas\u00bb.<\/p>\n\n\n\n
Ejemplo Avanzado<\/h2>\n\n\n\n
\n
\n
Para ir concluyendo, te voy a mostrar un ejemplo m\u00e1s avanzado en el que se emplean dos botones para cambiar un texto de may\u00fasculas a min\u00fasculas<\/strong>.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Convertir String a May\u00fasculas con JavaScript<\/title>\n<\/head>\n<body>\n    <p id=\"miParrafo\">El mejor caf\u00e9 del mundo<\/p>\n    <button id=\"botonMayus\">Mayus<\/button>\n    <button id=\"botonMinus\">Minus<\/button>\n    <script>\n\n        let miParrafo = document.getElementById(\"miParrafo\");\n        let miString = miParrafo.textContent;\n        let botonMayus = document.getElementById(\"botonMayus\");\n        let botonMinus = document.getElementById(\"botonMinus\");\n        botonMayus.addEventListener(\"click\", function(){\n            let miParrafoMayus = miString.toLocaleUpperCase();\n            miParrafo.innerHTML = miParrafoMayus;\n        })\n        botonMinus.addEventListener(\"click\", function(){\n            let miParrafoMinus = miString.toLocaleLowerCase();\n            miParrafo.innerHTML = miParrafoMinus;\n        })\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n\n\n\n
\n
\"pasar<\/figure>\n<\/div>\n<\/div>\n\n\n\n
En este c\u00f3digo, se crea una p\u00e1gina HTML con un p\u00e1rrafo <p><\/em><\/strong> que contiene el texto \u00abEl mejor caf\u00e9 del mundo\u00bb. Tambi\u00e9n se agregan dos botones<\/strong>: uno con el id \u00abbotonMayus\u00bb y otro con el id \u00abbotonMinus\u00bb.<\/p>\n\n\n\n
Dentro de la etiqueta <script><\/em>, se realiza lo siguiente:<\/p>\n\n\n\n