Literały szablonów w JavaScript | Wyjaśnione

JavaScript to język programowania na wysokim poziomie, który zapewnia nam typ danych string. W JavaScript można zaimplementować ciągi z pojedynczymi cytatami lub podwójnymi cytatami („lub„ ”). var mystring = "Hello World!";

Jednak typ danych ciągów jest ograniczony i nie oferuje wielu funkcji, takich jak język programowania wysokiego poziomu (Python, Ruby) daje swoim programistom. Ten problem został rozwiązany po wprowadzeniu JavaScript Literały szablonów w ES6. Zobaczmy, jakie literały szablonów są w JavaScript w tym poście.

Literały szablonów

Literały szablonów dają nam możliwość pracy z ciągami z większą kontrolą i większą mocą nad tradycyjnym typem danych stringowych. W przeciwieństwie do ciągów, literały szablonowe używają backticks „ zamiast pojedynczych lub podwójnych znaków cytatowych, jak pokazano poniżej:

var mystring = 'Hello World!';;

Niektóre z szablonów funkcji Dostarczają nam:

• Interpolacja: Przypisanie zmiennych i wyrażeń w literale szablonu.
• Strings multiline: nie potrzebujemy /N Aby przejść do innej linii, po prostu przechodzimy do innej linii w szablonie, a przeglądarka wie, że musi pokazać ten ciąg na innej linii.
• Oznaczone szablony: Zmienia literał szablonu, a następnie po zmianie szablonu dosłowne zwraca wynikowy ciąg. Otagowane szablony są takie jak funkcje, z wyjątkiem tego, że są wywoływane bez () nawias.

Zbadajmy te funkcje jeden po drugim:

Interpolacja

Zmienne i wyrażenia można łatwo interpolować w struna za pomocą literałów szablonów. Osadzanie wyrażenia w szablonie jest znane jako Interpolacja. Możemy osiągnąć interpolację za pomocą $ somevar składnia. Zobaczmy przykład:

var mystring = 'Hello World!';;
konsola.log („powiedział: $ MyString”);

W powyższym kodzie inicjowanie zmiennej i uzyskujemy dostęp do niej w ciągu za pomocą składni interpolacji. I aby wyświetlić wynik na konsoli, używamy konsoli.Metoda log ():

Ciągami wielopoziomowymi

Kolejnym zastosowaniem szablonu jest to, że daje nam możliwość łatwego zarządzania lub pisania ciągów w wielu liniach. Przed literałami szablonów było to trochę trudne i trudne, ponieważ musieliśmy użyć backslash wewnątrz podwójnych cytatów, aby poinformować przeglądarkę, że ciąg powinien znajdować się na następnym wierszu. Na przykład:

var myString = "Hello \ n"+"świat!";
konsola.log (MyString);

W powyższym kodzie zainicjowaliśmy ciąg i użyliśmy \N powiedzieć przeglądarce, że ciąg po \N powinno być na następnej linii.

Zobaczmy teraz, w jaki sposób możemy osiągnąć tę samą funkcjonalność za pomocą szablonu literału, w którym po prostu napiszemy drugi ciąg na innym wierszu:

var myString = 'Hello
Świat!';;
konsola.log (MyString);

Widzimy, że literały szablonów bardzo ułatwiły nam pisanie ciągów wielopoziomowych i jest łatwiejszy i zrozumiały.

Oznaczone szablony

Kolejnym potężnym szablonem funkcji daje nam literały oznaczone, które po prostu modyfikują ciąg szablonu, dołączając nazwę funkcji do początku ciągu szablonu. Mówiąc prosto, oznaczony szablon zmienia szablon literał i zwraca wynikowy ciąg.

Oznaczone szablony są zdefiniowane dokładnie jak funkcja, jednak po wywołaniu znacznika szablonu nie używasz () nawias. Składnia inicjalizacji funkcji znacznika podano poniżej:

Funkcja Tagname (literals,… podstawienia)
// Zwróć jakiś ciąg

Funkcja znacznika bierze dwa argumenty; Pierwszy to literały które wskazują dosłowne sznurki, a drugi to … Zastępstwa w którym przechowywane są kolejne dane wejściowe dla każdego zastępstwa.

Spójrzmy teraz na przykład, aby zaimplementować funkcję znacznika:

// szablon tagu
Funkcja MyTagName (MyString)
Powrót MyString;

// tworzenie oznaczonego szablonu
const wyjściowa = nazwa MyTagName'Hello;
// Wyświetl wynik
konsola.log (wyjście);

W powyższym kodzie utworzyliśmy funkcję, która zwraca ciąg. Następnie utworzyliśmy oznaczony szablon, a następnie nazwaliśmy powyższą funkcję szablonu znacznika, dla której używana składnia to: MYTAGNAME'HELLO Nazwa ' gdzie nazwa Mytagname to znacznik szablonu i Witam imię to szablon dosłowny. W końcu wyświetliśmy wynik za pomocą konsoli.Metoda log ():

Spójrzmy teraz na kolejny przykład, w którym przekazamy literały, a także zastąpienia funkcji znacznika:

// Wartości
pozwól mu się witam = "!";
niech name = "jhon";
// Funkcja znacznika
Funkcja transformacja (literały,… podstawienia)
konsola.log (literały); // ["", " Nazywam się "]
konsola.log (podstawienia); // [„Hello”, „Jhon”]

// Funkcja literalna tagu wywołania
przekształcić '$ pozdrów Nazywam się $ nazwa';

W powyższym kodzie najpierw definiujemy funkcję znacznika transformacji, która przyjmuje dwa argumenty; „Literały”, które jest tablicą i ma treść statyczną („mam na imię”), podczas gdy parametr spoczynku zastępców jest również tablicą posiadającą wszystkie tagi (pozdrowienia, nazwa). Dane wyjściowe powyższego kodu pokazano poniżej:

Wniosek

Standardowy ciąg danych dostarczony przez JavaScript nie był wystarczająco silny, stąd JavaScript wprowadził literały szablonów w ES6. Literały szablonów dają nam więcej mocy nad strunami i są inicjowane za pomocą back -ticks ". W tym poście widzieliśmy, jakie literały szablonów są w JavaScript wraz z szablonami funkcji literały oferują nam standardowy ciąg JavaScript.