17 - Template strings

¿Qué son los template strings?

Es una forma de indicar un String con una mayor facilidad para concatenar variables.


Estructura inicial

En nuestra carpeta de proyecto crearemos la siguiente estructura:

/
├── js/
│   └── 17-plantillas.js
└── index.html

Y un código sencillo para nuestro HTML:

<!DOCTYPE html>
<html lang="es">
<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">
    <script src="./js/17-plantillas.js"></script>
    <title>17 - Template strings</title>
</head>
<body>
    <h1>Temario de JavaScript</h1>
</body>
</html>

Declarando un String usando Template Strings

Normalmente usamos "" o '' para declarar un String. Para estas “plantillas”, usaremos `:

let variable = valor

let texto = `Texto a introducir con su ${variable}`
/* Esto sería lo mismo que hacer "Texto a introducir con su " + variable */

Ejemplos de Template Strings

let edad = 16
let nombre = "Marc"

console.log(`Hola, me llamo ${nombre}. Tengo ${edad} años.`) //Hola, me llamo Marc. Tengo 16 años.