Cadenas de texto

docs.scrimba.com

Estás construyendo un saludo para un usuario que ha iniciado sesión, y tienes su nombre en una variable. Necesitas que la página diga "Bienvenido de vuelta, Carlos" sin que tengas que escribir "Carlos" a mano, porque mañana será María, y el día siguiente será alguien que nunca has oído hablar. El texto que puedes construir, medir y remodelar al vuelo es una cadena de texto, y este capítulo trata sobre cómo trabajar con ellas.

Hacer cadenas de texto

Una cadena de texto es texto: cualquier serie de caracteres envueltos en comillas. Puedes usar comillas simples o dobles, y se comportan de la misma manera, así que elige una y mantente consistente.

const firstName = "Carlos";
const greeting = "Bienvenido de vuelta";

La forma más útil de construir una cadena de texto es un literal de plantilla, escrito con acentos graves en lugar de comillas. Dentro de un literal de plantilla puedes insertar un valor en el texto con ${...}, y JavaScript completa lo que ese valor contenga:

const firstName = "Carlos";
const message = `Bienvenido de vuelta, ${firstName}`;
console.log(message); // Bienvenido de vuelta, Carlos

Ese ${firstName} es un espacio. Cuando se construye la cadena de texto, el espacio se reemplaza por el valor de firstName. Recurre a los literales de plantilla siempre que estés construyendo texto a partir de piezas.

Una cadena de texto es un valor hecho de texto. Las comillas simples y dobles producen cadenas de texto idénticas, así que la elección entre ellas es cuestión de estilo y de qué carácter de comilla necesitas incluir: "it's here" evita escapar, y también 'she said "hi"'.

La forma a preferir es el literal de plantilla, una cadena de texto escrita con acentos graves. Hace dos cosas que las comillas ordinarias no pueden. Interpola valores con ${...}, insertando el resultado de cualquier expresión directamente en el texto, y puede abarcar múltiples líneas sin un escape especial:

const firstName = "Carlos";
const itemCount = 3;
const message = `Bienvenido de vuelta, ${firstName}. Tienes ${itemCount} artículos esperándote.`;
console.log(message); // Bienvenido de vuelta, Carlos. Tienes 3 artículos esperándote.

Cualquier cosa que produzca un valor puede ir en el espacio, no solo nombres de variables, así que ${itemCount} podría ser igualmente ${itemCount + 1}. Construir texto con ${...} se lee mucho más limpio que pegar piezas juntas con comillas y signos de más, por eso es el estándar.

Una cadena de texto es la primitiva de texto de JavaScript: uno de los tipos de valor básicos del lenguaje, junto con números y booleanos (consulta tipos de datos para el conjunto completo). Las comillas simples y dobles son intercambiables y producen exactamente el mismo valor; la única decisión real que fuerzan es qué carácter de comilla tendrías que escapar de otra forma.

La forma que vale la pena usar por defecto es el literal de plantilla, delimitado por acentos graves. Interpola cualquier expresión con ${...}, evaluando lo que está dentro e coercionando el resultado a una cadena de texto, y preserva saltos de línea literales para que el texto de múltiples líneas no necesite \n:

const firstName = "Carlos";
const itemCount = 3;
const summary = `Hola ${firstName}, tienes ${itemCount} artículos y ${itemCount === 1 ? "está" : "están"} esperándote.`;
console.log(summary); // Hola Carlos, tienes 3 artículos y están esperándote.

El espacio contiene una expresión, no solo un nombre, así que aritmética, llamadas a métodos y comparaciones funcionan todos dentro de él. Esa expresividad es por qué la interpolación supera la concatenación para cualquier cosa más allá de una cadena de texto de dos partes: la forma del texto final se mantiene legible en el código fuente. El único hábito a desarrollar es recurrir a los acentos graves por defecto y cambiar a comillas ordinarias solo para una cadena de texto fija de una sola pieza donde la interpolación no te compra nada.

JunoHacer cadenas de texto Una cadena de texto es texto entre comillas, y las comillas simples o dobles funcionan igual, así que elige una y mantente consistente. Para construir texto a partir de piezas, usa un literal de plantilla: acentos graves con espacios ${...} que se rellenan con tus valores. Esa es la herramienta que usarás más.

JunoHacer cadenas de texto Las comillas simples y dobles crean cadenas de texto idénticas, así que elige basándote en qué comilla necesitas incluir sin escapar. Pero usa literales de plantilla por defecto: los acentos graves te permiten insertar cualquier valor con ${...} y abarcar múltiples líneas gratis. Una vez que interpolas, pegar cadenas de texto juntas a mano deja de valer la pena.

JunoHacer cadenas de texto Las comillas son intercambiables; la única cosa que elige una sobre la otra es qué carácter tendrías que escapar. Recurre a los acentos graves por defecto porque ${...} toma una expresión completa, no solo un nombre, así que aritmética y comparaciones funcionan directamente dentro del texto. Mantén las comillas ordinarias para las cadenas de texto fijas de una sola pieza donde la interpolación no gana nada.

Unir y medir

Puedes unir dos cadenas de texto con el operador +. Esto se llama concatenación:

const firstName = "María";
const greeting = "Hola " + firstName;
console.log(greeting); // Hola María

Observa el espacio dentro de 'Hola '. La concatenación pega las cadenas de texto exactamente como están escritas, así que si olvidas el espacio obtendrás HolaMaría. Un literal de plantilla generalmente se lee mejor para el mismo trabajo: `Hola ${firstName}`.

Cada cadena de texto conoce su propia longitud. Pregúntale con .length:

const firstName = "María";
console.log(firstName.length); // 5

También puedes leer un solo carácter por su posición, contando desde cero, usando corchetes:

const firstName = "María";
console.log(firstName[0]); // M

El primer carácter está en la posición 0, no 1. Ese conteo basado en cero está en todas partes en JavaScript, así que vale la pena acostumbrarse ahora.

Dos cadenas de texto se unen con +, una operación llamada concatenación. Funciona, pero se vuelve desordenado rápidamente, porque cada espacio literal y separador tiene que escribirse dentro de las comillas:

const firstName = "María";
const lastName = "García";
console.log("Hola " + firstName + " " + lastName); // Hola María García

La misma línea como un literal de plantilla es `Hola ${firstName} ${lastName}`, por eso la interpolación es el estándar para cualquier cosa con más de una pieza.

Una cadena de texto reporta su tamaño con .length, un conteo de sus caracteres:

const firstName = "María";
console.log(firstName.length); // 5

Y lees un solo carácter por índice con corchetes, contando desde cero, así que firstName[0] es el primer carácter y firstName[4] es el último de una cadena de texto de cinco caracteres:

const firstName = "María";
console.log(firstName[0]); // M

La indexación está basada en cero: el primer carácter está en la posición 0.

Las cadenas de texto se unen con +, una operación llamada concatenación. Está bien para una unión rápida de dos partes, pero nota que + está sobrecargado: con una cadena de texto a ambos lados concatena, y mezclar un número lo coerciona a una cadena de texto, así que 'total: ' + 3 da 'total: 3' mientras que 3 + 3 da 6. Los literales de plantilla evitan la ambigüedad produciendo siempre texto, que es una razón más para preferirlos más allá del caso más simple.

.length es una propiedad, no un método, así que la lees sin paréntesis:

const label = "García";
console.log(label.length); // 6

La indexación con corchetes está basada en cero y devuelve una cadena de texto de un carácter:

const label = "García";
console.log(label[0]); // G

Una cosa a tener en mente: .length cuenta las unidades subyacentes de la cadena de texto, no siempre lo que un humano llamaría caracteres. Para texto ordinario los dos coinciden. Para algunos emoji y caracteres combinados no, porque un símbolo visible único puede almacenarse como más de una unidad, así que '😀'.length reporta 2. Rara vez te muerde, pero cuando un conteo de "letras" se ve fuera para texto con emoji, esa diferencia es por qué.

JunoUnir y medir Une cadenas de texto con +, pero recuerda incluir tus propios espacios, o Hola y un nombre se juntan. Un literal de plantilla generalmente es más limpio para lo mismo. Usa .length para contar caracteres, y corchetes como name[0] para leer uno por posición, contando desde cero.

JunoUnir y medir+ concatena, pero se vuelve desordenado en el momento en que tienes más de dos piezas, así que los literales de plantilla ganan para cualquier cosa real. .length cuenta caracteres y no lleva paréntesis porque es una propiedad. La indexación con name[0] está basada en cero, así que el primer carácter está en la posición 0 y el último en longitud menos uno.

JunoUnir y medir+ está sobrecargado: cadena de texto más cualquier cosa concatena y coerciona, que es una fuente tranquila de sorpresas, así que confía en los literales de plantilla. .length es una propiedad, sin paréntesis. Cuenta unidades de almacenamiento, no siempre caracteres visibles, así que un emoji puede reportar una longitud de 2. Esa brecha solo aparece con unicode, pero vale la pena saber antes de que te confunda.

Métodos útiles de cadena de texto

Las cadenas de texto vienen con métodos integrados: acciones que ejecutas en una cadena de texto escribiendo un punto y el nombre del método. Aquí están los que más usarás.

Cambia el caso con toUpperCase() y toLowerCase():

const firstName = "carlos";
console.log(firstName.toUpperCase()); // CARLOS

Verifica si una parte del texto aparece dentro de otra con includes(), que responde con true o false:

const message = "Bienvenido de vuelta";
console.log(message.includes("vuelta")); // true

Corta parte de una cadena de texto con slice(), dándole la posición de inicio y dónde parar. Limpia espacios extraños en los extremos con trim(). Y reemplaza una parte del texto por otra con replace():

const raw = "  Hola  ";
console.log(raw.trim()); // Hola

const message = "Hola Carlos";
console.log(message.replace("Carlos", "María")); // Hola María

Hay muchos más métodos de cadena de texto, y no necesitas memorizarlos. Aprende estos cinco, y busca el resto cuando un trabajo lo requiera.

Las cadenas de texto llevan métodos, funciones que llamas en una cadena de texto con un punto, y un puñado cubren la mayoría del trabajo diario.

toUpperCase() y toLowerCase() cambian el caso, que es útil para comparar texto que el usuario escribió sin preocuparse por la capitalización. includes() devuelve un booleano sobre si una cadena de texto aparece dentro de otra:

const email = "[email protected]";
console.log(email.toLowerCase().includes("@sitio.com")); // true

slice(start, end) extrae una sección, desde el índice de inicio hasta pero sin incluir el índice de fin. trim() elimina espacios en blanco de ambos extremos, que quieres en casi cualquier entrada de usuario. replace() reemplaza la primera coincidencia de una parte del texto por otra:

const raw = "  pedido-2024  ";
const clean = raw.trim(); // 'pedido-2024'
console.log(clean.slice(0, 6)); // pedido
console.log(clean.replace("pedido", "factura")); // factura-2024

Estos cinco son los que hacen el trabajo pesado. Muchos más existen, así que recurre a la referencia cuando encuentres algo que no cubran, pero espera depender de estos.

Las cadenas de texto exponen un gran conjunto de métodos, funciones que invocas en el valor con un punto. Un pequeño núcleo lleva la mayoría de la carga: toUpperCase() / toLowerCase() para caso, includes() para una verificación booleana de subcadena, slice(start, end) para extraer una sección (inicio inclusivo, fin exclusivo, y los negativos cuentan desde el final), trim() para eliminar espacios en blanco circundantes, y replace() para sustitución.

La propiedad que los une: los métodos de cadena de texto nunca cambian el original, devuelven una cadena de texto nueva. Las cadenas de texto son inmutables, lo que significa que un valor de cadena de texto no puede ser alterado en su lugar, así que cada método te entrega una cadena de texto nueva y deja la fuente intacta:

const raw = "  Carlos García  ";
const cleaned = raw.trim().toLowerCase();
console.log(cleaned); // carlos garcía
console.log(raw); // '  Carlos García  '  (sin cambios)

Porque el resultado es en sí una cadena de texto, los métodos se encadenan, como muestra trim().toLowerCase() arriba. Dos casos extremos que vale la pena llevar: replace() reemplaza solo la primera coincidencia a menos que pidas todas, e indexar más allá del final devuelve undefined en lugar de un error, así que raw[999] es undefined, no un fallo. Ese undefined silencioso es el tipo de cosa que aparece más tarde como un resultado confuso en lugar de un fallo claro.

JunoMétodos útiles de cadena de texto Los métodos son acciones que ejecutas en una cadena de texto con un punto: toUpperCase(), includes() para una verificación de sí o no, slice() para cortar una parte, trim() para eliminar espacios extraños, y replace() para reemplazar texto. Hay muchos más, así que aprende estos cinco y busca el resto cuando los necesites.

JunoMétodos útiles de cadena de texto Confía en cinco: toUpperCase() y toLowerCase() para caso, includes() para una verificación booleana, slice(start, end) para extraer (end no está incluido), trim() para entrada de usuario, y replace() para la primera coincidencia. Muchos más existen, así que recurre a la referencia cuando estos no sean suficientes, pero estos cubren la mayoría de los días.

JunoMétodos útiles de cadena de texto Los cinco principales son toUpperCase/toLowerCase, includes, slice, trim, y replace, y todos devuelven una cadena de texto nueva porque las cadenas de texto son inmutables, así que los resultados se encadenan y el original nunca cambia. Dos trampas: replace golpea solo la primera coincidencia por defecto, e indexar más allá del final da undefined en lugar de un error, que tiende a aparecer como un resultado desconcertante más tarde en lugar de un fallo limpio.

A dónde van las cadenas de texto después

Las cadenas de texto son uno de los bloques de construcción principales de JavaScript, y ahora tienes las piezas que importan: hacerlas con comillas o literales de plantilla, unirlas y medirlas, y remodelarlas con métodos que siempre devuelven algo nuevo. El mismo patrón de punto y método que usaste aquí aparece nuevamente en otros tipos, más notablemente cuando empiezas a trabajar con listas en métodos de array.

El texto también raramente viaja solo. En el momento en que muestras un conteo, un precio o un total, estás mezclando cadenas de texto con números, y los literales de plantilla son cómo unes los dos juntos limpiamente.