ES6:n (tai halutessasi myös ES2015:n) avulla voimme luoda mallilitteraaleja mallilitteraaleilla. Template literals ovat merkkijonoja, joihin voimme pistää muuttujia ja funktioita. Niiden avulla voimme kirjoittaa käyttämättä plusmerkkejä + merkkijonojen ja muuttujien yhdistämiseen. Nämä merkkijonot käyttävät takaviivaa ` yksinkertaisten tai kaksinkertaisten lainausmerkkien sijasta.

Muuttujien ketjuttaminen:

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

Mallilitteraali muuttujan kanssa:

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

Erona tässä on dollarimerkin ja sulkeiden ${} käyttäminen muuttujan nimen ympärillä eikä plusmerkkien ${variableName} . Tämä tekee merkkijonojen ja muuttujien käytöstä yhdessä luettavampaa.

Rivien ketjuttaminen:

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

Mallilitteraalin rivit:

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

Nyt alamme huomata, että mallilitteraalit muistuttavat paljon mallinemoottoreita. Katsotaanpa, miltä se voisi näyttää:

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

Malliliteraali lisäsi objektin tiedot merkkijonoon käytettäväksi. Voimme käyttää muuttujia ja objekteja merkkijonon tietojen ilmoittamiseen. Kaikki sulkeiden välissä oleva arvioidaan, numeroista ehtoihin ja funktioihin.

Math:

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

Ternaarinen ehto:

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

Kokoamalla kaiken yhteen voisimme rakentaa funktioita toistuvan sisällön, kuten joukon, käsittelyyn.

Function:

.