0Pricing
JavaScript Academy · Lekcja

Praktyczne zastosowania tagowanych literałów szablonowych

Proszę tworzyć bezpieczny HTML i stylizowane ciągi znaków za pomocą tagów.

Praktyczne zastosowania tagowanych literałów szablonowych to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Tagi w praktyce

Szablony tagowane są wykorzystywane przez wiele bibliotek: do escapowania HTML, styled components, zapytań GraphQL i i18n. Wspólną ideą jest przechwytywanie interpolowanych wartości w celu ich bezpiecznego przetworzenia.

function tag(s, ...v) { return s[0] + v[0] + s[1] }
console.log(tag(["<", ">"], "b"))

Problem z escapowaniem

Podczas tworzenia kodu HTML na podstawie danych wprowadzonych przez użytkownika znaki specjalne, takie jak znak mniejszości, mogą posłużyć do wstrzyknięcia znaczników. Funkcja tagująca może automatycznie escapować te znaki, ale tylko w interpolowanych wartościach.

const danger = "<script>"
console.log("raw: " + danger)

Pomocnicza funkcja escapująca

Najpierw definiujemy funkcję pomocniczą, która zastępuje niebezpieczne znaki bezpiecznymi encjami HTML.

function escapeHtml(str) {
  return String(str)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
}
console.log(escapeHtml("<b>"))

Bezpieczny tag HTML

Teraz tworzymy tag, który escapuje każdą interpolowaną wartość, ale pozostawia statyczne części szablonu bez zmian, ponieważ pochodzą one od zaufanego programisty.

function escapeHtml(str) {
  return String(str).replace(/</g, "&lt;").replace(/>/g, "&gt;")
}
function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? escapeHtml(values[i]) : "")
  })
  return out
}
console.log(safe(["<p>", "</p>"], "<script>"))

Dlaczego części statyczne pozostają niezmienione

Niezaufanymi danymi użytkownika są tylko interpolowane wartości. Literałowe części szablonu zostały zapisane przez programistę, dlatego pozostają nieescapowane, aby zamierzone znaczniki działały prawidłowo.

function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const safer = values[i] !== undefined ? String(values[i]).replace(/</g, "&lt;") : ""
    out += s + safer
  })
  return out
}
console.log(safe(["<b>", "</b>"], "<i>x</i>"))

Tag formatujący wynik

Inny wzorzec polega na ujmowaniu interpolowanych wartości w znaczniki formatowania, na przykład w celu wyróżnienia liczb w raporcie.

function money(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? "$" + Number(values[i]).toFixed(2) : "")
  })
  return out
}
console.log(money(["Total: ", ""], 9.5))

Budowanie ciągów zapytań

Tagi mogą kodować wartości na potrzeby adresów URL, escapując każdą interpolowaną część, dzięki czemu statyczna struktura pozostaje niezmieniona, a dane są bezpiecznie zakodowane.

function url(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? encodeURIComponent(values[i]) : "")
  })
  return out
}
console.log(url(["/search?q=", ""], "a b&c"))

Liczba pojedyncza i mnoga

Tag może sprawdzić wartość i odpowiednio zmodyfikować otaczający ją tekst, na przykład wybrać formę liczby pojedynczej lub mnogiej.

function plural(strings, count) {
  const noun = count === 1 ? "item" : "items"
  return strings[0] + count + " " + noun
}
console.log(plural(["You have "], 1))
console.log(plural(["You have "], 3))

Usuwanie wcięć

Tagi mogą uporządkować wielowierszowe szablony, usuwając początkowe wcięcia z każdego wiersza i tworząc schludny wynik.

function dedent(strings) {
  return strings[0].split("\n").map(function (l) { return l.trim() }).join("\n")
}
console.log(dedent(["  a\n  b\n  c"]))

Łączenie tagów

Można łączyć zachowania, sprawiając, że jeden tag wywołuje funkcje pomocnicze. W tym przypadku tag zarówno opakowuje wartości, jak i je wyróżnia.

function emph(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const v = values[i] !== undefined ? "**" + values[i] + "**" : ""
    out += s + v
  })
  return out
}
console.log(emph(["Note: ", "!"], "important"))

Kiedy nie używać tagów

W przypadku prostych ciągów znaków wystarczy zwykły literał szablonowy. Po funkcję tagującą należy sięgać tylko wtedy, gdy potrzebna jest spójna transformacja interpolowanych wartości, na przykład escapowanie lub lokalizacja.

const name = "Lee"
console.log("Welcome, " + name)

Szybki test

Proszę sprawdzić swoją praktyczną wiedzę na temat tagów.

Podsumowanie

Podsumowanie: Szablony tagowane umożliwiają tworzenie bezpiecznych i sformatowanych wyników.

  • Escapuj tylko interpolowane wartości, aby zapewnić bezpieczeństwo HTML
  • Części statyczne pozostają zaufane i niezmienione
  • Używaj tagów do stylowania, kodowania i obsługi liczby pojedynczej oraz mnogiej
  • Wybieraj zwykłe literały, gdy transformacja nie jest potrzebna
function safe(s, v) { return s[0] + String(v).replace(/</g, "&lt;") }
console.log(safe(["x="], "<a>"))

Często zadawane pytania

Czy lekcja „Praktyczne zastosowania tagowanych literałów szablonowych” jest bezpłatna?

Tak — pełny tekst „Praktyczne zastosowania tagowanych literałów szablonowych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Praktyczne zastosowania tagowanych literałów szablonowych”?

Proszę tworzyć bezpieczny HTML i stylizowane ciągi znaków za pomocą tagów. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Praktyczne zastosowania tagowanych literałów szablonowych”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Podstawy interpolacji ciągów znaków
  2. Ciągi wielowierszowe
  3. Funkcje tagowane literałami szablonowymi
  4. Praktyczne zastosowania tagowanych literałów szablonowych
← Powrót do JavaScript Academy