Literały znakowe (Template Literals) w JavaScript

Literały znakowe, znane również jako szablony literałów (Template Literals), to nowa funkcjonalność wprowadzona w ES6 (ECMAScript 2015), która zapewnia bardziej elastyczny sposób na pracy z łańcuchami znaków. Pozwalają one na łączenie wyrażeń wewnątrz ciągów znaków, tworzenie wieloliniowych ciągów znaków, a także na łatwe tworzenie sformatowanych tekstów.

Składnia

Literały znakowe oznaczane są za pomocą backticków (`) zamiast pojedynczych (') lub podwójnych (") cudzysłowów używanych dla tradycyjnych ciągów znaków. Znak bactika znajduje się pod klawiszem Esc :). Wyrażenia wewnątrz literałów znakowych są umieszczane za pomocą ${}

let name = "Alice";
let greeting = `Cześć, ${name}!`;
console.log(greeting); // "Cześć, Alice!"

Wieloliniowe ciągi znaków

Jedną z głównych zalet literałów znakowych jest możliwość tworzenia wieloliniowych ciągów znaków bez konieczności używania znaku nowej linii \n.

let multilineString = `To jest string
rozdzielony na
kilka linii.`;
console.log(multilineString);

Wyrażenia w literałach znakowych

Literały znakowe pozwalają na włączanie wyrażeń JavaScript, co umożliwia łatwe budowanie dynamicznych łańcuchów znaków.

let price = 10;
let vat = 0.23;
let total = `Całkowity koszt: ${price * (1 + vat)} zł`;
console.log(total); // "Całkowity koszt: 12.3 zł"

Zagnieżdżanie literałów znakowych

Możesz także zagnieżdżać literały znakowe wewnątrz innych literałów, co zapewnia jeszcze większą elastyczność.

let item = "kawa";
let quantity = 2;
let orderMessage = `Zamówiłeś ${quantity} sztuki produktu: ${item}.`;
console.log(orderMessage); // "Zamówiłeś 2 sztuki produktu: kawa."