0Pricing
Frontend Academy · Lekcja

Literały szablonowe i optional chaining

Proszę osadzać wyrażenia w ciągach za pomocą literałów szablonowych, bezpiecznie uzyskiwać dostęp do zagnieżdżonych właściwości za pomocą ?. oraz stosować zwarcie operatorem nullish coalescing ??.

Literały szablonowe i optional chaining to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Literały szablonów: napisy w backtickach

Literały szablonów (napisy w backtickach) obsługują napisy wielowierszowe i osadzane wyrażenia. Zastępują konkatenację napisów za pomocą + i ułatwiają wyrażenie intencji kodu.

// String concatenation (old way):
const msg = 'Hello, ' + name + '! You have ' + count + ' messages.';

// Template literal (modern):
const msg2 = `Hello, ${name}! You have ${count} messages.`;

Wielowierszowe literały szablonów

Literały szablonów zachowują znaki nowego wiersza i wcięcia. Nie trzeba już używać \n ani łączyć napisów zapisanych w wielu wierszach.

const html = `
  <div class="card">
    <h2>${title}</h2>
    <p>${body}</p>
  </div>
`;

const sql = `
  SELECT *
  FROM users
  WHERE age > ${minAge}
  ORDER BY name
`;

Wyrażenia w literałach szablonów

Wewnątrz ${} można umieścić dowolne wyrażenie JavaScriptu: operatory warunkowe, wywołania funkcji, działania arytmetyczne i wywołania metod.

const tax = 0.2;
const price = 50;
const receipt = `
  Subtotal: $${price}
  Tax (${tax * 100}%): $${price * tax}
  Total: $${price * (1 + tax)}
  ${isPaid ? 'PAID' : 'UNPAID'}
`;

Literały szablonów z tagiem

Literał szablonowy z tagiem wywołuje funkcję, przekazując jej fragmenty napisu i interpolowane wartości jako argumenty. Jest używany przez biblioteki takie jak styled-components, GraphQL (gql``) i sql`` do bezpiecznego budowania zapytań.

function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) =>
    acc + str + (values[i] !== undefined ? `<mark>${values[i]}</mark>` : ''), '');
}
const msg = highlight`Hello ${name}, you have ${count} messages.`;

Opcjonalne łańcuchowanie: ?.

Operator opcjonalnego łańcuchowania ?. zwraca undefined zamiast zgłaszać TypeError, jeśli lewa strona ma wartość null lub undefined. Eliminuje konieczność stosowania ochronnych sprawdzeń wartości null.

const user = null;

// Without optional chaining (throws TypeError):
// user.profile.avatar

// With optional chaining (returns undefined):
const avatar = user?.profile?.avatar;
console.log(avatar); // undefined — no error

Opcjonalne wywołania metod

obj?.method() wywołuje metodę tylko wtedy, gdy obj nie ma wartości null ani undefined. Jeśli obj ma wartość null, zwraca undefined bez zgłaszania błędu.

const timer = getTimer(); // might return null
timer?.start(); // only calls start() if timer exists

// Also works on array access:
const firstItem = arr?.[0]; // undefined if arr is null

Koalescencja wartości nullish: ??

Operator koalescencji wartości nullish ?? zwraca prawą stronę tylko wtedy, gdy lewa ma wartość null lub undefined (a nie dowolną wartość falsy). W przeciwieństwie do || nie traktuje 0 ani '' jako wartości nullish.

const port = config.port ?? 3000;  // 3000 only if port is null/undefined
const name = user.name ?? 'Anonymous';

// Compare with ||:
console.log(0 ?? 'default');   // 0 (not nullish)
console.log(0 || 'default');   // 'default' (falsy!)

Przypisanie nullish: ??=

a ??= b przypisuje b do a tylko wtedy, gdy a ma wartość null lub undefined. Jest to skrócony zapis a = a ?? b. Przydaje się do warunkowej inicjalizacji właściwości obiektów.

let cache = {};
function getUser(id) {
  cache[id] ??= fetchUser(id); // only fetch if not cached
  return cache[id];
}

Logiczne operatory przypisania

&&= przypisuje wartość tylko wtedy, gdy lewa strona ma wartość truthy. ||= przypisuje wartość tylko wtedy, gdy lewa strona ma wartość falsy. Razem z ??= operatory te pozwalają zwięźle zapisywać warunkowe przypisania.

user.name ||= 'Anonymous';  // set if falsy
user.role &&= user.role.toLowerCase(); // transform if exists

Łączenie ?. i ??

Połącz opcjonalne łańcuchowanie i koalescencję wartości nullish, aby bezpiecznie uzyskiwać dostęp do właściwości z użyciem wartości domyślnej.

const city = user?.address?.city ?? 'Unknown';
const total = cart?.items?.length ?? 0;

Najważniejsze metody napisów

Popularne metody napisów: trim(), trimStart(), trimEnd(), padStart(), padEnd(), startsWith(), endsWith(), includes(), replaceAll(), at().

const str = '  Hello World  ';
str.trim();           // 'Hello World'
str.includes('World'); // true
'5'.padStart(3, '0'); // '005'
'abc'.at(-1);         // 'c'
'aabbcc'.replaceAll('b', 'x'); // 'aaxxcc'

Szybkie sprawdzenie

Co zwróci const val = obj?.foo?.bar ?? 'default', jeśli obj ma wartość null?

Podsumowanie: literały szablonów i opcjonalne łańcuchowanie

Napisy w backtickach obsługują wyrażenia i wiele wierszy. Literały szablonowe z tagami umożliwiają tworzenie DSL-i. ?. bezpiecznie uzyskuje dostęp do właściwości bez sprawdzania wartości null. ?? zapewnia wartość domyślną, gdy wartość to null/undefined (a nie tylko falsy). Połącz je, aby bezpiecznie i czytelnie uzyskiwać dostęp do danych z wartościami domyślnymi.

Często zadawane pytania

Czy lekcja „Literały szablonowe i optional chaining” jest bezpłatna?

Tak — pełny tekst „Literały szablonowe i optional chaining” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Literały szablonowe i optional chaining”?

Proszę osadzać wyrażenia w ciągach za pomocą literałów szablonowych, bezpiecznie uzyskiwać dostęp do zagnieżdżonych właściwości za pomocą ?. oraz stosować zwarcie operatorem nullish coalescing ??. Ćwiczysz Frontend 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ąć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend 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 3 z 4.

Ile czasu zajmuje lekcja „Literały szablonowe i optional chaining”?

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 Frontend Academy?

Tak. Każda lekcja Frontend 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. Metody tablic: map, filter, reduce, find
  2. Destrukturyzacja obiektów i spread
  3. Literały szablonowe i optional chaining
  4. Moduły: import i export
← Powrót do Frontend Academy