Saltar al contenido principal

Strings: Introducción a las cadenas

Hasta ahora hemos trabajado con diferentes tipos de datos, como números o valores booleanos. Sin embargo, uno de los tipos de datos más utilizados en cualquier programa es el String.

Un String (o cadena de texto) es una secuencia de caracteres que representa texto.

Gracias a los Strings podemos almacenar nombres, direcciones, mensajes, correos electrónicos, contraseñas, descripciones de productos y, en general, cualquier información formada por texto.

Explicación​

Piensa en una aplicación de mensajería como WhatsApp o Telegram.

Cada mensaje que envías es un texto.

El nombre de un contacto también es un texto.

El estado de una conversación es un texto.

Incluso la mayoría de los botones que aparecen en una página web muestran texto.

Todo ese contenido se almacena utilizando Strings.

Por ejemplo, el nombre de una persona podría almacenarse así:

const nombre = "Laura";

O el título de un libro:

const titulo = "Aprendiendo JavaScript";

Aunque nosotros vemos palabras y frases, para JavaScript un String no deja de ser una sucesión ordenada de caracteres.

Por ejemplo, la palabra:

JavaScript

Está formada por los siguientes caracteres:

J  a  v  a  S  c  r  i  p  t

Cada uno de ellos ocupa una posición dentro de la cadena.

Esto será muy importante cuando aprendamos a acceder a caracteres individuales.

¿Qué puede contener un String?​

Un String puede contener prácticamente cualquier carácter.

Por ejemplo:

Texto.

const ciudad = "Valencia";

Números escritos como texto.

const codigoPostal = "46001";

Símbolos.

const moneda = "€";

Espacios.

const saludo = "Hola mundo";

Incluso una combinación de todos ellos.

const direccion = "Calle Mayor 25, 2ºA";

Es importante entender que todo sigue siendo texto, aunque algunos caracteres sean números.

Por ejemplo:

const edad = "25";

No es un número.

Es un String formado por los caracteres "2" y "5".

Los Strings son secuencias de caracteres​

Como hemos visto anteriormente, un String está formado por caracteres colocados uno detrás de otro.

Por ejemplo:

const palabra = "Java";

Visualmente podemos imaginarla así:

CarácterJava
Posición0123

Observa que las posiciones empiezan en 0, no en 1. Esto ocurre SIEMPRE, en JavaScript se considera que se empieza a contar opr el 0.

Esto ocurre en JavaScript y en la mayoría de lenguajes de programación.

Más adelante aprenderemos a utilizar estos índices para acceder a cada carácter.

Longitud de un String​

Todos los Strings tienen una propiedad llamada length.

Esta propiedad indica cuántos caracteres contiene la cadena.

const palabra = "JavaScript";

console.log(palabra.length);

Salida:

10

Cada letra cuenta como un carácter.

Los espacios también cuentan.

const saludo = "Hola mundo";

console.log(saludo.length);

Salida:

10

En este caso hay:

  • 4 letras de "Hola".
  • 1 espacio.
  • 5 letras de "mundo".

Total: 10 caracteres.

Incluso un String vacío tiene una longitud.

const texto = "";

console.log(texto.length);

Salida:

0

La propiedad length será una de las herramientas que más utilizarás al trabajar con texto.

Sintaxis​

Crear un String es tan sencillo como asignar un texto a una variable.

const nombre = "Ana";

También podemos utilizar comillas simples.

const ciudad = 'Madrid';

Consultar su longitud.

console.log(mensaje.length);

Errores frecuentes​

Pensar que un número escrito entre comillas es un número​

const edad = "30";

Aunque contiene cifras, sigue siendo texto.

Olvidar las comillas​

const nombre = Carlos;

Esto producirá un error porque JavaScript intentará buscar una variable llamada Carlos.

La forma correcta es:

const nombre = "Carlos";

Acceso a ciertos caracteres del String

Ahora que ya sabemos qué es un String y cómo se crea, llega el momento de aprender a trabajar con su contenido.

En muchas ocasiones no necesitaremos el texto completo, sino únicamente uno de sus caracteres.

Por ejemplo:

  • Obtener la primera letra del nombre de un usuario.
  • Mostrar la inicial de un apellido.
  • Comprobar cuál es el último carácter de una contraseña.
  • Leer un código carácter por carácter.

Índices​

Un String es una secuencia ordenada de caracteres.

Cada carácter ocupa una posición dentro de la cadena.

Estas posiciones reciben el nombre de índices.

Es importante recordar que los índices empiezan en 0, no en 1.

Por ejemplo, la palabra:

JavaScript

Puede representarse así:

Índice0123456789
CarácterJavaScript

Gracias a estos índices podemos acceder a cualquier carácter de la cadena.

JavaScript ofrece tres formas principales de hacerlo:

  • Mediante corchetes ([]).
  • Utilizando charAt().
  • Utilizando at().

Cada una tiene sus ventajas y situaciones en las que resulta más útil.

Acceder mediante corchetes ([])​

Es la forma más utilizada actualmente.

Solo necesitamos indicar el índice del carácter entre corchetes.

Por ejemplo, queremos saber cuál es la primera letra de la cadena "JavaScript":

const lenguaje = "JavaScript";

console.log(lenguaje[0]);

Salida:

J

También podemos acceder a cualquier otra posición, por ejemplo la quinta letra.

const lenguaje = "JavaScript";

console.log(lenguaje[4]);

Salida:

S

O incluso al último carácter.

const lenguaje = "JavaScript";

console.log(lenguaje[9]);

Salida:

t

Importante: tener siempre en mente que se empieza a contar desde 0, por lo que palabra[2], NO es la segunda letra sino la tercera.

En definitiva, la sintaxis al usar corchetes ([]) es palabra[indice].​

Utilizar una variable como índice​

El índice no tiene por qué escribirse directamente.

También puede almacenarse en una variable.

const palabra = "Programación";
const posicion = 3;

console.log(palabra[posicion]);

Salida:

g

Esto resulta especialmente útil cuando recorremos un String utilizando un bucle (lo veremos en el capítulo de Bucles).

¿Qué ocurre si el índice no existe?​

Si intentamos acceder a una posición que no existe, JavaScript devolverá undefined.

const nombre = "Ana";

console.log(nombre[10]);

Salida:

undefined

Esto no produce un error, pero debemos tenerlo en cuenta para evitar comportamientos inesperados.

El método charAt()​

Antes de que existieran los corchetes, la forma habitual de acceder a un carácter era mediante el método charAt().

Su funcionamiento es muy sencillo. Sigue la misma lógica que los corchetes ([]), donde indicamos el índice o posición de la letra en la palabra, siempre teniendo en cuenta que empieza a contar en 0.

const ciudad = "Barcelona";

console.log(ciudad.charAt(0));

Salida:

B

Otro ejemplo.

console.log(ciudad.charAt(4));

Salida:

e

Actualmente se utiliza menos que los corchetes, pero todavía es frecuente encontrarlo en proyectos antiguos.

En definitiva, la sintaxis al usar charAt() es palabra.charAt(4).​

¿Qué ocurre si la posición no existe?​

Existe una diferencia importante respecto a los corchetes.

const ciudad = "Barcelona";

console.log(ciudad.charAt(20));

Salida:

charAt() devuelve una cadena vacía ("") cuando el índice no existe.

En cambio, los corchetes devuelven undefined.

El método at()​

El método at() es una incorporación más reciente a JavaScript.

Su funcionamiento es muy parecido al de los corchetes y el charAt()..

const pais = "España";

console.log(pais.at(0));

Salida:

E

También podemos acceder a cualquier otra posición.

console.log(pais.at(3));

Salida:

a

La gran ventaja de at()​

La principal ventaja de at() es que permite utilizar índices negativos. Si escribimos un índice negativo es como si empezásemos a contar desde el final de la cadena, por lo que:

  • último índice: -1
  • penúltimo índice: -2
  • antepenúltimo índice: -3
  • etc

Por ejemplo, para obtener el último carácter de un String.

const lenguaje = "JavaScript";

console.log(lenguaje.at(-1));

Salida:

t

Con los corchetes esto no funciona.

const lenguaje = "JavaScript";

console.log(lenguaje[-1]);

Salida:

undefined

Por eso, cuando necesitamos acceder desde el final de una cadena, at() suele ser la opción más cómoda.

¿Qué método debería utilizar?​

En la mayoría de situaciones encontrarás estas recomendaciones.

MétodoCuándo utilizarlo
[]Para acceder a posiciones concretas. Es la opción más utilizada.
charAt()Principalmente en código antiguo.
at()Cuando quieras utilizar índices negativos o acceder cómodamente desde el final del String.

En proyectos modernos lo más habitual es combinar [] y at().

Resumen sintaxis​

Acceder mediante corchetes.

cadena[indice]

Acceder utilizando charAt().

cadena.charAt(indice)

Acceder utilizando at().

cadena.at(indice)

Ejemplos​

Ejemplo 1. Mostrar la primera letra de un nombre​

const nombre = "Daniel";

console.log(nombre[0]);

Salida:

D

Ejemplo 2. Mostrar la última letra de una palabra​

const palabra = "Montaña";

console.log(palabra.at(-1));

Salida:

a

Ejemplo 3. Obtener la inicial de un producto​

const producto = "Portátil";

console.log(producto[0]);

Salida:

P

Ejemplo 4. Mostrar el tercer carácter​

const pelicula = "Avatar";

console.log(pelicula[2]);

Salida:

a

Errores frecuentes​

Pensar que el primer índice es el 1​

const nombre = "Ana";

console.log(nombre[1]);

Salida:

n

El índice 0 corresponde al primer carácter.

Intentar acceder a una posición inexistente​

const nombre = "Luis";

console.log(nombre[20]);

Salida:

undefined

Siempre debemos comprobar que el índice existe.

Utilizar índices negativos con corchetes​

const palabra = "Java";

console.log(palabra[-1]);

Salida:

undefined

Si queremos acceder desde el final es preferible utilizar at().

Buenas prácticas​

  • Utiliza los corchetes ([]) para acceder a posiciones concretas.
  • Utiliza at() cuando necesites acceder desde el final del String.
  • Evita utilizar índices que puedan quedar fuera de la longitud de la cadena.
  • Recuerda que el primer índice siempre es el 0.

Resumen​

Cada carácter de un String ocupa una posición llamada índice.

JavaScript permite acceder a estos caracteres mediante:

  • Los corchetes ([]).
  • El método charAt().
  • El método at().