Template Strings en JavaScript

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:

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 ?

Sigue leyendo