004. Template Strings

En este capítulo vamos a ver 2 características de las cadenas de texto:

Concatenación
Interpolación

Concatenación

Para concatenar una cadena de texto con otra cadena, o con una variable, lo único que hay que hacer es utilizar el símbolo de la suma (+), de la siguiente manera.

Ejm

    <script>
        let nombre = "Francisco";
        let apellido = "Paredes";
        let saludo = "Hola mi nombre es " + nombre + " " + apellido;
        console.log(saludo);
    </script>

Interpolación de variables

Interpolar significa meter dentro de una cadena de texto el valor dinámicamente de una variable, para ello tenemos que hacer uso de una característica denominada Template String, de la siguiente manera. Para ello utilizamos el acento invertido.

Ejm

        let saludo2 = `Hola mi nombre es ${nombre} ${apellido}`;

El ejercicio completo con concatenación e interpolación queda de la siguiente manera.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template Strings</title>
</head>

<body>
    <h1>Template Strings</h1>

    <script>
        let nombre = "Francisco";
        let apellido = "Paredes";
        let saludo = "Hola mi nombre es " + nombre + " " + apellido;
        let saludo2 = `Hola mi nombre es ${nombre} ${apellido}`;

        console.log(saludo);
        console.log(saludo2);
    </script>
</body>
</html>

Veamos otro ejm de interpolación.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template Strings 2</title>
</head>

<body>
    <h1>Template Strings 2</h1>

    <script>
        let ul = `
            <ul>
                <li>Primavera</li>
                <li>Verano</li>
                <li>Otoño</li>
                <li>Invierno</li>
            </ul>
        `;

        console.log(ul);
    </script>
</body>
</html>