Cómo crear plantillas literales en JavaScript

Una de las grandes mejoras que trae las últimas versiones de JavaScript es el cambio o mejora sobre los template literals o plantillas literales.

Las plantillas literales son cadenas de texto que habilitan el uso de expresiones incrustadas generalmente en etiquetas HTML. Es posible utilizar cadenas de texto de más de una línea y funcionalidades de interpolación de cadenas de textos con ellas.

Desde el código JavaScript es posible crear plantillas HTML con variables o expresiones incrustadas para incorporar de forma dinámica en la página web.

En la versión anterior de JavaScript los template literals se podían hacerse de la siguiente forma:

Source code

const producto1 = 'Ordenador de mesa';
const precio1 = 625;
const producto2 = 'Portatil';
const precio2 = 869;
 
let html;
 
/* literales */
html = '<table border="1">' +
        '<tr><td>Producto</td><td>Precio</td></tr>' +
        '<tr><td>'+producto1+'</td><td align="right">'+precio1+' €</td></tr>' +
        '<tr><td>'+producto2+'</td><td align="right">'+precio2+' €</td></tr>' +
        '<tr><td>Total</td><td align="right">'+getTotal(precio1, precio2)+' €</td></tr>' +
        '<tr><td>Total (Impuestos Incl.)</td><td align="right">'+getTotalWithTax(precio1, precio2)+' €</td></tr>' +
        '</table>';
/* literales */
 
function getTotal(precio1, precio2) {
    return precio1 + precio2;
}
 
function getTotalWithTax(precio1, precio2) {
    return Math.round((precio1 + precio2) * 1.21);
}
 
document.getElementById('app').innerHTML = html;

Esta forma todavía funciona pero puedes observar que concatena con el signo «+» el HTML con las variables viéndose un poco extraño.

El código tiene 4 variables que representan los nombres y precios de 2 productos. Creo una variable que la nombro con el nombre «html» para incrustarle las etiquetas HTML con las variables y llamada a funciones. Lo que compone una plantilla literal.

En la versión actual de JavaScript se puede hacer de una forma más simple y ordenada:

Source code

const producto1 = 'Ordenador de mesa';
const precio1 = 625;
const producto2 = 'Portatil';
const precio2 = 869;
 
let html;
 
/* literales */
html = `
    <table border="1">
        <tr>
            <td>Producto</td>
            <td>Precio</td>
        </tr>
        <tr>
            <td>${producto1}</td>
            <td align="right">${precio1} €</td>
        </tr>
        <tr>
            <td>${producto2}</td>
            <td align="right">${precio2} €</td>
        </tr>
        <tr>
            <td>Total</td>
            <td align="right">${getTotal(precio1, precio2)} €</td>
        </tr>
        <tr>
            <td>Total (Impuestos Incl.)</td>
            <td align="right">${+getTotalWithTax(precio1, precio2)} €</td>
        </tr>
    </table>
`;
/* literales */
 
function getTotal(precio1, precio2) {
    return precio1 + precio2;
}
 
function getTotalWithTax(precio1, precio2) {
    return Math.round((precio1 + precio2) * 1.21);
}
 
document.getElementById('app').innerHTML = html;

En este caso, si te fijas bien en los literales, las plantillas de cadenas de texto se delimitan con el carácter de comillas o tildes invertidas, en lugar de las cadenas simples o dobles.

Las plantillas de cadenas de texto pueden contener marcadores, identificados por el signo de dólar y envueltos en llaves (${variable}).

El signo «+», que se usaba antiguamente, deja de ser utilizado y se puede armar una estructura HTML tabulada correctamente, lo que permite que su lectura sea mucho más cómoda y rápida.

Una de las ventajas más significativas de los template literals o plantillas literales en JavaScript ES6 es que pueden usar funciones en sus templates.

En realidad, cualquier cosa del lenguaje JavaScript puede estar dentro de una plantilla literal: una función, un método, o cualquier operador puede estar dentro de un template literal.