Úloha 1 – Interpolace a escapování v praxi

Úvod do úlohy

Textové řetězce patří k úplným základům programování v JavaScriptu, protože se s nimi setkáme téměř všude: zobrazování zpráv pro uživatele, práce s formuláři, ukládání dat nebo komunikace se serverem. Abychom mohli řetězce správně používat, musíme si osvojit, jak je správně zapisovat a jak odlišovat různé způsoby zápisu. Pokud zapomeneme na uvozovky, JavaScript nebude vědět, že jde o text, a pokusí se výraz vyhodnotit jako název proměnné nebo příkaz.

Teorie a principy

1. Tři způsoby zápisu řetězců

   • Jednoduché uvozovky '...' – vhodné pro běžný text.

   • Dvojité uvozovky "..." – funkčně stejné, jen jiný styl.

   • Backticky `...` (template literals) – umožňují vícenásobné řádky a vkládání proměnných pomocí ${}.

2. Bez uvozovek to není text

   • Pokud napíšeme Ahoj bez uvozovek, JavaScript si myslí, že jde o jméno proměnné.

   • Proto je nutné text vždy uzavírat do '...', "..." nebo `...`.

3. Escape sekvence

   • Když potřebujeme do řetězce vložit speciální znak (uvozovku, nový řádek, zpětné lomítko), použijeme tzv. escape sekvenci:

     • \' → apostrof uvnitř '...'

     • \" → uvozovka uvnitř "..."

     • \\ → samotné zpětné lomítko

     • \n → nový řádek

     • \t → tabulátor

4. Template literals a interpolace

   • Zápis pomocí backticků `...` umožňuje vložit do textu přímo hodnoty proměnných:

Praktické příklady kódu

Typické chyby / záludnosti

• Zapomenuté uvozovky → JavaScript hledá proměnnou místo textu.

• Špatně uzavřené řetězce → jeden typ uvozovky na začátku a jiný na konci (např. 'text").

• Nepoužití escape sekvencí → uvozovka uvnitř textu způsobí chybu:

• Záměna za šablonové řetězce → interpolace (${}) funguje jen uvnitř backticků, ne v '...' nebo "...".

Shrnutí

• Řetězce zapisujeme do jednoduchých, dvojitých uvozovek nebo backticků.

• Bez uvozovek JavaScript nerozezná text od proměnné.

• Pro speciální znaky používáme escape sekvence (\n, \", \\ …).

• Template literals (`...`) umožňují víceřádkový text a vkládání proměnných pomocí ${}.

• Největší chybou začátečníků je zapomenout uvozovky nebo nevhodně smíchat typy uvozovek.

Úloha

Zadání (kontext úlohy):

Vytvoř krátký konzolový „plakát“ k události. Plakát se skládá z nadpisu, citátu a víceřádkových detailů. Cílem je použít různé zápisy řetězců, správně escapovat speciální znaky a do textu vložit hodnoty proměnných.

Cíl úlohy:

Procvičit si tři způsoby zápisu řetězců ('...', "...", `...`), escape sekvence (\", \', \\, \n) a interpolaci proměnných v template literalu.

Vstupní podmínky:

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

• Nepoužívej žádné knihovny ani HTML; vše řeš pouze v JavaScriptu a vypisuj do konzole.

Požadovaný výstup:

1. Nadpis v proměnné nadpis zapsaný v jednoduchých uvozovkách a uvnitř obsahuje uvozovky escapované (např. \"…\").

2. Citát v proměnné citat zapsaný v dvojitých uvozovkách, který obsahuje apostrof escapovaný (\').

3. Cesta k souboru v proměnné cesta zapsaná libovolně, ale musí správně zobrazit zpětná lomítka (např. C:\\Data\\Plakaty\\).

4. Víceřádkový blok v proměnné plakat zapsaný pomocí backticků s interpolovanými proměnnými ${...}. Blok musí mít alespoň tři řádky (použij přirozeně více řádků nebo \n) a zobrazit:

   • nadpis,

   • citát,

   • datum a místo z proměnných datum a misto,

   • samostatný řádek s textem „Soubory: “ + cesta.

5. Vypiš do konzole nejprve nadpis, citat, cesta a nakonec celý plakat.

Doplňující pokyny:

• Interpolace (${promenna}) funguje jen s backtickovým zápisem.

• U stejného typu uvozovek uvnitř řetězce použij správný escape.

• Pokud budeš přidávat nový řádek v řetězci mimo template literal, použij \n.

Řešení úlohy

Co je zde splněno:

• tři zápisy řetězců: '...', "...", `...`,

• správné escapování: \", \', \\,

• víceřádkový template literal s interpolací ${...},

• výstup v předepsaném pořadí.

Poznámky (užitečné):

• Pokud se ti v cestě nevypisují zpětná lomítka, zkontroluj zdvojení: jedno \ v kódu je escape, viditelné \ v konzoli dostaneš až jako \\.

• Kdybys potřeboval(a) nový řádek mimo template literal, použij \n: