Literały szablonu

Literały szablonu (Template Literals) w JavaScript to wygodna składnia umożliwiająca tworzenie złożonych ciągów znaków. Umożliwiają one łatwe wstawianie zmiennych i wyrażeń do ciągów tekstowych bez konieczności korzystania z konkatenacji. Literały szablonu są otoczone znakami backtick (`) zamiast pojedynczych lub podwójnych cudzysłowów i mogą zawierać miejsca na wstawki, oznaczone za pomocą ${expression}.

Przykład użycia literałów szablonu

W poniższym przykładzie zaprezentowano kilka podstawowych zastosowań literałów szablonu, w tym wstawianie zmiennych, wyrażeń, a także tworzenie wieloliniowych ciągów tekstowych.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Literały szablonu w JavaScript</title>
</head>
<body>
    <h3>Przykłady literałów szablonu w JavaScript</h3>
    <script>
        // Przykład 1: Podstawowe wstawianie wartości
        const name = 'Jan';
        const greeting = `Witaj, ${name}!`; // Wstawia wartość zmiennej 'name'
        console.log(greeting); // Wyświetla: "Witaj, Jan!"

        // Przykład 2: Wstawianie wyrażeń
        const price = 10;
        const vat = 0.23;
        const totalPrice = `Całkowita cena: ${price * (1 + vat)} zł`; // Wykonuje obliczenie
        console.log(totalPrice); // Wyświetla: "Całkowita cena: 12.3 zł"

        // Przykład 3: Wieloliniowe ciągi tekstowe
        const multiLineText = `To jest ciąg tekstowy
        zajmujący wiele
        linii.`; // Tworzy wieloliniowy ciąg tekstowy
        console.log(multiLineText);
        // Wyświetla tekst zajmujący wiele linii, zachowując formatowanie

        // Przykład 4: Zaawansowane wstawianie wyrażeń
        const item = 'kawa';
        const quantity = 3;
        const itemString = `Zamówiono ${quantity} ${quantity === 1 ? 'sztukę' : 'sztuki'} ${item}.`;
        console.log(itemString); // Wyświetla: "Zamówiono 3 sztuki kawa."
    </script>
</body>
</html>

Omówienie przykładów

  1. Podstawowe wstawianie wartości: Proste wstawienie zmiennej do ciągu tekstowego.
  2. Wstawianie wyrażeń: Użycie wyrażeń matematycznych w miejscu wstawienia, umożliwiające dynamiczne obliczenia.
  3. Wieloliniowe ciągi tekstowe: Utworzenie ciągu tekstowego zajmującego wiele linii bez konieczności używania znaków nowej linii (\n).
  4. Zaawansowane wstawianie wyrażeń: Warunkowe wstawianie tekstów zależnie od wartości zmiennej, użyteczne dla różnych form liczby mnogiej.

Podsumowanie

Literały szablonu w JavaScript znacząco upraszczają pracę z ciągami tekstowymi, pozwalając na czytelniejsze i bardziej ekspresyjne tworzenie tekstów. Dzięki możliwości wstawiania zmiennych, wyrażeń oraz tworzenia wieloliniowych ciągów tekstowych bez dodatkowego kodu, literały szablonu stają się nieocenionym narzędziem dla każdego programisty JavaScript.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs JavaScript od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top