V tomto výučbe sa pomocou príkladov dozviete viac o šablónach šablón JavaScriptu (reťazcoch šablón).
Literály šablón (reťazce šablón) vám umožňujú používať reťazce alebo vložené výrazy vo forme reťazca. Sú uzavreté v spätných útržkoch ``. Napríklad,
const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!
Poznámka : Šablónový literál bol predstavený v roku 2015 (tiež známy ako ECMAScript 6 alebo ES6 alebo ECMAScript 2015). Niektoré prehliadače nemusia podporovať použitie literálov šablón. Navštívte Doslovná podpora šablón JavaScriptu a dozviete sa viac.
Šablónové literály pre sláčiky
V starších verziách JavaScriptu by ste pre reťazce použili jednoduchú ''alebo dvojitú ponuku "". Napríklad,
const str1 = 'This is a string'; // cannot use the same quotes const str2 = 'A "quote" inside a string'; // valid code const str3 = 'A 'quote' inside a string'; // Error const str4 = "Another 'quote' inside a string"; // valid code const str5 = "Another "quote" inside a string"; // Error
Ak chcete vo vnútri reťazca použiť rovnaké úvodzovky, môžete použiť znak escape .
// escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code
Namiesto únikových znakov môžete použiť literály šablón. Napríklad,
const str1 = `This is a string`; const str2 = `This is a string with a 'quote' in it`; const str3 = `This is a string with a "double quote" in it`;
Ako vidíte, literály šablón nielen uľahčujú zahrnutie citácií, ale aj vylepšujú vzhľad nášho kódu.
Viacriadkové reťazce pomocou šablónových literálov
Šablónové literály tiež uľahčujú písanie viacriadkových reťazcov. Napríklad,
Použitím literálov šablón môžete nahradiť
// using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)
s
const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)
Výstup oboch týchto programov bude rovnaký.
Toto je dlhá správa, ktorá sa rozprestiera na viacerých riadkoch v kóde.
Interpolácia výrazov
Pred jazykom JavaScript ES6 by ste pomocou +operátora zreťazili premenné a výrazy v reťazci. Napríklad,
const name = 'Jack'; console.log('Hello ' + name); // Hello Jack
Pri literáloch šablón je o niečo jednoduchšie zahrnúť do reťazca premenné a výrazy. Na to používame $(… )syntax.
const name = 'Jack'; console.log(`Hello $(name)`); // template literals used with expressions const result = `The sum of 4 + 5 is $(4 + 5)`; console.log(result); console.log(`$(result < 10 ? 'Too low': 'Very high')`)
Výkon
Ahoj Jacku Súčet 4 + 5 je 9 Veľmi vysoký
Proces priraďovania premenných a výrazov vo vnútri literálu šablóny je známy ako interpolácia.
Označené šablóny
Za normálnych okolností by ste na odovzdanie argumentov použili funkciu. Napríklad,
function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);
Môžete však vytvoriť označené šablóny (ktoré sa správajú ako funkcia) pomocou literálov šablón. Používate značky, ktoré vám umožňujú analyzovať literály šablón s funkciou.
Označená šablóna je napísaná ako definícia funkcie. ()Pri volaní literálu však nezadávate zátvorky . Napríklad,
function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);
Výkon
(„Ahoj Jack“)
Pole reťazcových hodnôt sa odovzdáva ako prvý argument funkcie značky. Hodnoty a výrazy môžete tiež odovzdať ako zvyšné argumenty. Napríklad,
const name = 'Jack'; const greet = true; function tagExample(strings, nameValue) ( let str0 = strings(0); // Hello let str1 = strings(1); // , How are you? if(greet) ( return `$(str0)$(nameValue)$(str1)`; ) ) // creating tagged literal // passing argument name const result = tagExample`Hello $(name), How are you?`; console.log(result);
Výkon
Ahoj Jack, ako sa máš?
Týmto spôsobom môžete tiež vložiť viac argumentov do označeného šablóny.
