Cu ES6 (sau ES2015 dacă doriți), putem crea șiruri de șabloane cu literali de șablon. Template literals sunt șiruri de caractere în care putem injecta variabile și funcții. Ele ne permit să scriem fără să folosim semnele plus + pentru a concatena șiruri de caractere și variabile. Aceste șiruri folosesc un semn de ghilimele ` în loc de ghilimele simple sau duble.

Concatenarea variabilelor:

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

Literalul șablon cu variabilă:

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

Diferența aici este folosirea unui semn de dolar și a unor acolade curbe${} în jurul unui nume de variabilă și fără semnele plus ${variableName} . Acest lucru face ca utilizarea șirurilor de caractere și a variabilelor împreună să fie mai ușor de citit.

Concatenarea liniilor:

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

Liniile literalului de șablon:

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

Acum începem să vedem că literalele de șablon seamănă foarte mult cu motoarele de șablon. Să vedem cum ar putea arăta:

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

Un șablon literal a adăugat datele obiectului în șirul de caractere pentru ca noi să le folosim. Putem folosi variabile și obiecte pentru a informa datele din șir. Tot ceea ce se află între acolade este evaluat, de la numere la condiții și funcții.

Math:

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

Condiție ternară:

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

Punând totul laolaltă, am putea construi funcții pentru a gestiona conținuturi repetate, cum ar fi un array.

Funcție: