Az ES6 (vagy ha úgy tetszik ES2015) segítségével sablon karakterláncokat hozhatunk létre a Template Literals segítségével. A sablon literálok olyan karakterláncok, amelyekbe változókat és függvényeket injektálhatunk. Lehetővé teszik számunkra, hogy pluszjelek + használata nélkül írjunk a karakterláncok és változók összekapcsolására. Ezek a karakterláncok szimpla vagy dupla idézőjelek helyett ` visszahúzójelet használnak.

Változó-összekapcsolás:

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

Sablon literál változóval:

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

A különbség itt az, hogy a változó neve körül dollárjelet és görbe zárójelet${} használunk, és nem pluszjelet ${variableName} . Ez olvashatóbbá teszi a karakterláncok és változók együttes használatát.

Sorok összekapcsolása:

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

Sablon literál sorok:

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

Most már kezdjük látni, hogy a sablon literálok nagyon hasonlítanak a sablonmotorokra. Lássuk, hogyan nézhet ki:

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

A sablon literal hozzáadta az objektum adatait a karakterlánchoz, hogy használhassuk. Változókat és objektumokat használhatunk a karakterláncban lévő adatok tájékoztatására. A szögletes zárójelek között mindent kiértékelünk, a számoktól kezdve a feltételeken át a függvényekig.

Math:

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

Terner feltétel:

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

Az egészet összerakva, függvényeket építhetünk az ismétlődő tartalom, például egy tömb kezelésére.

Function:

.