V tomto kurzu se na příkladech dozvíte o JavaScript Template Literals (Template Strings).
Literály šablon (řetězce šablon) umožňují používat řetězce nebo vložené výrazy ve formě řetězce. Jsou uzavřeny v backticks ``. Například,
const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!
Poznámka : Šablona literálu byla zavedena v roce 2015 (také známá jako ECMAScript 6 nebo ES6 nebo ECMAScript 2015). Některé prohlížeče nemusí podporovat použití literálů šablon. Navštivte literární podporu šablon JavaScript a dozvíte se více.
Šablona literálů pro smyčce
V dřívějších verzích JavaScriptu byste pro řetězce použili jednoduchou ''nebo dvojitou nabídku "". Napří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
Chcete-li použít stejné uvozovky uvnitř řetězce, můžete použít znak escape .
// escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code
Místo použití řídicích znaků můžete použít literály šablon. Napří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`;
Jak vidíte, literály šablon nejen usnadňují zahrnutí nabídek, ale také vylepšují náš kód.
Víceřádkové řetězce pomocí šablony literálů
Literálové šablony také usnadňují psaní víceřádkových řetězců. Například,
Pomocí literálů šablon můžete nahradit
// 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 obou těchto programů bude stejný.
Toto je dlouhá zpráva, která se rozprostírá přes více řádků v kódu.
Interpolace výrazů
Před JavaScript ES6 byste použili +operátor ke zřetězení proměnných a výrazů v řetězci. Například,
const name = 'Jack'; console.log('Hello ' + name); // Hello Jack
U literálů šablon je o něco snazší zahrnout proměnné a výrazy do řetězce. K tomu používáme $(… )syntaxi.
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ýstup
Ahoj Jacku Součet 4 + 5 je 9 Velmi vysoký
Proces přiřazování proměnných a výrazů uvnitř literálu šablony je známý jako interpolace.
Označené šablony
Za normálních okolností byste k předání argumentů použili funkci. Například,
function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);
Můžete však vytvořit označené šablony (které se chovají jako funkce) pomocí literálů šablon. Používáte značky, které vám umožňují analyzovat literály šablon pomocí funkce.
Označená šablona je napsána jako definice funkce. ()Při volání literálu však nezadáváte závorky . Například,
function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);
Výstup
(„Ahoj Jacku“)
Pole řetězcových hodnot se předává jako první argument funkce značky. Hodnoty a výrazy můžete také předat jako zbývající argumenty. Napří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ýstup
Ahoj Jacku, jak se máš?
Tímto způsobem můžete také předat více argumentů v označeném šablony.
