Novým prvkem přidaným do ES6 je šablonový literál. Je to nový typ pro vytváření řetězců v JavaScriptu, který přidává několik důležitých nových funkcí, jako je schopnost vytvářet víceřádkové řetězce a zahrnout výraz do řetězce. Jako vývojář mohou všechny tyto funkce zlepšit vaše schopnosti manipulace s řetězci a umožňují vám vytvářet dynamické řetězce.
Tento příspěvek bude ilustrovat literály šablony a jak je používat v JavaScriptu.
Co jsou literály šablony JavaScriptu (řetězce šablon)?
“ Doslovy šablony “ jsou běžně známé jako „ Řetězce šablony “. Jsou obklopeny zadním zaškrtnutím ( “ ) ve srovnání s uvozovkami v řetězcích. Jeho zástupné symboly jsou označeny znakem dolaru „ $ “ a složené závorky {} jako ' ${expression} ” je přijatelný v literálech šablony. Pokud chcete použít výraz, můžete jej vložit do „ ${expression} “ rámeček uvnitř zadních značek.
Šablonový literál je vylepšená verze standardního řetězce JavaScriptu. Substituce významně rozlišují mezi šablonovým literálem a běžným řetězcem. Proměnné a výrazy můžete integrovat do řetězce pomocí náhrad. Tyto proměnné a výrazy budou mít své hodnoty automaticky nahrazeny jádrem JavaScriptu.
Syntax
Pro deklaraci jednoho řetězce pomocí šablonových literálů použijte níže uvedenou syntaxi:
' textový řetězec '
Pro více řádků postupujte podle uvedené syntaxe:
' řetězec textového řádku 1
řetězec textového řádku
Pokud chcete přidat výraz do zadních značek, použije se následující syntaxe:
Pro lepší pochopení uvedeného konceptu si prohlédněte následující příklady.
Příklad 1: Deklarujte jednořádkový řetězec pomocí literálů šablony JavaScriptu
Obvykle je k vytvoření řetězce nutné použít jednoduché nebo dvojité uvozovky, ale v literálech šablony můžete vytvořit řetězec následovně:
konzole.log ( ' LinuxHint ' ) ;
Výstup ukazuje, že to funguje stejně jako jednoduché vytváření stingu pomocí jednoduchých nebo dvojitých uvozovek:
Příklad 2: Deklarujte víceřádkový řetězec pomocí literálů šablony JavaScriptu
Normálně pro tisk více řádků používáme operátor zřetězení (+) a pro přidání nového řádku lze použít (\n), což může často dělat kód složitým:
konzole.log ( 'Vítejte v LinuxHintu. \n ' + 'Nejlepší webová stránka pro učení dovedností.' ) ;
Při použití šablonových literálů můžete začít nový řádek stisknutím klávesy Enter na klávesnici v bloku backticks:
Nejlepší web pro dovednosti učení. ' ) ;
Výstup
Příklad 3: Řetězec se substitucemi výrazů
Zde nejprve vytvoříme dvě proměnné “ X ' a ' Y “, s hodnotami „ dvacet ' a ' patnáct “, respektive:
var x = dvacet ;var y = patnáct ;
Poté vytvořte proměnnou „ součet “ pro přidání „ X ' a ' Y “:
Pokud chcete přidat dvě čísla a zobrazit součet těchto čísel na konzole, je normálně nutné zřetězit řetězce a proměnné v běžném řetězcovém formátu, což často vytváří nepořádek při opakovaném používání jednoduchých nebo dvojitých uvozovek s řetězci a jejich spojování. mezi sebou as proměnnými pomocí ( + ):
Zatímco při použití šablonových literálů stačí zadat řetězce s proměnnými jako výraz uvnitř „ ${} “ v zadním bloku:
Výstup
Shromáždili jsme všechny podstatné informace týkající se šablonových literálů.
Závěr
“ Doslovy šablony ', také známý jako ' Řetězce šablony “, je vylepšená verze standardního řetězce JavaScript obklopeného zadním zaškrtnutím ( “ ) ve srovnání s uvozovkami v řetězcích. Umožňuje vytváření jednořádkových a víceřádkových řetězců bez použití operátoru zřetězení a zahrnuje výraz v řetězci. Tento příspěvek pojednává o šablonových literálech v JavaScriptu s vysvětlenými příklady.