Template Strings — Js ES6

Germán Cutraro
Aug 14, 2017 · 2 min read

Una genialidad que nos trae ES6 son los Template Strings.

Esta técnica viene a reemplazar, de alguna forma, a la concatenación desmedida. Su característica principal es que nos permite incluir variables y operaciones dentro de la cadena.

Anteriormente haciamos lo siguiente:

let nombre = 'Germán';
console.log('Mi nombre es ' + nombre);
// --> Mi nombre es Germán

Sintaxis

Para componer un Template String lo hacemos con esta especie de comillas `` Luego para incluir variables y operaciones dentro del template lo hacemos de la siguiente forma ${variable o operación}

Ahora veamos un ejemplo con Template Strings:

let nombre = 'Germán';
console.log(`Mi nombre es ${nombre}`);
// --> Mi nombre es Germán

Como podemos observar, dentro del template incluimos de una forma dinámica la variable nombre.

Usando operaciones:

function sum (x, y) { 
return `La suma entre ${x} y ${y} es igual a: ${x + y}`;
}
console.log( sum(10, 3) ); // --> La suma entre 10 y 3 es igual a: 13

Como podemos observar no solo podemos imprimir variables, sino también podemos hacer operaciones del estilo ${x + y}

Sin embargo, hay casos en los cuales resulta más que interesante! un simple ejemplo podría ser:

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul id="output"></ul>
</body>
</html>
JAVASCRIPTconst output = document.querySelector('#output');let data = [
{name: 'John', age: 33, language: 'JavaScript'},
{name: 'Chris', age: 23, language: 'Python'},
{name: 'Nick', age: 43, language: 'Java'},
];
let template = ``;data.forEach(function (person) {
template += `<li>
${person.name} tiene
${person.age} años y programa en
${person.language}
</li>`;
});
output.innerHTML = template;RESULTADO:
John tiene 33 años y programa en JavaScript
Chris tiene 23 años y programa en Python
Nick tiene 43 años y programa en Java

Es decir, hacer templates de html usando templates strings de esta forma:

template += `<li>
${person.name} tiene
${person.age} años y programa en
${person.language}
</li>`;

Cuando si no usamos esta técnica tendríamos que hacer lo siguiente:

template += '<li>' + person.name + ' tiene ' + person.age + ' años y                               programa en ' + person.language;

Mas simple no?



Espero que te haya servido!

Por favor compártelo!

Germán Cutraro

Written by

Full Stack JavaScript Developer // germancutraro.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade