El texto está en todo
Un nombre de usuario, el mensaje de bienvenida de tu app, una URL, lo que se ve en un botón... casi todo lo que el usuario lee es texto. En programación a ese texto lo llamamos string, y vas a manejarlos a todas horas. Empecemos por lo básico.
¿Qué es un string?
Un string (cadena) es texto: una secuencia de caracteres. Se escribe entre comillas. JavaScript acepta tres formas:
const a = "comillas dobles";
const b = 'comillas simples';
const c = `comillas invertidas (backticks)`;
Las tres crean el mismo tipo de valor. Las comillas dobles y simples son equivalentes; usa unas u otras según convenga (por ejemplo, comillas simples si el texto contiene comillas dobles).
Concatenar con +
La forma clásica de unir textos es el operador +:
const nombre = "Ana";
const saludo = "Hola, " + nombre + "!";
console.log(saludo); // "Hola, Ana!"
Funciona, pero con muchas variables se vuelve un puzzle de comillas y signos
+, fácil de equivocar: olvidas un espacio, te falta un +... y a depurar.
Plantillas literales: tu nuevo mejor amigo
Aquí llega el momento útil de verdad. Usando backticks (`) puedes
escribir el texto de un tirón e incrustar valores con ${...}, justo donde van:
const nombre = "Ana";
const edad = 25;
const frase = `${nombre} tiene ${edad} años`;
console.log(frase); // "Ana tiene 25 años"
Dentro de ${ } puedes poner cualquier expresión, no solo variables:
const precio = 10;
console.log(`Total con IVA: ${precio * 1.21} €`);
Además, las plantillas literales respetan los saltos de línea tal cual los
escribes, sin caracteres raros de por medio. Léelo en voz alta: ${nombre} tiene ${edad} años se entiende casi como una frase normal. Por eso hoy son la forma
recomendada para construir texto: una vez las pruebas, no vuelves al +.
Ejemplos
Concatenación vs plantilla literal
const nombre = "Ana";
const edad = 25;
console.log("Antiguo: " + nombre + " (" + edad + ")");
console.log(`Moderno: ${nombre} (${edad})`);Expresiones dentro de la plantilla
const a = 4;
const b = 6;
console.log(`${a} + ${b} = ${a + b}`);