La adición de las plantillas literales en ECMAScript 6 (ES6) nos permite interpolar cadenas en JavaScript.

En palabras más simples, podemos usar marcadores de posición para inyectar variables en una cadena. Puedes ver un ejemplo de interpolación de cadena utilizando plantillas literales en el siguiente código:

const edad = 4.5;
const edadTierra = `Se estima que la Tierra tiene ${edad} mil millones de años.`;

console.log(edadTierra);

En primer lugar, puedes ver que estamos usando comillas invertidas `` para crear las plantillas literales. El formato ${marcador} nos permite insertar un valor dinámico en la cadena. Todo lo que hay dentro ${} es evaluado como JavaScript.

Por ejemplo, podríamos escribir Se estima que la Tierra tiene ${edad + 10} mil millones de años., y funcionaría como si hiciéramos const edad = 4.5 + 10;.

¿Cómo lo hacíamos antes?

Antes de contar con las plantillas literales, lo habríamos hecho de la siguiente manera:

const edadTierra = "Se estima que la Tierra tiene " + edad + " mil millones de años.";

Como puedes ver, se utilizan demasiadas comillas para una simple cadena. Imagina que tengamos que insertar múltiples variables. Puede transformarse rápidamente en una cadena compleja que no es muy legible. Por lo tanto, las plantillas literales hacen que las cadenas sean más limpias y legibles.

Sin embargo, este es solo un caso. Veamos más casos de uso para las plantillas literales.

Cadenas multilínea

Otro caso de utilidad para las plantillas literales son las cadenas multilínea. Antes usábamos \n para expresar nuevas líneas, como por ejemplo: console.log('línea 1\n' + 'línea 2').

Para dos líneas esto podría estar bien. Pero imagina que queremos cinco líneas. Una vez más, la cadena se vuelve innecesariamente compleja.

const edadTierra = `Se estima que la Tierra tiene ${edad} mil millones de años.

Los científicos han rastreado la Tierra en busca de las rocas más antiguas para precisar fechas radiométricamente.

En el noroeste de Canadá, descubrieron rocas de unos 4.030 millones de años.
`;

El fragmento anterior demuestra una vez más lo sencillo y limpio que se vuelve escribir cadenas multilínea con plantillas literales.

Como ejercicio, intenta convertir la cadena anterior usando concatenación y saltos de línea \n.

Expresiones

Con las plantillas literales también podemos usar expresiones dentro de las cadenas. ¿Qué significa eso?

Por ejemplo, podríamos usar expresiones matemáticas como la multiplicación de dos números. El fragmento a continuación ilustra esto:

const primerNumero = 10;
const segundoNumero = 39;
const resultado = `El resultado de multiplicar ${primerNumero} por ${segundoNumero} es ${primerNumero * segundoNumero}.`;

console.log(resultado);

Sin las plantillas literales tendríamos que hacer algo como esto:

const resultado = "El resultado de multiplicar " + primerNumero + " por " + segundoNumero + " es " + primerNumero * segundoNumero + ".";

Escribir una cadena como la anterior puede volverse rápidamente complejo y confuso. Como seguimos viendo, las plantillas literales facilitan y hacen más elegante incrustar expresiones en la cadena.

Operador ternario

Con la interpolación de cadenas incluso podemos usar un operador ternario dentro de una cadena. Esto nos permite verificar el valor de una variable y mostrar diferentes cosas dependiendo de ese valor.

Veamos el siguiente ejemplo:

const bebidas = 4.99;
const comida = 6.65;
const total = bebidas + comida;

const resultado = `El total de la factura es ${total}. ${total > 10 ? `Su pago con tarjeta será rechazado` : `Su pago con tarjeta será aceptado`}.`

console.log(resultado);

En el código anterior verificamos si el monto total es superior a diez dólares. Si el importe es superior a diez, avisamos al usuario que se rechazará el pago con tarjeta. De lo contrario, se acepta el pago con tarjeta.

Como puedes ver, la interpolación nos permite hacer cosas interesantes con las cadenas.

Conclusión

La adición plantillas literales en ES6 nos permite escribir cadenas mejores, más cortas y claras. También nos da la capacidad de inyectar variables y expresiones en cualquier cadena. Esencialmente, todo lo que escriba dentro de las llaves (${}) se evaluará como JavaScript.

Por lo tanto, podemos usar plantillas literales para:

• Escribir cadenas multilínea
• Incrustar expresiones
• Escribir cadenas con el operador ternario

Si te gusta lo que escribo, es probable que te encante lo que envío por correo electrónico. Considera suscribirte a mi boletín. Si no eres fanático de los boletines, siempre podemos mantener el contacto vía Twitter.

Traducido del artículo de Catalin Pit - JavaScript String Format – How to use String Interpolation in JS.