js-praca-zo-stringom.md

String v JS

Textový reťazec môžeme definovať v JS nasledovne:

let text1 = "Toto je text";
let text2 = 'Toto je text';

Pre každý zápis je použitý iný znak, ktorým anotujeme začiatok a koniec textového reťazca. Z pohľadu JS je úplne jedno, ktorú variantu zvolíme. To, ktorý znak použijeme závisí predovšetkým od kontextu.

Pokiaľ chceme do premennej uložiť text, ktorý obsahuje ako hodnotu znak, ktorým sme anotovali začiatok stingu, musíme pred jeho použitím uviest escape znak \. Takýto zápis by vyzeral nasledovne:

let text1 = "Toto \"je\" text"; // Toto "je" text
let text2 = 'Toto \'je\' text'; // Toto 'je' text

Pokiaľ v textovom reťazci použijeme alternatívny znak pre anotáciu textového reťazca v kode nič sa nedeje a nemusíme použiť escape znak:

let text1 = "Toto 'je' text"; // Toto 'je' text
let text2 = 'Toto "je" text'; // Toto "je" text

Použiť sa to dá v prípade ak chceme do textového reťazca vpísať HTML. V tom prípade zvolíme za anotačný znak reťazca znak ', nakoľko HTML používa pre anotáciu hodnôt atribútov znak ". Kód bude potom vyzerať:

// prehľadnejší zápis
let html = '<a class="red link" title="Späť na úvod">Späť</a>';

// a tu máme ten druhý...
let html2 = "<a class=\"red link\" title=\"Späť na úvod\">Späť</a>";

Obsah textového reťazca sa tak stáva pre prográmatora čiteľnejším, lebo nemusíme použiť escape znak.

Ak chceme do textového reťazca vložiť hodnotu premennej, dá sa to realizovať nasledovne pomocou operátora +;

let pocet = 5;
let html =  "Celkový počet je " + pocet + " kusov."; // Celkový počet je 5 kusov.

Template literals

Pokiaľ ale chceme docieliť viac prehľadné vkladanie premenných alebo chceme zadať textový reťazec na viacej riadkov, musíme použiť anotáciu pomocou template literals - znaku ` a bude vyzerať následne:

let pocet = 5;
let html =  `Celkový počet je ${pocet} kusov.`; // Celkový počet je 5 kusov.

Z kódu je jasné, že premennú sme obalili do konštrukcie ${VYRAZ}, do ktorej môžeme umiestniť buď premennú alebo výraz, ktorý vráti nejakú hodnotu:

let html =  `Celkový počet je ${ 2 * (5 - 2)} kusov.`; // Celkový počet je 6 kusov.

Najčastejšie sa, ako aj samotný názov template literals, používa tento spôsob zápisu pre definovanie šablón. Môžeme uviesť krátku ukážku:

function render(nadpis, obsah) {
    return `
        <div class="section">
            <h2>${nadpis}</h2>
            <p>${obsah}</p>
        </div>
    `;
}

Viac informácií o template literals nájdete tu.