Con ES6 (o ES2015 si quieres), podemos crear cadenas de plantilla con Template Literals. Los Template Literals son cadenas en las que podemos inyectar variables y funciones. Nos permiten escribir sin usar signos de más + para concatenar cadenas y variables. Estas cadenas utilizan un signo de retroceso ` en lugar de comillas simples o dobles.

Concatenación de variables:

var name = "Josh";
var string = "Hello " + name;// output = <p>Hello Josh</p>

Literal de plantilla con variable:

let name = "Josh";
let string = `Hello ${name}`;// output = <p>Hello Josh</p>

La diferencia aquí es utilizar un signo de dólar y llaves${} alrededor de un nombre de variable y no signos de más ${variableName} . Esto hace que el uso de cadenas y variables juntas sea más legible.

Concatenación de líneas:

var string = "The quick brown fox " +
"jumps over " +
"the lazy dog";

Líneas de literales de plantilla:

let string = `The quick brown fox
jumps over
the lazy dog`;

Ahora estamos empezando a ver que los literales de plantilla se parecen mucho a los motores de plantilla. Veamos cómo podría ser:

let data = { greeting: 'Hello', name: 'Josh' };
let template = `<p>${data.greeting} {data.name}</p>`;
element.innerHTML = template;// output = <p>Hello Josh</p>

Un literal de plantilla añadía los datos del objeto en la cadena para que lo usáramos. Podemos usar variables y objetos para informar los datos en la cadena. Todo lo que hay entre las llaves se evalúa, desde los números hasta las condiciones y las funciones.

Math:

let number = `${2 * 5}`;// output = 10

Condición ternaria:

let time = 'night';
let string = `Good ${time === 'night' ? 'evening' : 'day'}, Josh`;// output = Good evening, Josh

Poniendo todo junto, podríamos construir funciones para manejar contenido repetido como un array.

Función: