Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską.
Zostań mistrzem ciągów dzięki temu przewodnikowi po JavaScript dotyczącemu formatowania, interpolacji i nie tylko.
W języku JavaScript ciąg to grupa znaków ujęta w parę pojedynczych lub podwójnych cudzysłowów. Istnieje wiele sposobów formatowania ciągów znaków w JavaScript.
Możesz użyć określonych metod lub operatorów do łączenia ciągów. Możesz nawet wykonać określone operacje, aby zdecydować, jaki ciąg pojawi się, gdzie i kiedy.
Dowiedz się, jak formatować ciągi JavaScript za pomocą metod łączenia i literałów szablonowych.
Konkatenacja ciągów
JavaScript umożliwia łączenie ciągów przy użyciu kilku podejść. Przydatnym podejściem jest tzw konkat() metoda. Ta metoda wykorzystuje dwa lub więcej ciągów. Używa pojedynczego ciągu wywołującego i przyjmuje jeden lub więcej ciągów jako argumenty.
stałe imię = "Jan";
stałe nazwisko = "Łania";pozwalać ciągVal;
stringVal = imię.concat("", nazwisko);
konsola.log (stringVal);
Tutaj concat łączy argumenty łańcuchowe (spację i nazwisko) z łańcuchem wywołującym (imię). Następnie kod przechowuje wynikowy nowy ciąg w zmiennej (stringVal) i drukuje nową wartość w konsoli przeglądarki:
Innym sposobem łączenia kolekcji łańcuchów jest użycie operatora plus. Ta metoda umożliwia łączenie zmiennych łańcuchowych i literałów łańcuchowych w celu tworzenia nowych łańcuchów.
stałe imię = "Jan";
stała nazwa_środkowa = "Mikrofon";
stałe nazwisko = "Łania";pozwalać ciągVal;
stringVal = imię + "" + drugie imię + "" + nazwisko;
konsola.log (stringVal);
Powyższy kod drukuje następujące dane wyjściowe w konsoli:
Trzecie podejście do łączenia łańcuchów JavaScript wymaga użycia znaku plus i równości. Ta metoda pozwala dodać nowy ciąg na końcu istniejącego.
stałe imię = "Jan";
stałe nazwisko = "Łania";pozwalać ciągVal;
stringVal = imię;
ciągVal += "";
stringVal += nazwisko;
konsola.log (stringVal);
Ten kod dodaje spację i wartość zmiennej lastName do zmiennej firstName, tworząc następujące dane wyjściowe:
Literały szablonowe
Literały szablonowe to funkcja ES6, która umożliwia formatowanie łańcuchów JavaScript. Literał szablonu używa pary znaczników wstecznych (`) do wyświetlania ciągów znaków. Ta metoda formatowania ciągów umożliwia wyświetlanie bardziej przejrzystych ciągów wielowierszowych w języku JavaScript.
pozwalać html;html = `<ul>
<li> Imię i nazwisko: John Doe </li>
<li> Wiek: 24 </li>
<li> Stanowisko: inżynier oprogramowania </li>
</ul>`;
dokument.body.innerHTML = html;
Powyższy kod JavaScript wykorzystuje HTML aby wydrukować listę trzech pozycji w przeglądarce:
Aby uzyskać ten sam wynik bez literałów szablonowych (lub przed literałami szablonowymi), musisz użyć cudzysłowów. Jednak nie będziesz w stanie rozszerzyć kodu na wiele wierszy, tak jak w przypadku literałów szablonowych.
pozwalać html;html = "<ul><li>Imię i nazwisko: John Doe</li><li>Wiek: 24</li><li>Stanowisko: inżynier oprogramowania</li></ul>";
dokument.body.innerHTML = html;
Interpolacja łańcuchów
Literały szablonowe umożliwiają używanie wyrażeń w łańcuchach JavaScript w procesie zwanym interpolacją. Dzięki interpolacji ciągów możesz osadzać wyrażenia lub zmienne w swoich ciągach przy użyciu metody ${wyrażenie} symbol zastępczy W tym miejscu wartość literałów szablonów JavaScript staje się naprawdę oczywista.
niech nazwa użytkownika = "Jane Doe";
pozwalać wiek = 21;
niech praca = "Twórca stron internetowych";
pozwalać doświadczenie = 3;pozwalać html;
html = `<ul>
<li> Nazwa: ${userName} </li>
<li> Wiek: ${wiek} </li>
<li> Nazwa stanowiska: ${job} </li>
<li> Lata doświadczenia: ${experience} </li>
<li> Poziom programisty: ${experience < 5? "Junior do średniozaawansowanego": "Senior"} </li>
</ul>`;
dokument.body.innerHTML = html;
Powyższy kod generuje następujące dane wyjściowe w konsoli:
Pierwsze cztery argumenty tzw ${wyrażenie} symbol zastępczy to zmienne łańcuchowe, ale piąty to wyrażenie warunkowe. Wyrażenie opiera się na wartości jednej ze zmiennych (doświadczenie), aby dyktować, co ma wyświetlić w przeglądarce.
Formatowanie elementów na Twojej stronie internetowej za pomocą JavaScript
Oprócz funkcjonalnego powiązania z tworzeniem stron internetowych, JavaScript współpracuje z HTML, wpływając na projekt i układ strony internetowej. Może manipulować tekstem, który pojawia się na stronie internetowej, tak jak ma to miejsce w przypadku literałów szablonowych.
Może nawet konwertować HTML na obrazy i wyświetlać je na stronie internetowej.
