Šablonové řetězce

Spojování textu pomocí + funguje, ale s více hodnotami se špatně čte a snadno v něm zapomenete mezeru nebo uvozovku:

const jmeno = "Anna";
const vek = 25;
console.log("Jmenuji se " + jmeno + " a je mi " + vek + " let.");

Existuje jednodušší způsob: šablonový řetězec (anglicky template literal). Je to text, který místo do uvozovek píšete mezi zpětné apostrofy `. Hodnotu do něj vložíte pomocí ${...}:

const jmeno = "Anna";
const vek = 25;
console.log(`Jmenuji se ${jmeno} a je mi ${vek} let.`);

Oba příklady vypíšou:

Jmenuji se Anna a je mi 25 let.

JavaScript nahradí každé ${...} hodnotou, která je uvnitř. Mezery jsou součástí textu, takže hned vidíte, kde jsou. Do ${...} můžete napsat i výpočet:

const cena = 120;
console.log(`Dvě vstupenky stojí ${cena * 2} Kč.`);

Vypíše:

Dvě vstupenky stojí 240 Kč.

Funguje to jen se zpětnými apostrofy. V obyčejných uvozovkách je ${...} jen text a vypíše se tak, jak je:

const den = "pondělí";
console.log("Dnes je ${den}.");

Vypíše:

Dnes je ${den}.

Šablonový řetězec je textový řetězec jako každý jiný, takže ho můžete uložit i do proměnné.