Úvod do úlohy

Při programování často potřebujeme sestavit text z více částí – například zobrazit uvítací zprávu, kde se vloží jméno uživatele, nebo vytvořit složitější zprávu s proměnnými hodnotami. V JavaScriptu k tomu máme dva hlavní přístupy: klasické spojování řetězců pomocí operátoru + a modernější a pohodlnější šablonové literály s vložením proměnných pomocí ${…}. Oba způsoby fungují, ale liší se čitelností a vhodností pro různé situace.

Teorie a principy

  1. Spojování pomocí +

    • Nejstarší a nejjednodušší způsob.

    • Jednoduše „lepí“ řetězce dohromady.

    • Nevýhodou je, že při větším počtu částí se kód stává nepřehledný.

  2. Šablonové literály (template literals)

    • Zapisují se pomocí backticků `...` místo '...' nebo "...".

    • Umožňují vkládání hodnot proměnných přímo do textu pomocí ${promenna}.

    • Podporují víceřádkové texty bez nutnosti speciálních znaků.

  3. Kdy použít který způsob?

    • Operátor + je vhodný pro jednoduché a krátké spojování (např. dvě části).

    • Šablonové literály jsou ideální pro delší texty, víceliniové výstupy nebo pokud do textu vkládáme více proměnných.

Praktické příklady kódu

Typické chyby / záludnosti

  • Zapomenuté mezery při spojování pomocí +:

  • Použití ${} mimo backticky:

  • Záměna typů uvozovek – interpolace funguje pouze s backticky `...`.

Shrnutí

  • Řetězce můžeme spojovat pomocí operátoru + nebo šablonových literálů.

  • + je jednoduchý a vhodný pro krátké případy.

  • Šablonové literály jsou přehlednější pro delší texty, víceliniové výstupy a dynamické generování obsahu.

  • Vkládání proměnných ${...} funguje pouze uvnitř backticků.

  • Pozor na mezery – spojování pomocí + je může snadno „spolknout“.