Med ES6 (eller ES2015 om du så vill) kan vi skapa mallsträngar med Template Literals. Template literals är strängar i vilka vi kan injicera variabler och funktioner. De gör att vi kan skriva utan att använda plustecken + för att sammanfoga strängar och variabler. Dessa strängar använder en bakåtmarkering ` i stället för enkla eller dubbla citattecken.

Variabelkonkatenation:

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

Malllitteral med variabel:

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

Skillnaden här är att man använder ett dollartecken och hängande parenteser${} runt ett variabelnamn och inga plustecken ${variableName} . Detta gör användningen av strängar och variabler tillsammans mer lättläst.

Linjekonkatenation:

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

Template literal lines:

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

Nu börjar vi se att template literals ser mycket ut som template engines. Låt oss se hur det kan se ut:

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 lade till objektdata i strängen så att vi kan använda dem. Vi kan använda variabler och objekt för att informera data i strängen. Allt mellan de hängande parenteserna utvärderas, från tal till villkor och funktioner.

Matematik:

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

Ternärt villkor:

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

Om vi sätter ihop allt detta kan vi bygga funktioner för att hantera upprepat innehåll, t.ex. en matris.

Funktion:

.