En este artículo vamos a ver cómo podemos cambiar una cadena de texto para que sus letras se muestren en mayúscula o en minúscula. Para esto podemos emplear los métodos toUpperCase() y toLowerCase(), los cuáles se utilizan para transformar todos los caracteres de una cadena en mayúsculas y minúsculas, respectivamente, y están disponibles en objetos de tipo String y en las cadenas de tipo primitivo.
En el siguiente ejemplo vamos a convertir todos los caracteres de una cadena de texto a mayúsculas:
<p id="demo"></p>
<script>
let text = "Hola mundo!";
let result = text.toUpperCase();
document.getElementById("demo").innerHTML = result;
</script>
See the Pen Convertir una cadena de texto a mayúsculas by simplicitytree (@simplicitytree) on CodePen.
En este otro ejemplo vamos a transformar la cadena de texto en minúsculas:
<p id="demo"></p>
<script>
let text = "HOLA MUNDO!";
let result = text.toLowerCase();
document.getElementById("demo").innerHTML = result;
</script>
See the Pen Convertir una cadena de texto a minúsculas by simplicitytree (@simplicitytree) on CodePen.
Si por alguna razón deseamos tener en cuenta la configuración local de un idioma en concreto, debemos utilizar los métodos toLocaleUpperCase() o toLocaleLowerCase() debido a que en algunos idiomas la correspondencia entre minúsculas y mayúsculas no es siempre la misma.
En este ejemplo utilizamos el método toLocaleUpperCase() para convertir todos los caracteres de una cadena en mayúscula aplicando la configuración local del idioma (español, en este caso):
<p id="demo"></p>
<script>
let text = "Hola mundo!";
let result = text.toLocaleUpperCase('es');
document.getElementById("demo").innerHTML = result;
</script>
En este otro ejemplo utilizamos el método toLocaleLowerCase() para convertir todos los caracteres de una cadena en mayúscula aplicando la configuración local del idioma:
<p id="demo"></p>
<script>
let text = "HOLA MUNDO!";
let result = text.toLocaleLowerCase(es);
document.getElementById("demo").innerHTML = result;
</script>
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024