Fundamentos de JavaScript

Teoría: Interpolación

Cuando programas, muchas veces necesitas mostrar mensajes personalizados. Por ejemplo, imagina que un sistema debe decirle a cada usuario: 👉 “Hola, Ana, tu pedido está listo”.

Para eso, usamos variables como nombre y las combinamos dentro del mensaje. Hay dos formas de hacerlo: concatenación e interpolación.


Concatenación de сadenas

La forma clásica que ya conocemos es usar + para unir texto:

const nombre = 'Ana';
console.log('Hola, ' + nombre + ', tu pedido está listo.');
// => Hola, Ana, tu pedido está listo.
Problemas de la concatenación:
  • Es fácil olvidar agregar espacios o signos de puntuación correctos.
  • Cuando la cadena es larga, se vuelve difícil de leer y entender.
  • Se deben usar muchas comillas y +, lo que puede ser confuso.

Veamos ahora una manera más elegante de hacer lo mismo.

Interpolación de cadenas

Con la interpolación, puedes escribir todo el mensaje como una sola frase y “meter” las variables donde quieras.
const nombre = 'Ana';
console.log(`Hola, ${nombre}, tu pedido está listo.`);
// => Hola, Ana, tu pedido está listo.

Solo necesitas:

¿Dónde está la comilla invertida?

ChatGPT Plus En muchos teclados, la tecla se encuentra en la parte superior izquierda, junto al número 1. Un error muy común al inicio es usar (comilla simple(')) en lugar de (comilla invertida(`)), lo que provoca que la interpolación no funcione.

Uso de múltiples líneas

Si quieres mostrar varias líneas de texto, la interpolación también ayuda:

console.log(`— ¿Quién eres?
— Soy Arya Stark de Invernalia.`);

Resultado:

— ¿Quién eres? — Soy Arya Stark de Invernalia.

¿Para qué sirve esto en la práctica?

  • Mostrar el nombre del usuario en una página: Hola, Pedro
  • Crear mensajes en correos automáticos
  • Generar resúmenes como: Has gastado $2000 este mes
  • Escribir logs para revisar qué pasa en el programa

Resumen

  • La concatenación de cadenas usa + para unir texto manualmente.
  • La interpolación permite insertar variables en una cadena usando ${ }.
  • Las cadenas interpoladas usan comillas invertidas (`), no comillas simples (') ni dobles (").
  • La interpolación es preferida sobre la concatenación porque es más legible y fácil de usar.