Imprimir este CapítuloImprimir este Capítulo

Úloha 4 – Formátovaný výstup z dat proměnných

Úvod do úlohy

V reálném kódu se texty skládají neustále: od krátkých hlášek po vícerořádkové šablony e-mailů. Když se ale řetězce lepí „po kouscích“ pomocí + a přimíchají se náhodné mezery, \n a proměnné, kód rychle ztrácí čitelnost. Cílem této sady je naučit se rozpoznat zbytečné konkatenace, nahradit je šablonovými literály (`...${...}...`), a přidat komentáře, které vysvětlí záměr a použitou konstrukci. Výsledkem bude čitelnější, kratší a snáz udržovatelný kód – i u složitějších textových transformací.

Teorie a principy

  1. Kdy je konkatenace (+) zbytečná

    • Pokud skládáš 3 a více částí nebo vytváříš vícerořádkové texty, + výrazně zhoršuje čitelnost.

    • Typický zápach kódu: spousta + " " +, + "\n" +, opakované přetypování čísel na text.

  2. Proč šablonové literály

    • Zápis pomocí backticků `...` umožňuje interpolaci proměnných ${promenna} a přirozený víceřádkový text bez \n.

    • Často nahradí celou „zeď“ plusů jednou přehlednou šablonou.

  3. Komentuj záměr, ne samozřejmost

    • U delších šablon přidej krátké komentáře nad blokem: co se vkládá a proč.

    • U složitějších řetězců rozděl text do logických sekcí (hlavička, tělo, poznámka).

  4. Pořadí transformací a method chaining

    • Šablonový literál může vzniknout až po normalizaci vstupů (např. trim(), toLowerCase()).

    • Krátké řetězení metod je v pořádku: vstup.trim().replace(/\s+/g, " ").

  5. Testování a ošetření prázdných hodnot

    • Před skládáním šablony ošetři null/undefined.

    • Pro začátečníky: piš podmínky explicitně, např. if (text == undefined) { ... }.

Praktické příklady kódu

1) „Před a po“ – zkrácení a zpřehlednění

2) Refaktoring – úklid zbytečných operací a srozumitelné komentáře

3) Mini aplikace (HTML + CSS + JS) – generování přehledu objednávky

Typické chyby / záludnosti

  • „Plusové“ salámy

    • Dlouhé řetězce poslepované + jsou křehké: snadno chybí mezera, \n nebo se připojí špatná proměnná.

  • Míchání stylů

    • V jednom bloku nepoužívej napůl + a napůl `...` bez důvodu. Zvol jeden styl a drž se ho.

  • Nevysvětlené bloky textu

    • Dlouhé šablony bez komentáře matou. Krátký komentář nad šablonou výrazně pomáhá čtenáři kódu.

  • Zbytečné transformace před interpolací

    • Nevolej opakovaně trim() nebo toLowerCase() na stejné hodnotě. Proveď je jednou, ulož do proměnné a pak interpoluj.

  • Zapomenuté ošetření undefined/null

    • Před skládáním textu vždy zkontroluj, že data existují. Piš podmínky explicitně: if (hodnota == undefined).

Shrnutí

  • Najdi a odstraň zbytečné konkatenace – nahraď je šablonovými literály pro přehlednost a méně chyb.

  • Interpolace ${...} zjednodušuje vkládání proměnných a snižuje riziko ztracených mezer či \n.

  • Normalizuj vstupy (např. trim(), replace()), až poté sestav finální šablonu.

  • Komentuj záměr a strukturu delších textů (sekce, důvod volby konstrukcí).

  • Piš explicitní podmínky a ošetři chybějící data dříve, než začneš řetězec skládat.