Plantillas de cadena literal: acentos graves e inserción de variables

Al finalizar este tema

Aprenderá a formatear cadenas de texto de manera limpia utilizando acentos graves y la sintaxis ${}.

Limitaciones de las comillas

const name = "Alice";
const age = 25;
const msg = "Hello, " + name + "! You are " + age + " years old.";

Para insertar una variable en medio de una cadena, debe concatenarla con +. Si hay muchas variables, abrir y cerrar comillas e incluir el signo más resulta incómodo tanto para leer como para escribir.

Backticks y $

const name = "Alice";
const age = 25;
const msg = `Hello, ${name}! You are ${age} years old.`;

Puedes colocar variables entre comillas invertidas (`) e insertarlas con ${}. La combinación de comillas + suma desaparece. Esto se denomina Template Literal. Se añadió en ES6 (2015).

Dentro de ${} no solo se pueden incluir variables, sino también expresiones:

const price = 15000;
const quantity = 3;
console.log(`Total: ${price * quantity}won`);
// Total: 45000won

console.log(`Status: ${age >= 18 ? "adult" : "minor"}`);
// Status: adult

También es posible realizar llamadas a funciones:

console.log(`Upper: ${name.toUpperCase()}`);
// Upper: ALICE

Cadenas multilínea

Para crear una cadena multilínea con comillas estándar, debe insertar \n:

const old = "Line 1\nLine 2\nLine 3";

El carácter de acento grave (`) reconoce los saltos de línea tal cual:

const html = `
<div>
  <h1>${title}</h1>
  <p>${content}</p>
</div>
`;

Es especialmente útil al crear plantillas HTML. La sangría se mantiene intacta.

Clave

Los template literals son una sintaxis que permite insertar variables y expresiones en cadenas de texto utilizando backticks y ${}. Son más fáciles de leer que la concatenación de cadenas (+) y admiten de forma natural las cadenas multilínea.