Libros
JavaScript
Capítulo 2. Cadenas de Texto
Interpolación de cadenas de texto

JavaScript:
Interpolación de cadenas de texto

Cómo Hacerlo:

Interpolar en JavaScript? Pan comido con template literals. Aquí tienes ejemplos:

let nombre = 'Miguel';
let saludo = `Hola, ${nombre}! ¿Cómo estás?`;
console.log(saludo); // "Hola, Miguel! ¿Cómo estás?"

let precio = 9.99;
let producto = 'libro';
let mensaje = `El precio del ${producto} es ${precio} euros.`;
console.log(mensaje); // "El precio del libro es 9.99 euros."

Fácil, directo y legible.

Profundizando

Antes de ES6, ese mundillo de JavaScript era más enredado. Usábamos la concatenación:

let nombre = 'Miguel';
let saludo = 'Hola, ' + nombre + '! ¿Cómo estás?';

Bien, pero no tan elegante. Luego llegó ES6 en 2015 y nos trajo los template literals (o plantillas literales) con los que simplemente encierras tu cadena en backticks (`) y magia, interpolas con ${}.

Más poder aún: puedes meter cualquier expresión de JavaScript dentro de las llaves. Hagamos matemáticas:

let a = 5;
let b = 10;
console.log(`Quince es ${a + b} y no ${2 * a + b}.`);
// "Quince es 15 y no 20."

Y no termina ahí; funciones, operaciones complejas, llamadas a métodos… todo eso cabe en los ${}. Pero, ojo, que todo tiene su costo. Abusar de la interpolación con operaciones complicadas puede volver tu código un enredo.

Ver También

Calculando la longitud de una cadenaEliminando comillas de una cadena