Jak używać literałów szablonów ES6 w JavaScript
W programowaniu termin “dosłowny” odnosi się do notacja wartości W kodzie. Na przykład notujemy wartość ciągu za pomocą a literał ciągu które są znakami ujętymi w podwójne lub pojedyncze cudzysłowy ("bla", 'bar', „To jest sznurek!”).
Literały szablonów zostały wprowadzone w ECMAScript 6. Działają podobnie jak literały łańcuchowe; oni produkują wartości szablonu i surowe wartości szablonu, oba są ciągami.
Jednak w przeciwieństwie do literałów ciągów, literały szablonów mogą generować wartości, które są sznurki wielowarstwowe, coś, co można osiągnąć za pomocą literału string tylko przez dodawanie nowych znaków linii (n) do tego.
Literały szablonów mogą również tworzyć ciągi z innymi wartościami (wyprowadzone z wyrażeń), dla których musiałbyś użyć plus operator w dosłownym łańcuchu („Twój identyfikator to:” + idNo; gdzie idNo jest wyrażeniem zmiennej o wartości liczbowej).
Wszystkie te funkcje sprawiają, że literały szablonów są bardziej preferowane utwórz wartości łańcuchowe.
Składnia literałów szablonów
Ogranicznikiem literału szablonu jest backtick ' postać (znany również jako znak backquote lub symbol akcentu grobowego). Wyrażenie wewnątrz literału (którego wartość to oceniane w czasie wykonywania i zawarte w końcowej wartości wytworzonej przez literał) jest zawarte w nawiasy klamrowe z poprzedzający znak dolara $.
'string $ someExpression more string'
Oto kilka przykłady literałów szablonów produkcja niezmieniony, podstawiony (wyrażenia zastąpione wartościami oszacowanymi) i wielowarstwowy smyczki.
console.log ('hello'); // hello var name = "Joan"; console.log ('hello $ name'); // witaj Joan console.log („Drogi Joan, witaj.”); // Drogi Joan, // Witaj. Uciekające i surowe wartości szablonu
W dosłownym szablonie ' (backtick), \ (odwrotny ukośnik) i $ (znak dolara) znaki należy uciekać używając znak ucieczki \ jeśli mają być włączone do ich wartości szablonu.
Domyślnie wszystkie sekwencje ucieczki w literale szablonu to ignorowane. Jeśli chcesz dołączyć go do wyjścia, musisz użyć jego surowa wartość szablonu.
console.log ('inline code in markup:' code '); // kod inline w znacznikach:' code 'var name = "Joan"; console.log (' hello $ name. '); / / hello $ name. console.log (String.raw'hello $ name. '); // witaj $ name. The String.raw metoda wyprowadza surowe wartości szablonu (surowa forma łańcucha literału szablonu). W powyższym kodzie wywołanie funkcji surowy metoda określana jest jako “otagowany szablon”.
Oznaczone szablony
Tagowany szablon to wywołanie funkcji gdzie, zamiast zwykłych nawiasów (z opcjonalnymi parametrami) oprócz nazwy funkcji, jest literał szablonu z której funkcja pobiera swoje argumenty.
Więc zamiast wywoływać taką funkcję:
foo (ArgumentsForFoo);
Nazywa się to tak:
foo'ATemplateStringProvidingArgumentsForFoo ';
Funkcja bla nazywa się a funkcja znacznika. Pierwszym argumentem otrzymanym z literału szablonu jest szyk zwany obiekt szablonu.
Obiekt szablonu (tablica) jest zachowany wszystkie wartości ciągu interpretowane z literału szablonu i ma surowy właściwość (inna tablica), która zawiera wszystkie nieprzetworzone wartości ciągu interpretowane z tego samego literału.
Po obiekcie szablonu argumenty funkcji znacznika obejmują wszystkie oceniane wartości zewnętrzne obecne w tym literale (te zawarte w nawiasach klamrowych $ ).
W poniższym kodzie bla funkcja jest tworzona wypisz swoje argumenty. Następnie wywoływana jest funkcja w otagowanym szablonie mody, z literałem szablonu niosącym dwa wyrażenia (imię i ID).
var name = "John"; var id = 478; foo'hello $ name. Twój identyfikator to: $ id. '; funkcja foo () console.log (argumenty [0]); // Tablica ["witaj", ". Twój identyfikator to:", "." ] console.log (argumenty [1]); // John console.log (argumenty [2]); // 478
Pierwszy podany argument to obiekt szablonu przenosząc wszystkie ciągi interpretowane z literału szablonu, drugi i trzeci argument to oceniane wartości wyrażeń, imię i ID.
The surowy własność
Jak wspomniano wcześniej, obiekt szablonu ma właściwość zwana surowy która jest tablicą zawierającą wszystkie nieprzetworzone wartości ciągu interpretowane z literału szablonu. W ten sposób możesz uzyskać dostęp do surowy własność:
var name1 = "John", name2 = "Joan"; foo'hello $ name1, $ name2, jak się masz? '; funkcja foo () console.log (argumenty [0]); // Tablica ["witaj $ name1,", ", jak się masz?"] Console.log (argumenty [0] .raw); // Tablica ["hello $ name1", ", jak się masz?"] Console.log (argumenty [1]); // Joan
Użyj przypadków oznaczonych szablonów
Szablony oznaczone są przydatne, gdy trzeba rozbić sznurek w oddzielnych częściach, jak to często bywa w adresie URL, lub podczas analizowania języka. Znajdziesz kolekcję tutaj otagowano przykłady szablonów.
Poza IE, literały szablonów to obsługiwane we wszystkich głównych przeglądarkach.
Poniżej znajdziesz przykłady funkcji znaczników różne podpisy które reprezentują argumenty:
var name = "John"; foo'hello $ name, jak się macie? ”; bar'hello $ name, jak się macie? ”; funkcja foo (… args) console.log (args); // Array [Array ["witaj", ", jak się masz?"], "John"] pasek funkcji (strVals,… exprVals) console.log (strVals); // Tablica ["witaj", ", jak się macie?" ] console.log (exprVals); // Array ["John"]
w bar funkcja, pierwszy parametr (strVals) jest obiekt szablonu a drugi (który używa składni spreadu) to tablica, która się zebrała wszystkie oszacowane wartości wyrażenia z literału szablonu przekazanego do funkcji.
Połóż sznurek razem
Jeśli chcesz uzyskać całe zdanie (wywodzący się z literału) wewnątrz funkcji znacznika, łącz wszystkie wartości tablic przenoszących łańcuchy szablonów i oszacowane wartości wyrażenia. Lubię to:
funkcja foo (strs,… exprs) // jeśli w literale zawarte są jakieś wyrażenia if (exprs.length! == 0) var n = strs.length - 1, result = "; for (var i = 0 ; ja < n; i++) result += strs[i] + exprs[i]; result += strs[n]; console.log(result); //"Hello John." // if there are no expressions included in the literal else console.log(strs[0]); name = 'John'; foo'Hello $name.';
The strs tablica zawiera wszystkie struny znaleźć w dosłownym i exprs trzyma wszystkie oszacowane wartości wyrażenia z dosłownego.
Jeśli nawet jedna wartość wyrażenia istnieje, połącz każdą wartość tablicy z strs (z wyjątkiem ostatniego) o tej samej wartości indeksu exprs. Następnie na końcu dodaj ostatnią wartość strs tablica do połączonego łańcucha, tworząc kompletne zdanie tą drogą.
