4. diel - Textové reťazce v JavaScripte

V predchádzajúcom kvíze, Kvíz - Úvod, konzoly a premenné v JavaScripte, sme si overili nadobudnuté skúsenosti z predchádzajúcich lekcií.

V dnešnom tutoriále základov JavaScriptu si predstavíme textové reťazce a operácie, ktoré s nimi môžeme vykonávať. Preberieme tiež používanie rôznych úvodzoviek a špeciálne znaky.

Textové reťazce v JavaScripte

Textové reťazce slúžia na uchovávanie textu. Je to v podstate rad znakov obklopený úvodzovkami, prípadne tzv. tupým prízvukom. Pri deklarácii textových reťazcov tak môžeme ľahko pracovať s rôznymi formátmi, vrátane reťazcov obsahujúcich úvodzovky. S reťazcami je možné vykonávať rôzne operácie, ako je spojenie, rozdelenie, vyhľadávanie podreťazcov či menenie veľkosti písmen. Textový reťazec je reprezentovaný dátovým typom string. Jeho maximálna dĺžka nie je presne špecifikovaná.

Vytváranie reťazcov

Reťazce zapisujeme pomocou úvodzoviek. Využiť môžeme niekoľko typov - dvojité, jednoduché, ale aj spätné úvodzovky alebo takzvaný tupý prízvuk:

let pozdravUvozovky = "Vitajte na palube!";
let pozdravApostrofy = 'Vítaj na palube!';
let pozdravPrizvuk = `Vitajte na palube!`;

Jednoduché úvodzovky

Jednoduché úvodzovky ' (apostrof) napíšeme pomocou klávesy Shift a nasledujúce klávesy:

Dvojité úvodzovky

Dvojité úvodzovky " sa napíšu pomocou klávesu Shift a klávesu ů:

Keď používame dvojité úvodzovky, môžeme vo vnútri reťazca priamo použiť jednoduché úvodzovky bez potreby escapovania.

Tupý prízvuk

Tupý prízvuk na slovenskej klávesnici môžeme napísať pomocou pravého Alt a písmena ý:

Kombinovanie úvodzoviek

Úvodzovky je možné kombinovať aj vo vnútri reťazca. Pokiaľ teda napríklad chceme napísať jednoduchú úvodzovku, vložíme reťazec do úvodzoviek dvojitých a naopak:

let citat = 'Steve Jobs raz povedal: "Ľudia často nevedia, čo chcú, kým im to neukážete."';
document.write(citat);

Výstup v prehliadači:

Pokiaľ v predchádzajúcom príklade nahradíme jednoduché úvodzovky dvojitými, nič sa nám nevypíše. Program si totiž bude myslieť, že textový reťazec deklarujeme iba v časti "Steve Jobs jednou řekl: " a nebude vedieť, ako vyhodnotiť zostávajúce znaky, takže dôjde k chybe.

Visual Studio Code nás na chybu upozorní a označí zvyšný text na červeno:

V prehliadači potom uvidíme podobnú chybu v konzole, ktorú si otvoríme pomocou klávesy F12:

Escapovanie a špeciálne znaky

Pokiaľ je potrebné zapísať v reťazci rovnakú úvodzovku, v ktorých je reťazec už zapísaný, musí sa úvodzovka takzvane escapovať. Tým docielime to, že ju interpret nevyhodnotí ako ukončenie reťazca, ale iba ako obyčajný znak. Na escapovanie sa používa spätná lomka:

let citat = "Steve Jobs raz povedal: "Ľudia často nevedia, čo chcú, kým im to neukážete."";

Spätné lomítko sa na slovenskej klávesnici napíše pomocou pravého Alt a písmena Q:

Znaky s týmto lomítkom sa súhrnne nazývajú escape sekvencie. Okrem úvodzoviek môžeme pomocou lomítka zapísať ešte niekoľko špeciálnych znakov, ktoré by sa nám inak zapisovali ťažko. Tu je ich zoznam:

• \b – backspace,
• \f – preskočenie na ďalšiu "stránku",
• \n – nový riadok,
• \r – carriage return (niekedy ako súčasť odriadkovania),
• \t – horizontálny tabulátor,
• \v – vertikálny tabulátor,
• \\ – spätná lomka,
• \0 – nulový znak (tiež používaný na ukončenie reťazca).

Dajme si pozor na zápis spätného lomítka. V tomto prípade musíme zapísať dve. V opačnom prípade si JavaScript bude myslieť, že píšeme špeciálny znak.

Odriadkovanie \n je štandardný spôsob, ako indikovať nový riadok v textovom prostredí alebo v konzole. V HTML odriadkujeme pomocou <br />. Pokiaľ by sme v kóde použili odriadkovanie pomocou \n, prehliadač ho nezobrazí.

Interpolácia reťazcov

Na výpis textových reťazcov môžeme použiť tupý prízvuk (`) namiesto úvodzoviek, čo nám umožní tzv. interpoláciu, teda vložiť premenné priamo do reťazca. Použijeme znak dolára ($) a zložené zátvorky ({}), do ktorých zapíšeme premennú.

Na klávesnici znak dolára $ napíšeme pomocou pravého Alt a písmena ů:

Zložené zátvorky sa na slovenskej klávesnici napíšu pomocou pravého ALT a písmena B či N:

Vďaka týmto špeciálnym znakom môžeme vypísať premenné priamo v textovom reťazci:

let a = 6;
let b = 4;
let c = 8;
let vypis = `Trojuholník: a = ${a} cm, b = ${b} cm, c = ${c} cm.`;
document.write(vypis);

V prehliadači sa nám zobrazí tento výsledok:

Viacriadkové reťazce

Spätné úvodzovky umožňujú definovať aj viacriadkový text priamo v kóde:

let mudroslovi = `Kto inému jamu kopá, sám do nej padá`;

Ak by sme použili jednoduché alebo dvojité úvodzovky, museli by sme to urobiť pomocou \n:

let mudroslovi = "Kto inému jamu kopá,\n" +
"sám do nej padá";

Operácia s reťazcami

Teraz si predstavíme základné metódy na prácu s textovými reťazcami. Začneme vlastností length, ktorá v sebe nesie informáciu o dĺžke reťazca.

Vlastnosť length

Dĺžku reťazca zistíme vďaka vlastnosti length. Použijeme ju nasledovne:

let jmeno = "Karel";
document.write(jmeno.length);

Výstup v prehliadači:

Metóda trim()

Pokiaľ načítame text od užívateľa, môže sa nám stať, že pred text alebo za neho užívateľ napíše medzeru. Okolo reťazcov sa tiež často vyskytujú ďalšie takzvané biele znaky, napr. konce riadkov. Metóda trim() tieto biele znaky okolo reťazca odstráni, aby nekomplikovali ďalšie spracovanie. Vnútri textu zostanú biele znaky ponechané:

let jmeno = "  Homer Simpson  ";
document.write(jmeno.length + "<br />"); // vo výsledku sú započítané dve medzery na začiatku reťazca a dve medzery na jeho konci
jmeno = jmeno.trim(); // v premennej je teraz uložené &quot;Homer Simpson&quot;
document.write(jmeno.length + "<br />");
document.write(jmeno);

Výstup v prehliadači:

Metóda replace()

Táto metóda prijíma dva parametre. Najprv zadáme hľadaný text a potom text, ktorým ho chceme nahradiť:

let puvodniVeta = "PHP je najlepšie!";
let upravenaVeta = puvodniVeta.replace("PHP", "JavaScript");
document.write(puvodniVeta);
document.write("<br />");
document.write(upravenaVeta);

Výstup v prehliadači:

Metódy toUpperCase() a toLowerCase()

Rozlišovanie veľkých a malých písmen môže byť niekedy na obtiaž. Veľakrát sa budeme potrebovať opýtať na prítomnosť podreťazca tak, aby nezáležalo na veľkosti písmen. Situáciu môžeme vyriešiť pomocou metód toUpperCase() a toLowerCase(), ktoré vracia reťazec vo veľkých av malých písmenách. Zmení teda všetky písmená v reťazci na veľké alebo na malé:

let jmeno = "karel Novák";
jmeno = jmeno.toUpperCase(); // KAREL NOVÁK
document.write(jmeno);
document.write("<br />");
jmeno = jmeno.toLowerCase(); // karel novák
document.write(jmeno);

Výstup:

Zlučovanie reťazcov

Reťazce môžeme spájať niekoľkými spôsobmi. Najčastejšie použijeme operátor +:

let titul = "Ing.";
let jmeno = "Jan";
let prijmeni = "Novák";

let osloveni = titul + " " + jmeno + " " + prijmeni;
document.write(osloveni);

Výstup v prehliadači:

Pre zlúčenie reťazcov JavaScript poskytuje metódu concat(). Tá je automaticky volaná, keď použijeme operátor +, preto budeme tento spôsob preferovať.

Metódy startsWith() a endsWith()

Nasledujúcimi metódami kontrolujeme, či reťazec začína alebo končí určitým podreťazcom. Ako argument metódy prijímajú podreťazec, ktorý sa má hľadať. Voliteľne je možné pridať druhý argument, ktorý pri metóde startsWith() určuje pozíciu v reťazci, od ktorej sa má začať hľadať, a pri metóde endsWith() upresňuje dĺžku reťazca, v ktorom sa má hľadať. V prípade, že metódy reťazec nájdu, obe vracajú true, v opačnom prípade vráti false:

let vstup = "Krokonosohroch";
document.write(vstup.startsWith("rok")); // vypíše false
document.write(vstup.startsWith("rok", 1)); // vypíše true
document.write(vstup.endsWith("hroch")); // vypíše true

Výstup:

V nasledujúcom kvíze, Kvíz - Textové reťazce v JavaScripte, si vyskúšame nadobudnuté skúsenosti z predchádzajúcich lekcií.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.