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.