Las plantillas de cadena, mejor conocidas como **template strings,**son una forma más fácil de crear:
- Cadenas con variables dentro (interpolación).
- Generar cadenas multilínea.
- Ejecutar expresiones, funciones y etiquetados.
let saludo = `Hola soy un Template String`;
console.log(saludo); //Imprime Hola soy un Template String
//strings multilínea
let mensaje = `No es quien seas en el interior,
tus actos son los que te definen...
Batman`;
console.log(mensaje);
/*
Imprime
No es quien seas en el interior,
tus actos son los que te definen...
Batman
*/
//variables en strings (interpolación)
let nombre = 'Jonathan';
console.log(`Hola ${nombre}`); //Imprime Hola Jonathan
//ejecutar expresiones
console.log(`Hola ${nombre}, tienes ${30 + 2} años`); //Imprime Hola Jonathan, tienes 32 años
//ejecutar funciones
let estaciones = ['Primavera', 'Verano', 'Otoño', 'Invierno'],
ol = `<ol>
${
estaciones.map(function (estacion) {
return `<li>${estacion}</li>`;
}).join('')
}
</ol>`;
console.log(ol); //Imprime <ol><li>Primavera</li><li>Verano</li><li>Otoño</li><li>Invierno</li></ol>
//función de etiquetado
const etiqueta = function (cadena, variable) {
console.log(cadena); //Imprime ["Hola ", "", raw: Array[2]]
console.log(variable); //Imprime Ulises
console.log(cadena[0] + variable); //Imprime Hola Ulises
};
let otroNombre = 'Ulises';
etiqueta`Hola ${otroNombre}`;
Recuerda que en EDteam tenemos varios cursos que te introducen y especializan en este maravilloso lenguaje:
- JavaScript desde cero
- Node.js desde cero
- JavaScript Avanzado: Paradigmas de Programación
- HTML5 Avanzado: Progressive Web Apps
- React desde cero
- Angular desde cero
- Vue.js desde cero
En el siguiente capítulo te hablaré de las funciones flecha mejor conocidas como arrow functions.
Artículos anteriores de la serie 'El estándar actual de JavaScript':
Se despide su amigo y docente digital Jonathan MirCha, sean felices, hasta siempre, nos leemos la próxima semana. Bye ?