Cadenas en JavaScript: Qué son y cómo se usan

En este tutorial vamos a explicar qué son las cadenas y cómo se utilizan en JavaScript. El tutorial está destinado aquellas personas que están aprendiendo a programar en JavaScript. Aprenderás a crear cadenas, a mostrar el contenido de las mismas, a concatenar cadenas y a almacenarlas en variables. Veremos también todos los tipos de sintaxis que se utilizan para declararlas.

Contenidos

1 Qué es una cadena
2 Cómo crear una cadena
3 Cómo mostrar una cadena
4 Cómo asignar cadenas a variables
5 Tipos de cadenas en JavaScript
6 Indexación de las cadenas
7 Longitud de las cadenas
8 Cómo escapar caracteres
9 Concatenación de cadenas
10 Cadenas multilínea
11 Transformación de cadenas
12 Métodos usados con cadenas
13 Finalizando

Qué es una cadena

Una cadena es tipo de dato primitivo que consiste en una secuencia de caracteres. Estos caracteres pueden ser letras, números o símbolos. Las cadenas son inmutables, por lo que no cambian con el tiempo.

Las cadenas se utilizan para mostrar textos o modificarlos, siendo estas operaciones fundamentales de casi todo lenguaje de programación. Es importante que no las confundas con las variables, ya que una cadena es el dato que puedes asignar a una variable y no la variable en sí misma, de ahí su inmutabilidad.

Cómo crear una cadena

En JavaScript existen tres métodos mediante los que puedes crear una cadena. Puedes crearlos en el interior de comillas simples , como en 'este texto', en el interior de comillas dobles, como en «este otro texto" y finalmente mediante comillas invertidas, como en `este texto`. Las comillas que uses para iniciar la cadena y para cerrarla deben ser del mismo tipo, aunque podrás crear cadenas usando todos los tipos de comillas en un mismo script.

Las cadenas que usan comillas simples y comillas dobles funcionan del mismo modo. No existe ninguna convención oficial acerca de qué tipo de comillas usar, aunque suelen usarse comillas simples siempre que sea posible, reservando habitualmente las comillas dobles para los atributos HTML en caso de que también uses este otro lenguaje. Pero lo más importante es que seas consistente en su uso:

// Comillas simples
'Este texto está declarado entre comillas simples.'

// Comillas dobles
"Este otro texto está declarado entre comillas dobles."

A diferencia de los dos casos anteriores, las cadenas declaradas con comillas funcionan de un modo distinto y reciben el nombre de template literals o plantillas literales. El funcionamiento base de las plantillas literales es idéntico al de las cadenas declaradas con comillas simples o comillas dobles:

`Este texto está declarado como una plantilla literal.`

Sin embargo, las plantillas literales disponen de muchas más posibilidades tanto al definir las cadenas como al trabajar con ellas. En este artículo veremos algunas de las más relevantes, aunque en caso de que al finalizar este artículo quieras saber cómo funcionan a fondo las plantillas literales, recuerda consultar esta guía.

A las cadenas declaradas en el código de les llama también literales de una cadena, e incluyen los símbolos con los que han sido declaradas. Por ejemplo, una cadena de cualquier tipo declarada en el código, ya esté declarada con comillas simples, dobles o invertidas, sería un literal:

'Esto es un texto'

Por otro lado, el valor del literal de la cadena anterior sería el texto en sí mismo:

Esto es un texto

Un literal de una cadena se corresponde con la cadena tal y como se muestra en el código, incluyendo las comillas usadas para definirla. Por otro lado, el valor de una cadena es el valor que se mostraría por pantalla en caso de mostrarse, sin comillas ni símbolos propios de JavaScript.

Cómo mostrar una cadena

El método más sencillo mediante el que puedes mostrar una cadena por pantalla con JavaScript consiste en mostrarlo por la consola usando el método console.log(), tal y como ves en este ejemplo:

console.log('Esta cadena se mostrará por la consola');

Otro método muy sencillo consiste en usar la función alert(), disponible en todos los navegadores:

alert('Esto es una cadena');

Al ejecutar la función anterior, el navegador mostrará un mensaje con la cadena:

Cuando quieres probar o depurar el código, lo más habitual es usar el método console.log(), ya que cuando usas la función alert(), tendrás que cerrar todos y cada uno de los mensajes que se muestren.

Cómo asignar cadenas a variables

Las variables en JavaScript se definen mediante las sentencias var o let, aunque también puedes definir constantes usando la sentencia const. En el siguiente ejemplo asignamos una cadena a una constante, a una variable declarada con let y a otra variable declarada con var:

const cadena = 'Esta cadena está asignada a una constante.';
let varCadena1 = 'Esta cadena está asignada a una variable.';
let varCadena2=  'Esta cadena está asignada a otra variable.';

Una vez asignada la cadena a una constante o a una variable, podrás mostrarla por la consola pasando la constante o la variable deseada al método console.log():

console.log(cadena);

Gracias al uso de variables, podemos almacenar y manipular cadenas con facilidad, evitando también tener que escribirlas cada vez que las vayamos a usar.

Tipos de cadenas en JavaScript

En JavaScript existen dos tipos de cadenas, que son las cadenas primitivas y aquellas que son un objeto de tipo String. Las cadenas primitivas son las que hemos visto en los apartados anteriores.

Para ver las diferencia entre ambos tipos de cadena, vamos a inicializar una cadena de tipo primitivo y otra cadena de tipo objeto:

// Cadena de tipo primitivo
const cadenaPrimitiva = 'Cadena de tipo primitivo.';

// Cadena de tipo objeto
const cadenaObjecto = new String('Cadena de tipo objeto.');

Para determinar el tipo de una cadena puedes usar el operador typeof. Si por ejemplo ejecutas el código typeof cadenaPrimitiva, obtendrás string como resultado:

const tipoCadena = typeof cadenaPrimitiva;
console.log(tipoCadena); // string

Si por el contrario ejecutas el código typeof cadenaObjeto, obtendrás object como resultado:

const tipoCadena = typeof cadenaObjeto;
console.log(tipoCadena); // object

Sin embargo, lo más habitual en JavaScript es trabajar con cadenas primitivas. Además, JavaScript es capaz de usar los métodos y propiedades incluidas en los objetos de tipo String aunque uses cadenas de tipo primitivo, sin que tengas que realizar ningún tipo de conversión.

En general, cada vez que accedas a una propiedad o ejecutes un método de una cadena de tipo String en una cadena de tipo primitivo, JavaScript realizará una conversión temporal de la cadena a un objeto de tipo String, ejecutará el método y devolverá el resultado.

Indexación de las cadenas

Los caracteres de una cadena en JavaScript se indexan con un índice que comienza por el número 0. El índice se incrementa en una unidad con cada carácter que se agregue a la cadena.

Por ejemplo, vamos a ver cómo se indexa internamente al cadena Hola!:

H	o	l	a	!
0	1	2	3	4

Los caracteres se ordenan en comenzando por el índice 0, que se corresponde con la letra H. El índice se incrementa hasta que la cadena finaliza con el valor !, que está en la posición 4. Los espacios en blanco también cuentan como un carácter totalmente normal.

Puedes acceder a un carácter individual de una cadena del mismo modo que lo harías con un array. En el siguiente ejemplo, accedemos al carácter que está en la posición 3, que se corresponde con la letra n, ya que se comienza a contar desde el número 0:

const caracter = 'Buenos días'[3]; // n

Otra posibilidad es que uses el método charAt, que devolverá el carácter que se encuentre en la posición que indiques como parámetro:

const caracter = 'Buenos días'.charAt(3); // n

Si por el contrario quieres conocer la posición en la que se encuentra un determinado carácter, puedes usar el método indexOf. El método indexOf devolverá la primera ocurrencia del carácter que le pases al método como parámetro:

const posicion = 'Buenos días'.indexOf('n'); // 3

Además, mediante el método indexOf no solamente podrás encontrar caracteres individuales, sino que también podrás encontrar la posición en la que comienza la primera ocurrencia de la subcadena que le pases como parámetro:

const posicion = 'Buenos días'.indexOf('días'); // 7

De no encontrase el carácter o la subcadena, el resultado del método indexOf será el valor -1.

En caso de que en lugar de obtener la primera ocurrencia quieras obtener la última, debes usar el método lastIndexOf:

const posicion = 'Buenos días'.lastIndexOf('s'); // 10

El método lastIndexOf también se puede usar para encontrar la posición en la que comienza la última ocurrencia de una subcadena. De no encontrarse el carácter o la subadena, el método lastIndexOf devolverá el valor -1.

En caso de que quieras conocer todas las funciones existentes mediante las cuales podrás encontrar un carácter individual en una cadena, consulta el siguiente artículo, en donde explico cómo encontrar un carácter en una cadena con JavaScript.

Longitud de las cadenas

Puedes obtener la longitud de una cadena en cualquier momento mediante la propiedad length, que devolverá el número de caracteres de una cadena.

"It's time to kick ass".length // 21

Es importante que recuerdes que la propiedad length devolverá la longitud de la cadena, comenzando por el número 1. No se devolverá el último índice, que en el caso de la cadena anterior será el valor 20, ya que los índices comienzan por el valor 0.

Para más información acerca de la longitud de las cadenas, consulta el siguiente artículo, en donde explico cómo obtener la longitud de una cadena en JavaScript.

Cómo escapar caracteres

Para escapar caracteres en una cadena tendrás que usar el símbolo \ inmediatamente antes del carácter que quieras escapar. Esto te permitirá, entre otras cosas, incluir comillas simples en el interior de una cadena declarada con comillas simples:

const cadena = 'I'm the king of the hill';

console.log(cadena);

Concatenación de cadenas

Puedes unir dos o más cadenas usando el operador + tal y como puedes ver en este ejemplo:

const cadena = 'Ayer comí ' + 'manzanas'; // Ayer comí manzanas

También puedes usar el operador += para añadir una cadena al final de otra:

let cadena = 'Ayer comí ';
cadena += 'manzanas';
console.log(cadena);  // Ayer comí manzanas

Tal y como veremos en el siguiente apartado, también puedes usar el método concat() para unir cadenas.

const c1 = 'Eduardo';
const apellido = ' Lázaro';
const nombreCompleto = nombre.concat(apellido); // Eduardo Lázaro

Además, en caso de que uses plantillas literales, también puedes incluir variables en el interior de las cadenas gracias a la sintaxis ${}:

const objeto = 'libro';
const preferido = 'Don Quijote';

const favorito = `Mi ${objeto} preferido es ${preferido}.`;

Para obtener más información acerca de cómo concatenar cadenas en JavaScript, consulta el siguiente tutorial, en donde explico cómo concatenar cadenas en JavaScript.

Cadenas multilínea

En JavaScript puedes crear cadenas que ocupen varias líneas, tanto en el código como en el resultado que se mostrará por pantalla. Para iniciar una nueva línea basta con usar la sintaxis \n. En caso de que vayas a mostrar el texto en un documentos HTML, puedes crear una nueva línea usando la etiqueta <br>, o también puedes iniciar un nuevo párrafo usando la etiqueta <p> y cerrarlo usando </p>.

Sin embargo, en ocasiones tendremos que escribir cadenas demasiado larga en el código, resultando en un código poco legible. Para solucionar esto podemos concatenar varias cadenas o también usar el conjunto de caracteres \n\, aunque este último método es poco compatible con los navegadores. La mejo opción consiste en usar plantilla literales:

const cadenaMultilinea = `Primera línea y
segunda línea.`;

Para más información acerca de cómo crear cadenas multilínea en JavaScript, consulta el siguiente tutorial:

Cadenas multilínea: Cómo crear cadenas multilínea en JavaScript

Transformación de cadenas

En JavaScript puedes aplicar diferentes transformaciones a las cadenas. Por ejemplo, puedes trasformar sus caracteres a mayúscula o minúscula usando los métodos toUpperCase o toLowerCase:

const cadena = 'esta es una cadena';
const cadenaMayuscula = cadena.toUpperCase(); // ESTA ES UNA CADENA

Para más información, consulta el siguiente tutorial:

Cadenas en mayúscula o minúscula: Cómo convertir una cadena a mayúscula o minúscula en JavaScript

Métodos usados con cadenas

A continuación puedes encontrar una lista con los métodos más utilizados con las cadenas en JavaScript:

Método charAt: Cómo usar el método charAt en JavaScript
Método charCodeAt: Cómo usar el método charCodeAt en JavaScript
Método codePointAt: Cómo usar el método codePointAt en JavaScript
Método startsWith: Cómo usar método startsWith en JavaScript
Método endsWith: Cómo usar método endsWith en JavaScript

Finalizando

Y esto ha sido todo. Con esta guía hemos cubierto todo lo que deberías saber acerca de las cadenas y su manipulación con JavaScript. Has aprendido a crear cadenas con una sintaxis diferente y también a crear plantillas literales.