Template literals
Szablony tekstowe w odwróconych apostrofach: wstawiają wartości przez ${} i mogą zajmować wiele linii.
- Zwraca
- Nowy napis z wartościami wyrażeń wstawionymi w miejsce
${...}. Szablon otagowany zwraca to, co zwróci funkcja tagu.
Przykład
#const name = 'Ola'
const points = 120
const goal = 200
console.log(`Cześć, ${name}! Masz ${points} pkt.`)
console.log(`Do celu brakuje ${goal - points} pkt.`)Definicja i zastosowanie
#Template literals, czyli szablony tekstowe, zapisuje się w odwróconych apostrofach `. Wewnątrz możesz wstawić dowolne wyrażenie JavaScript w ${...}: zmienną, obliczenie, wywołanie funkcji czy operator warunkowy. Wynik zostanie zamieniony na tekst i wklejony w to miejsce.
Szablon może zajmować wiele linii. Znaki nowej linii i wcięcia z kodu trafiają do napisu dokładnie tak, jak je zapisano, więc nie potrzebujesz \n ani sklejania przez +. To wygodne przy budowaniu komunikatów i fragmentów HTML.
Nazwa funkcji zapisana tuż przed szablonem, np. highlight`Masz ${points} pkt`, tworzy szablon otagowany (tagged template). Funkcja dostaje osobno stałe fragmenty tekstu i wstawione wartości, więc może je dowolnie przetworzyć. Wbudowany tag String.raw zwraca tekst bez interpretowania sekwencji takich jak \n.
Składnia
#`tekst`
`tekst ${expression} tekst`
`linia 1
linia 2`
tag`tekst ${expression}`Więcej przykładów
#const course = 'JavaScript'
const lessons = 12
const card = `Kurs: ${course}
Lekcje: ${lessons}
Status: ${lessons > 10 ? 'długi' : 'krótki'}`
console.log(card)const tasks = ['Zmienne', 'Pętle']
const list = `<ul>${tasks.map((task) => `<li>${task}</li>`).join('')}</ul>`
console.log(list)function highlight(strings, ...values) {
return strings.reduce((result, text, i) => {
const value = i < values.length ? `[${values[i]}]` : ''
return result + text + value
}, '')
}
const player = 'Kuba'
const exp = 45
console.log(highlight`Gracz ${player} zdobył ${exp} EXP`)
console.log(String.raw`C:\nowy\folder`)Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie wstawiaj do HTML danych od użytkownika bez zabezpieczenia. Szablon nie zamienia znaków
<i>, więc taki kod otwiera drogę do ataków XSS. Tekst wstawiaj przeztextContent. - W szablonie wieloliniowym wcięcia kodu stają się częścią napisu. Jeśli przeszkadzają, zacznij kolejne linie od lewej krawędzi albo połącz tablicę linii przez
join("\n"). - Obiekt wstawiony przez
${}zamieni się na[object Object]. Wstaw konkretne pole albo użyjJSON.stringify().
Powiązane hasła
#- String.prototype.replace()Zwraca nowy napis, w którym pierwsze dopasowanie wzorca (albo wszystkie, przy fladze g) zamieniono na inny tekst.
- String.prototype.padStart()Dopełnia napis z lewej strony podanym tekstem, aż osiągnie wskazaną długość. Idealne do zer wiodących.
- ? :Operator warunkowy (ternary) zwraca jedną z dwóch wartości zależnie od warunku, w jednym krótkim wyrażeniu.
- Array.prototype.join()Łączy elementy tablicy w jeden napis z wybranym separatorem.
- String.prototype.split()Dzieli napis na tablicę fragmentów według separatora: znaku, tekstu lub wyrażenia regularnego.
Widzisz błąd albo brakuje przykładu? Napisz do nas.