V ES6 (nebo ES2015, chcete-li) můžeme vytvářet šablonové řetězce pomocí Template Literals. Šablonové literály jsou řetězce, do kterých můžeme vkládat proměnné a funkce. Umožňují nám psát bez použití znamének plus + pro spojování řetězců a proměnných. Tyto řetězce používají místo jednoduchých nebo dvojitých uvozovek zpětný křížek `.

Spojování proměnných:

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

Šablonový literál s proměnnou:

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

Rozdíl je zde v použití znaku dolaru a kudrnatých závorek${} kolem názvu proměnné a bez znamének plus ${variableName} . Díky tomu je použití řetězců a proměnných dohromady čitelnější.

Spojování řádků:

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

Řádky šablonového literálu:

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

Nyní začínáme vidět, že šablonové literály vypadají podobně jako šablonové motory. Podívejme se, jak by to mohlo vypadat:

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

Šablonový literál nám do řetězce přidal data objektu, která můžeme použít. K informování o datech v řetězci můžeme použít proměnné a objekty. Vše mezi složenými závorkami se vyhodnocuje, od čísel přes podmínky až po funkce.

Matematické:

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

Ternární podmínka:

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

Složením toho všeho dohromady bychom mohli vytvořit funkce pro zpracování opakovaného obsahu, například pole.

Funkce:

.