Med ES6 (eller ES2015, hvis du vil) kan vi oprette skabelonstrenge med Template Literals. Template literals er strenge, som vi kan injicere variabler og funktioner i. De giver os mulighed for at skrive uden at bruge plustegn + til at sammenkæde strenge og variabler. Disse strenge bruger et bag-tegn ` i stedet for enkelt- eller dobbelte anførselstegn.

Variabel sammenkædning:

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

Skabelonlitteral med variabel:

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

Den forskel her er, at vi bruger et dollartegn og en parentes${} omkring et variabelnavn og ingen plustegn ${variableName} . Dette gør brugen af strenge og variabler sammen mere læsbar.

Linjekonkatenation:

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

Template literal-linjer:

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

Nu begynder vi at se, at template literals ligner template engines meget. Lad os se, hvordan det kunne se ud:

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

En template literal tilføjede objektdataene i strengen, så vi kunne bruge dem. Vi kan bruge variabler og objekter til at informere dataene i strengen. Alt mellem de svungne parenteser evalueres, fra tal til betingelser til funktioner.

Math:

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

Ternær betingelse:

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

Samlet set kunne vi bygge funktioner til at håndtere gentaget indhold som f.eks. et array.

Funktion: