Literały szablonu JavaScript

Nowy element dodany w ES6 to szablon literał. 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 wieloletnich i uwzględnienia wyrażenia w ciągu. Jako deweloper wszystkie te funkcje mogą zwiększyć twoje umiejętności manipulowania ciągami i umożliwienia tworzenia dynamicznych strun.

Ten post ilustruje literały szablonów i sposób ich użycia w JavaScript.

Co to są literały szablonów JavaScript (szablony)?

"Literały szablonów”Są powszechnie znane jako„Szablon". Są otoczeni przez backtick (") Charakter, w porównaniu z cytatami w strunach. Jego symbole zastępcze są oznaczone znakiem dolara „$”I kręcone aparaty ortodontyczne tak jak "$ wyrażenie”Jest dopuszczalny w literałach szablonów. Jeśli chcesz użyć wyrażenia, możesz umieścić je w „$ wyrażenie”Pudełko wewnątrz back -ticks.

Literał szablonu to ulepszona wersja standardowego ciągu JavaScript. Zastąpienia powodują znaczącą rozróżnienie między szablonem literalnym a zwykłym łańcuchem. Możesz zintegrować zmienne i wyrażenia z ciągiem za pomocą substytutów. Te zmienne i wyrażenia będą automatycznie zastąpione przez silnik JavaScript.

Składnia

Użyj poniższej składni do deklarowania pojedynczego ciągu za pomocą literałów szablonów:

„Tekst ciągów”

W przypadku wielu wierszy postępuj zgodnie z podaną składnią:

„String Linia tekstu 1
linia tekstowa ciągów

Jeśli chcesz dodać wyrażenie wewnątrz back -ticks, używana jest następująca składnia:

„String Text $ wyrażenie String Text”

Sprawdź następujące przykłady, aby lepiej zrozumieć określoną koncepcję.

Przykład 1: Deklaruj jeden ciąg linii za pomocą literałów szablonu JavaScript

Zwykle, aby utworzyć ciąg, konieczne jest użycie pojedynczych lub podwójnych cytatów, ale w literałach szablonów możesz utworzyć ciąg w następujący sposób:

konsola.log („Linuxhint”);

Dane wyjściowe pokazuje, że działa tak samo, jak proste utworzenie tworzenia za pomocą pojedynczych lub podwójnych cytatów:

Przykład 2: Deklaruj ciąg wieloliniowy za pomocą literałów szablonów JavaScript

Zwykle do drukowania wielu linii używamy operatora konatenacji (+) i do dodania nowej linii (\ n) można zastosować, co często może sprawić, że kod jest złożony:

konsola.Log („Witamy w Linuxhint.\ n " +" najlepsza strona internetowa umiejętności uczenia się.");

Podczas korzystania z literałów szablonów możesz uruchomić nowy wiersz, naciskając Enter z klawiatury w bloku backticks:

konsola.Log („Witamy w Linuxhint.
Najlepsza strona internetowa umiejętności uczenia się.');

Wyjście

Przykład 3: String z podstawieniami wyrażenia

Tutaj najpierw utworzymy dwie zmienne ”X" I "y”, Z wartościami„20" I "15”Odpowiednio:

var x = 20;
var y = 15;

Następnie utwórz zmienną „suma”Za dodanie„X" I "y”:

var sum = x + y;

Jeśli chcesz dodać dwie liczby i wyświetlić sumę tych liczb na konsoli, normalnie, konieczne jest połączenie ciągów i zmiennych w zwykłym formacie ciągów, które często tworzy bałagan do używania pojedynczych lub podwójnych cytatów wielokrotnie z strunami i dołączenie do nich ze sobą i ze zmiennymi używającymi (+):

konsola.log („suma x” + x + ”i„ + y + ”to„ + sum);

Podczas używania literałów szablonu musisz tylko określić ciągi ze zmiennymi jako wyrażenie wewnątrz „$ „W Backtick Block:

konsola.log ('suma x $ x i y $ y to $ sum');

Wyjście

Zebraliśmy wszystkie podstawowe informacje związane z literałami szablonu.

Wniosek

"Literały szablonów”, Znany również jako„Szablon”, To ulepszona wersja standardowego ciągu JavaScript otoczonego backtick (") Charakter, w porównaniu z cytatami w strunach. Umożliwia tworzenie ciągów jednoliniowych i wieloletkowych bez użycia operatora konatenacji i zawiera wyrażenie w ciągu. W tym poście omówiono literały szablonów w JavaScript z wyjaśnionymi przykładami.