Úloha 2 – Textové spojování a interpolace proměnných

Ú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“.

Úloha

Zadání (kontext úlohy):

Chceš přivítat uživatele a ukázat mu jeho jméno a věk. Úkol je vytvořit dvě různé varianty uvítací zprávy – jednu pomocí klasického spojování řetězců (+) a druhou pomocí moderních šablonových literálů (`...`).

Cíl úlohy:

Procvičit si rozdíl mezi spojováním textu pomocí + a šablonovými literály s interpolací ${...}.

Vstupní podmínky:

• Student pracuje pouze s nově vytvořeným souborem script.js.

• V programu budou proměnné jmeno a vek s libovolnými hodnotami.

Požadovaný výstup:

1. Do konzole se vypíše uvítací zpráva sestavená pomocí +.

2. Do konzole se vypíše ta samá zpráva vytvořená pomocí šablonového literálu.

3. Navíc se vypíše krátký víceliniový text, a to opět dvěma způsoby:

   • pomocí spojování s + a \n,

   • pomocí šablonového literálu, kde řádky napíšeš přímo pod sebe.

Doplňující pokyny:

• Dbej na mezery při spojování s + – jinak se texty mohou „slepit“.

• Interpolace ${...} funguje pouze uvnitř backticků.

• Vyzkoušej si, že oba způsoby dají stejné výsledky, jen s jiným zápisem.

Řešení úlohy

Co je zde splněno:

• vytvořeny dvě proměnné jmeno a vek,

• ukázány dvě varianty sestavení textu: klasické spojování + a moderní interpolace ${...},

• ukázán víceliniový text pomocí \n i pomocí backticků,

• výsledky se shodují, rozdíl je jen v zápisu.

Vylepšení oproti začátečnické verzi:

• použití const (hodnoty se nemění),

• rovnou se vypisuje do konzole bez mezivýsledných proměnných,

• zápis je kratší, přehlednější a bez rizika zapomenutých mezer nebo \n.