Utilizando JavaScript template String

El concepto de JavaScript template String es parte de JavaScript ES6 . El manejo de plantillas es general a todos los lenguajes de programación .  Java dispone de Thymeleaf , .NET de Razor y PHP de Smarty . JavaScript también dispone de su propio universo de plantillas . Pero hace tiempo se echaba en falta disponer de algún tipo de sistema de plantillas integrado en el propio lenguaje. En ES6 aparecen los JavaScript template Strings que nos permiten usar plantillas sencillas directamente en el código, vamos a verlo.

var nombre="cecilio";
var plantilla= `hola que tal estas ${nombre}`;
console.log(plantilla);

El resultado imprime el nombre por la consola :

Las plantillas son muy practicas y están deliminadas por el caracter ” `  “ . Nos permiten simplificar sobre manera la forma de construir una estructura HTML dinámica de forma sencilla. Podemos hacer lo mismo con un objeto de JavaScript.

var objeto={nombre:"cecilio"};
var plantilla= `hola que tal estas ${objeto.nombre}`;
console.log(plantilla);

El resultado es idéntico:

Ademas pueden ocupar varias lineas de código sin verse afectadas,  evitando las típicas concatenaciones.

var objeto={nombre:"cecilio"};
var plantilla= `


<div>
hola que tal estas ${objeto.nombre}
</div>

`;

window.onload=function() {

var body= document.getElementsByTagName("body")[0];
console.log(body);
body.innerHTML=plantilla;
}

 

El resultado se muestra en la página:



Soportan ademas el uso de expresiones lo que le añade una flexibilidad adicional

var alumno={nombre:"pedro",nota:3};
var plantilla= `

<div>
hola que tal estas ${alumno.nombre}
${alumno.nota>5? "aprobado":"suspenso"}
</div>


`;

window.onload=function() {

var body= document.getElementsByTagName("body")[0];
body.innerHTML=plantilla;
}

En este caso dependiendo de la nota se imprime aprobado o suspenso en la pantalla.

JavaScript Template String y programación funcional

Por otro lado las podemos usar combinadas con programación funcional por ejemplo para generar de una forma sencilla una lista de divs a partir de un array de elementos en formato JSON.

var alumnos=[{nombre:"pedro",nota:3},{nombre:"angel",nota:7}];
var plantilla= `
<div>
${alumnos.map(a=> `${a.nombre} ${a.nota>5?"aprobado":"suspenso"}`)}
</div>

`;

window.onload=function() {

var body= document.getElementsByTagName("body")[0];
console.log(body);
body.innerHTML=plantilla;
}

Podemos ver los datos:

En definitiva las JavaScript Template Strings son muy prácticos cuando trabajamos con JavaScript ES6.

1. JavaScript High Order Functions y su manejo
2. El uso de JavaScript for in vs for of
3. JavaScript Observers vs Arrays