ES6 parte 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo</title>
</head>
<body>
    <h2>ES6 String Templates</h2>
    <p id="test"></p>
    <p id="test2"></p>
    <p id="test3"></p>
    <p id="test4"></p>
    <p id="test5"></p>
    <p id="test6"></p>

    <script>
        /*

        CARACTERISTICAS AÑADIDAS POR ECMAScript6 (ES6) - PARTE 2
        Sinónimos:
            a) Template literals
            b) Template strings
            c) String Templates
            d) Backticks Syntax (``)  reemplazo de  "cadena" y 'cadena'
        */
        // cadenas
        let cadena = `Hola a todos`;
        document.getElementById("test").innerHTML = cadena;

        // comillas dentro de cadenas
        let cadena2 = `Se lo conoce como "Pepe"`;
        document.getElementById("test2").innerHTML = cadena2;

        // cadenas multilíneas para ser mas legible
        let cadena3 =
        `Uno, dos, tres
        cuatro, cinco, seis,
        y asi hasta
        el fin...`;
        document.getElementById("test3").innerHTML = cadena3;

        //===== Interpolación: ${}  ============
        // a) sustitución de variable
        let nombre = "Juan";
        let apellido = "Gomez";
        let texto = `Bienvenido ${nombre} ${apellido}`;
        document.getElementById("test4").innerHTML = texto;
        // b) Sustitución de expresiones
        let precio = 1050;
        let impuesto = 0.30;
        let total = `Total: ${(precio * (1+impuesto)).toFixed(2)}`;
        document.getElementById("test5").innerHTML = total;
        // c) HTML Templates
        let encabezado = "String Templates";
        let etiquetas = ["templates literals", "JavaScript", "ES6"];
        let html = `<h2>${encabezado}</h2><ul>`;
        for (const etiq of etiquetas) {
            html += `<li>${etiq}</li>`;
        }
        html += `</ul>`;
        document.getElementById("test6").innerHTML = html;
    </script>

</body>
</html>