Cadenas y template literals

Texto que muestras en pantalla, entrada de un formulario, un nombre de producto que vuelve de una API — muchos de los valores que maneja una app web son cadenas (strings) (un valor formado por una secuencia de caracteres).

Este artículo cubre construir cadenas con los 3 tipos de comillas y los template literals, y luego métodos para limpiar la entrada hasta una forma mostrable: recortar espacios, comprobar si algo está contenido, dividir y volver a unir, y alinear cifras.

Construir y limpiar cadenas — 3 tipos de comillas y template literals

Digamos que quieres que la pantalla de confirmación de un pedido diga "Insulated Mug x 3 / Total 3600" — el nombre del producto, la cantidad y el importe viven cada uno en su propia variable. Juntarlos en una sola frase es justo para lo que sirve construir cadenas. Empecemos por cómo escribir una cadena, para empezar.

Una cadena se escribe entre comillas simples ', comillas dobles ", o backticks. Si el mismo carácter de comilla con el que la envolviste aparece dentro, eso se lee como el final de la cadena, así que para incluir un carácter de comilla dentro, envuélvela con un tipo distinto de comilla o pon un \ delante para anular su significado especial.

Verás un backtick de verdad en el ejemplo de código que viene a continuación.

const productName = "Insulated Mug";   // entre comillas dobles
const categoryName = 'Kitchen Goods';   // entre comillas simples

// Escapa con \ para incluir el mismo tipo de comilla con el que envolviste
const notice = "Staff \"Pick\"";

// Envuelve con un tipo distinto de comilla y no hace falta escapar
const notice2 = 'Staff "Pick"';

console.log(productName.length);   // 13  el conteo de caracteres vuelve como número
console.log(notice);               // Staff "Pick"
console.log(notice2);              // Staff "Pick"

length, que devuelve el conteo de caracteres, es una propiedad (información asociada a un valor, que se lee por nombre sin paréntesis). A diferencia de un método como toFixed del artículo anterior, no escribes paréntesis — no es productName.length().

Las cadenas se pueden unir con +, pero cuantas más variables añadas, más se acumulan las comillas y los signos + y más difícil se hace leer. Para eso están los template literals (envuelve una cadena en backticks, y cualquier valor escrito dentro de ${ } se incrusta en ella).

Dentro de ${ } puedes escribir no solo una variable sino una expresión como unitPrice * quantity, y el resultado calculado se incrusta.

const productName = "Insulated Mug";
const unitPrice = 1200;
const quantity = 3;

// Unir con + mezcla comillas y + juntos
console.log(productName + " x " + quantity + " / Total " + unitPrice * quantity);

// Con ${ }, tanto valores como expresiones se pueden escribir tal cual
console.log(`${productName} x ${quantity} / Total ${unitPrice * quantity}`);
// Ambas imprimen: Insulated Mug x 3 / Total 3600

Limpiar para mostrar — trim / slice / toUpperCase

Un nombre escrito en un formulario puede tener espacios de sobra alrededor, o mayúsculas inconsistentes. Mostrarlo tal cual puede verse roto, así que limpias su forma justo antes de mostrarlo.

trim elimina los espacios que lo rodean, toUpperCase lo normaliza a mayúsculas, y slice recorta parte de la cadena.

slice toma una posición inicial y una posición final. Las posiciones se cuentan desde 0, y el carácter en la posición final no se incluye.

slice(0, 1) te da el primer carácter; omite el final, como en slice(1), y obtienes todo desde ahí hasta el final.

const rawInput = "  Yamada  ";   // valor recibido de un campo de entrada

console.log(rawInput.trim());               // Yamada
console.log(rawInput.trim().length);        // 6
console.log(rawInput.trim().toUpperCase()); // YAMADA
console.log(rawInput.trim().slice(0, 3));   // Yam  los primeros 3 caracteres

// Puedes encadenar resultados recortados con +
console.log(rawInput.trim().slice(0, 1).toUpperCase() + "…");  // Y…

console.log(rawInput.length);               // 10  el original conserva sus espacios

Los métodos no cambian la cadena original

trim y toUpperCase solo devuelven el resultado limpio como una cadena nueva — la variable sobre la que los llamaste se mantiene exactamente igual. Para usar el resultado, guárdalo en una variable o encadénalo en la siguiente llamada de método, como en el ejemplo de arriba.

Limpia un nombre de un campo de entrada hasta algo que puedas mostrar en pantalla. El nombre a mostrar rawName y el ID de miembro memberId ya están declarados.

① Muestra el nombre sin espacios al principio ni al final.

② Muestra ese mismo nombre con solo la primera letra en mayúscula.

③ Combina el ID de miembro y el nombre de ② en un solo saludo. Dale el formato "Welcome, Hanako! (member #1042)".

(Si se ejecuta correctamente, aparecerá una explicación.)

Buscar dentro de una cadena — includes / startsWith / indexOf

Si un correo escrito por el usuario no tiene @, querrías rechazarlo antes de guardarlo. O quizás quieres tratar de forma distinta un código de pedido según si empieza por ORD-. Comprobaciones como estas usan métodos que buscan dentro de una cadena.

includes devuelve true o false según si una cadena dada aparece en algún sitio, y startsWith según si la cadena empieza con ella.

Cuando necesitas la posición exacta, usa indexOf, que devuelve la posición, como número, de la primera coincidencia. Si nada coincide, devuelve -1, así que también sirve como una forma de comprobar si algo está contenido.

const orderCode = "ORD-2026-0042";

console.log(orderCode.includes("2026"));    // true   está contenido en algún sitio
console.log(orderCode.startsWith("ORD-"));  // true   el inicio coincide

console.log(orderCode.indexOf("-"));        // 3      posición, contada desde 0
console.log(orderCode.indexOf("SHIP"));     // -1     no se encuentra

console.log(orderCode.slice(4));            // 2026-0042  de la posición 4 al final

Combina la posición que devuelve indexOf con slice, y podrás sacar justo lo que viene después de un carácter separador. Una vez sepas dónde está el @, pasarle a slice la posición justo después te da la parte del dominio de un correo.

Comprueba un correo escrito en un formulario de registro. El contacto registrado contactEmail y la cadena escrita en el campo, typedEmail, ya están declarados.

① Muestra si typedEmail contiene un signo @.

② Muestra la parte del dominio de contactEmail — todo lo que va después del signo @.

③ Muestra si contactEmail empieza por sato.

Dividir y volver a unir — split y join

A veces, como una fila de CSV o un campo de etiquetas, una sola cadena tiene varios valores empaquetados. Manejar cada elemento por separado significa dividir en un separador, y hacer lo contrario — para mostrar — significa volver a unirlos en uno solo. split hace la división; join hace la reunión.

split toma el carácter por el que dividir. split(",") divide en cada coma, y el resultado vuelve como un array (varios valores ordenados y agrupados en un solo valor). join funciona al revés — pásale el carácter para colocar entre elementos, y los vuelve a unir en una sola cadena.

const tagLine = "Kitchen,Insulated,Gift";   // contenido de un campo de etiquetas

const tags = tagLine.split(",");   // divide en cada coma
console.log(tags.length);          // 3   el número de piezas
console.log(tags[0]);              // Kitchen    posición 0 = el primer valor
console.log(tags[2]);              // Gift       posición 2 = el tercer valor

console.log(tags.join(" / "));     // Kitchen / Insulated / Gift
console.log("2026-09-02".split("-").join("/"));  // 2026/09/02

Saca los valores divididos por posición

Del array que devuelve split, saca elementos uno a uno escribiendo su posición, contada desde 0, entre corchetes — como en tags[0]. Las operaciones sobre el propio array, como añadir o quitar elementos, se cubren de nuevo en el artículo de arrays.

Has recibido las líneas de un pedido como una sola fila de CSV. csvLine, una cadena con el ID de miembro, el nombre del producto, el precio unitario y la cantidad separados por comas, ya está declarada.

① Muestra cuántos campos obtienes al dividir por comas.

② Muestra solo el nombre del producto entre los campos divididos.

③ Vuelve a unir todos los campos con " | " entre ellos y muéstralo en una línea.

Reemplazar y rellenar — replaceAll y padStart

Quizás quieras quitar los guiones de un número de teléfono antes de guardarlo, o rellenar un número de pedido a 6 dígitos con ceros a la izquierda para mostrarlo. Para tareas de "reformar una cadena recibida a un formato fijo" como estas, usa replaceAll y padStart.

replaceAll toma la cadena a buscar y la cadena de reemplazo. Reemplaza con una cadena vacía "" (una cadena de longitud cero, sin nada entre las comillas), y eso tiene el mismo efecto que eliminar el carácter.

padStart toma la longitud objetivo y el carácter de relleno (por defecto un espacio si lo omites), y añade ese carácter de relleno al principio por lo que falte de longitud. Si la cadena original ya tiene al menos esa longitud, no se añade nada — se devuelve tal cual.

const rawCode = "ord 2026 0042";   // código de pedido escrito con espacios

console.log(rawCode.replaceAll(" ", "-"));  // ord-2026-0042
console.log("090-1234-5678".replaceAll("-", ""));  // 09012345678

console.log("42".padStart(6, "0"));   // 000042  rellena con 0 hasta 6 dígitos
console.log("42".padStart(6));        //     42  sin carácter de relleno es un espacio
console.log("1200".padStart(3, "0")); // 1200    ya tiene 3+ dígitos, sin cambios

Reforma un número de pedido asignado y un número de teléfono escrito a mano en algo que puedas guardar. El número de pedido orderNumber y el número de teléfono rawPhone ya están declarados.

① Muestra el número de pedido rellenado a 6 dígitos con ceros a la izquierda.

② Muestra un código de pedido que añada ORD- delante del resultado de ①.

③ Muestra el número de teléfono sin ninguno de los guiones.