Úloha 1 – Převod pole na řetězec pomocí toString() a join()

Úvod do úlohy

Pole často potřebujeme nejen ukládat a zpracovávat, ale také zobrazit – například vypsat do konzole, zobrazit na webové stránce nebo uložit jako text. K tomu slouží vestavěné metody toString() a join(). Tyto metody převádějí celé pole na řetězec, ale každá trochu jiným způsobem. Zatímco toString() používá pevně daný oddělovač (čárku), metoda join(separator) nám umožní určit vlastní oddělovač – třeba mezeru, pomlčku nebo i speciální znak. Díky tomu máme nad výstupem větší kontrolu a můžeme jej snadno přizpůsobit požadovanému formátu.

Teorie a principy

• toString(): převede pole na text, jednotlivé prvky oddělí čárkou. Nemůžeme změnit oddělovač.

• join(separator): převede pole na text, ale oddělovač si zvolíme sami. Pokud nezadáme žádný argument, chová se stejně jako toString().

• Implicitní převod na text: když se snažíme pole vypsat do konzole nebo do HTML, JavaScript často volá toString() automaticky. Proto někdy není potřeba psát toString() výslovně.

Praktické příklady kódu

1. Použití toString()

2. Použití join() s různými oddělovači

3. Implicitní převod pole na řetězec

Typické chyby / záludnosti

• Očekávání, že toString() zachová mezery: metoda vždy odděluje prvky pouze čárkou, nelze to změnit.

• Zapomenutí na argument metody join: pokud není zadán, výsledek je stejný jako toString().

• Nevhodný oddělovač: použití prázdného řetězce "" může způsobit, že se prvky "slejí" dohromady a budou hůře čitelné.

• Nejasnost při výpisu do konzole: při console.log(pole) se pole vypíše jako struktura (ne text), zatímco při "Text " + pole proběhne převod na řetězec.

Shrnutí

• toString() převede pole na čárkami oddělený text.

• join(separator) umožňuje určit vlastní oddělovač, takže poskytuje větší flexibilitu.

• Při běžném výpisu (např. konkatenace textu s polem) JavaScript často toString() volá automaticky.

• Metody nemění pole samotné, jen vracejí řetězec.

Úloha

Zadání (kontext úlohy):

Máš seznam svých oblíbených knih. Chceš ho zobrazit v různých podobách – v konzoli i jako text na webové stránce. Potřebuješ vyzkoušet převod pole na řetězec pomocí toString() a join() s různými oddělovači.

Cíl úlohy:

Procvičit metody toString() a join(), jejich využití v konzoli i při vkládání textu do HTML.

Vstupní podmínky:

Student pracuje se soubory index.html a script.js.
V HTML bude prázdný odstavec <p id="vystup"></p>, kam se má výsledek zobrazit.

Požadovaný výstup:

1. Vytvoř pole knihy se 4 názvy knih.

2. Do konzole vypiš seznam knih pomocí toString().

3. Do konzole vypiš seznam knih oddělený čárkou a mezerou pomocí join(", ").

4. Vytvoř proměnnou text s větou: „Moje knihy: [seznam]“, kde [seznam] bude výsledek join(" - ").

5. Vypiš tuto větu do odstavce s id vystup na stránce.

Doplňující pokyny:

• Používej document.getElementById("vystup").textContent = ... pro zobrazení textu.

• Pamatuj, že join() vrací řetězec, takže s ním můžeš pracovat jako s obyčejným textem.

• Původní pole se metodami toString() ani join() nemění.

Řešení úlohy

Co je zde splněno

• Pole knihy obsahuje 4 názvy knih.

• Do konzole vypsáno pole pomocí .toString().

• Do konzole vypsán seznam s oddělovačem ", " pomocí .join().

• Vytvořen text „Moje knihy: …“ s oddělovačem " - ".

• Výsledek zobrazen na stránce v <p id="vystup">.

Poznámky

• Metody .toString() a .join() nemění původní pole, vrací pouze řetězec.

• join() umožňuje zvolit libovolný oddělovač, zatímco toString() používá vždy čárku.