Nowym elementem dodanym w ES6 jest literał szablonu. Jest to nowy typ do tworzenia ciągów w JavaScript, który dodaje kilka ważnych nowych funkcji, takich jak możliwość tworzenia ciągów wielowierszowych i dołączania wyrażenia do ciągu. Jako programista wszystkie te funkcje mogą zwiększyć twoje umiejętności manipulowania strunami i umożliwić tworzenie dynamicznych struny.
Ten post zilustruje literały szablonów i sposób ich użycia w JavaScript.
Co to są literały szablonów JavaScript (ciągi szablonów)?
“ Literały szablonów ” są powszechnie znane jako „ Ciągi szablonów ”. Otacza je backticks ( “ ), w porównaniu z cudzysłowami w ciągach. Jego symbole zastępcze są oznaczone znakiem dolara „ $ ”, oraz nawiasy klamrowe {} tak jak ' ${wyrażenie} ” jest dopuszczalne w literałach szablonu. Jeśli chcesz użyć wyrażenia, możesz umieścić je w „ ${wyrażenie} ” pudełko wewnątrz backticków.
Literał szablonu to ulepszona wersja standardowego ciągu JavaScript. Podstawienia wprowadzają istotne rozróżnienie między literałem szablonu a zwykłym ciągiem. Zmienne i wyrażenia można integrować w ciągu za pomocą substytutów. Wartości tych zmiennych i wyrażeń zostaną automatycznie zastąpione przez silnik JavaScript.
Składnia
Użyj poniższej składni, aby zadeklarować pojedynczy ciąg znaków za pomocą literałów szablonu:
` ciąg tekstowy `
W przypadku wielu wierszy postępuj zgodnie z podaną składnią:
` wiersz tekstu ciąg 1
wiersz tekstu ciąg
Jeśli chcesz dodać wyrażenie wewnątrz zaznaczeń, używana jest następująca składnia:
Zapoznaj się z poniższymi przykładami, aby lepiej zrozumieć podane pojęcie.
Przykład 1: Zadeklaruj pojedynczy ciąg linii za pomocą literałów szablonu JavaScript
Zwykle, aby utworzyć ciąg, wymagane jest użycie pojedynczego lub podwójnego cudzysłowu, ale w literałach szablonów można utworzyć ciąg w następujący sposób:
konsola.log ( ` LinuxWskazówka ` ) ;
Wynik pokazuje, że działa to tak samo, jak proste tworzenie żądła za pomocą pojedynczych lub podwójnych cudzysłowów:
Przykład 2: zadeklaruj wielowierszowy ciąg znaków za pomocą literałów szablonu JavaScript
Zwykle do drukowania wielu wierszy używamy operatora konkatenacji (+), a do dodawania nowego wiersza można użyć (\n), co często może komplikować kod:
konsola.log ( 'Witamy w LinuxHint. \n ' + „Najlepsza strona internetowa do nauki umiejętności”. ) ;
Podczas korzystania z literałów szablonowych możesz rozpocząć nową linię, naciskając klawisz Enter na klawiaturze w bloku backticks:
Najlepsza strona internetowa dla uczenie się umiejętności. ` ) ;
Wyjście
Przykład 3: Ciąg z podstawieniami wyrażeń
Tutaj najpierw utworzymy dwie zmienne „ x ' oraz ' Tak ”, z wartościami „ 20 ' oraz ' piętnaście ”, odpowiednio:
zmienna x = 20 ;zmienna y = piętnaście ;
Następnie utwórz zmienną „ suma ” za dodanie „ x ' oraz ' Tak ”:
Jeśli chcesz dodać dwie liczby i wyświetlić sumę tych liczb w konsoli, zwykle wymagane jest połączenie ciągów i zmiennych w zwykłym formacie ciągu, co często powoduje bałagan, aby wielokrotnie używać pojedynczych lub podwójnych cudzysłowów z ciągami i łączyć je ze sobą i ze zmiennymi za pomocą ( + ):
Korzystając z literałów szablonu, wystarczy określić ciągi ze zmiennymi jako wyrażenie wewnątrz „ ${} ” w zaznaczonym bloku:
Wyjście
Zebraliśmy wszystkie niezbędne informacje związane z literałami szablonów.
Wniosek
“ Literały szablonów ”, znany również jako „ Ciągi szablonów ”, to ulepszona wersja standardowego ciągu JavaScript otoczonego znacznikiem ( “ ), w porównaniu z cudzysłowami w ciągach. Umożliwia tworzenie ciągów jedno- i wielowierszowych bez użycia operatora konkatenacji i zawiera wyrażenie w ciągu. W tym poście omówiono literały szablonów w JavaScript z objaśnionymi przykładami.