• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 6/12/20

Juega con las cadenas de caracteres

Log in or subscribe for free to enjoy all this course has to offer!

 

Como ya sabes, el tipo de dato cadena de caracteres permite representar texto haciendo uso de las comillas, ya sean simples o dobles.

En JavaScript las cadenas de caracteres son también objetos. En muchos programas, tendrás que manipular cadenas de caracteres y deberás harás uso de las propiedades y métodos del objeto texto. En este capítulo veremos cómo hacerlo.

Las cadenas de caracteres son objetos

Las cadenas son también objetos. Aunque para crear una cadena no haga falta utilizar la sintaxis que hemos visto anteriormente para la creación de un objeto. Por el momento, piensa que al declarar una cadena, JavaScript crea un objeto cadena que tiene diversas propiedades predefinidas.

Por lo tanto, puedes utilizar la misma sintaxis que con cualquier objeto para acceder a sus propiedades. Creas una cadena de texto y con un punto, puedes acceder a sus propiedades.

Observa el siguiente ejemplo.

Propiedades predefinidas del objeto cadena de texto
Propiedades predefinidas del objeto cadena de texto

En la consola del navegador, escribo una cadena de texto y, con el.,  trato de acceder a sus propiedades. Para facilitarme la vida, el navegador me muestra la lista de todas las propiedades presentes en el objeto. De momento olvídate de las propiedades que comienzan por__ y céntrate en el resto. Todas ellas son propiedades que podemos utilizar para manipular nuestra cadena de texto.

 Veamos las más importantes.

Obtener la longitud de una cadena 

Para obtener la longitud de una cadena (el número de caracteres que la componen), disponemos de la propiedad length. La propiedad  length  retorna el número de caracteres que contiene una cadena. La palabra "hola" está compuesta de 4 caracteres, mientras que si pasamos una cadena de texto vacía, el número será 0.

console.log("hola".length); // Muestra 4
console.log("".length); // Muestra 0

También podemos, por ejemplo, guardar en una variable una cadena de texto y acceder a sus propiedades. Luego podemos guardar en otra variable el valor de la propiedadlength . Observa el ejemplo a continuación:

var cadena = "lunes :(";
var longitudCadena = cadena.length; // longitudCadena contiene el valor 8 (el espacio en blanco también cuenta)
console.log(longitudCadena); // Muestra 8

 

Convertir una cadena en mayúsculas o minúsculas

Un valor de tipo cadena puede ser convertido en minúsculas utilizando el métodotoLowerCase(). De la misma forma, tenemos el métodotoUpperCase()para convertir una cadena a mayúsculas. Estas operaciones devuelven una nueva cadena.

var cadenaInicial = "JavaScript";
var cadenaEnMinusculas = cadenaInicial.toLowerCase();
console.log(cadenaEnMinusculas); // Muestra "javascript"
var cadenaEnMayusculas = cadenaInicial.toUpperCase();
console.log(cadenaEnMayusculas); // Muestra "JAVASCRIPT"

 

Cadenas de caracteres en minúsculas y mayúsculas
Cadenas de caracteres en minúsculas y mayúsculas

 

 

Comparar dos cadenas 

Es un buen momento para introducir el operador de comparación=== . La comparación entre dos cadenas de caracteres se efectúa con dicho operador. Si comparas dos cadenas de caracteres, obtienes un valor booleano verdadero si las dos cadenas son iguales, o falso si no lo son.

var cadena1 = "hola";
var cadena2 = "buenas";
console.log(cadena1 === cadena2); // Muestra false

var cadena3 = "verano";
var cadena4 = "verano";
console.log(cadena3 === cadena4); // Muestra true

La comparación entre dos cadenas es sensible a mayúsculas y minúsculas (lo que se conoce en inglés por case sensitive). Si comparas dos cadenas de caracteres con el mismo texto pero una de ellas con alguna letra en mayúscula y la otra no, el resultado de la comparación será falso.

console.log("Hola" === "hola"); // Muestra false a causa de la H mayúscula

 

 Acceder a un caracter de una cadena

Existen dos posibilidades para acceder a un caracter de una cadena:

var cadena1 = "primavera";
// Las dos formas devuelven el mismo resultado
console.log(cadena1[0]); // Muestra p
console.log(cadena1.charAt(0)); // Muestra p
console.log(cadena1[4]); // Muestra a
console.log(cadena1.charAt(4)); // Muestra a
  • Se puede utilizar el métodocharAt(index)  en el que se pasa como parámetro un número de índice determinado.

  • También es posible utilizar corchetes[index] indicando el número de índice deseado. 

 Yo personalmente prefiero utilizar los corchetes, me parece más sencillo, pero ambas formas son perfectamente válidas.

¿Cómo podemos calcular el índice del último caracter de una cadena?

Hemos visto anteriormente el método length, que calcula la longitud (el número de caracteres) de una cadena. Por lo tanto, para calcular el último índice de una cadena sólo tenemos que hallar su longitud y restarle 1. Se debe restar 1 ya que el índice empieza a contar a partir de 0. 

var cadena = "primavera";
var longitudCadena = cadena.length;
console.log(cadena[longitudCadena - 1]); // Muestra el últim caracter->a

 

 Mostrar todos los caracteres contenidos en una cadena

Es importante que vayas poco a poco combinando conceptos nuevos con otros que ya conoces. Por ello, te propongo el siguiente ejemplo.

Queremos mostrar por consola cada uno de los caracteres que componen una cadena de texto. Sabemos acceder a los diferentes caracteres a través del índice de la siguiente forma:cadena[índice].  

Una solución posible sería la de acceder una a una a todas las letras de la cadena manualmente como puedes ver a continuación.

var concat = "Se llama concatenación a la unión de dos cadenas de caracteres a través del operador +";

console.log(concat[0]);
console.log(concat[1]);
console.log(concat[2]);
console.log(concat[3]);
console.log(concat[4]);
// ...

El problema de esta solución es que si la cadena estuviera compuesta por miles de caracteres, esta solución no sería viable. Además, ya sabes que repetir código siempre es una mala idea.

Piénsalo bien, sabes acceder a cada uno de los caracteres de la cadena a través del índice. Y tienes que mostrar por pantalla todos los caracteres entre 0 y longitud - 1. Por qué no utilizar un buclefor  que recorra la cadena de caracteres un número de veces igual a la longitud de la cadena - 1. Por cada vuelta del bucle, mostrará por pantalla el caracter de la cadena correspondiente a un determinado índice.    

Obtendremos el mismo resultado que de forma manual, pero nuestro código se adapta a cualquier cadena de caracter sin importar su longitud.

var concat = "Se llama concatenación a la unión de dos cadenas de caracteres a través del operador +";

for (var i = 0; i < concat.length; i++) {
  console.log(concat[i]); // Muestra una por una las letras de la cadena
}

  

Conclusión

Hasta ahora hemos visto algunas de los métodos que ofrece JavaScript para manipular cadenas de caracteres, aunque existen muchas otras. En este enlace puedes ver las demás. Juega con las cadenas de caracteres y utiliza otros métodos, además de los aquí vistos.

 

Practica tú mismo

Ya sabes que la mejor forma de aprender es haciendo las cosas por ti mismo. Te propongo unos cuentas ejercicios con los que practicar lo visto en este capítulo y en los anteriores. Haz uso de las funciones y llámalas haciendo uso deconsole.log()para ver el resultado por la consola del navegador.

Información sobre una palabra

Crea un programa que pregunte al usuario de introducir una palabra y que muestre por pantalla la siguiente información sobre la palabra elegida. Este sería el resultado para la palabra "javascript".

Resultado de llamar a las tres funciones
Resultado de llamar a las tres funciones

 

Cuenta el número de vocales

Completa el programa añadiendo una nueva función que toma la palabra introducida por el usuario y cuenta el número de vocales.

La función contarVocales cuenta el número de vocales en una palabra
La función contarVocales cuenta el número de vocales en una palabra

Invierte la palabra

Añade otra función que tome como parámetro la palabra introducida por el usuario y retorne la palabra escrita a la inversa. 

La función invertirCadena() invierte la palabra
La función invertirCadena() invierte la palabra

 

Palíndromo

Añade una nueva función que haga uso de la función invertirCadena()  para verificar si es un palíndromo. 

La función palindromo compara la cadena introducida con la salida de la función invertirCadena()
La función palindromo compara la cadena introducida con la salida de la función invertirCadena()

 

Solución de los ejercicios

Intenta primero resolver los ejercicios propuestos por ti mismo. Si ves que te bloqueas, suele venir bien cambiar de actividad y volver a intentarlo más adelante. Si no lo consigues, puedes consultar las soluciones aquí.

 

Example of certificate of achievement
Example of certificate of achievement