With ES6 (lub ES2015, jeśli chcesz), możemy tworzyć ciągi szablonów za pomocą Template Literals. Szablonowe literały to łańcuchy, do których możemy wstrzykiwać zmienne i funkcje. Pozwalają nam one pisać bez używania znaków plusa + do konkatenacji łańcuchów i zmiennych. Te ciągi używają back-tick ` zamiast pojedynczych lub podwójnych cudzysłowów.

Konkatenacja zmiennych:

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

Template literal with variable:

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

Różnica tutaj polega na użyciu znaku dolara i nawiasów klamrowych${} wokół nazwy zmiennej i braku znaków plusa ${variableName} . To sprawia, że używanie łańcuchów i zmiennych razem jest bardziej czytelne.

Konkatenacja linii:

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

Linie literałów szablonów:

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

Teraz zaczynamy widzieć, że literały szablonów wyglądają bardzo podobnie do silników szablonów. Zobaczmy, jak to może wyglądać:

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

Dosłowność szablonu dodała dane obiektu do łańcucha, abyśmy mogli je wykorzystać. Możemy używać zmiennych i obiektów do informowania o danych w łańcuchu. Wszystko pomiędzy nawiasami klamrowymi jest obliczane, od liczb, przez warunki, po funkcje.

Math:

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

Warunek ternarny:

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

Składając to wszystko razem, moglibyśmy zbudować funkcje do obsługi powtarzającej się zawartości, takiej jak tablica.

Function:

.