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).
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é "Homer Simpson" 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š.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 97x (2.46 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript