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 greetingQuotes = "Welcome aboard!";
let greetingApostrophes = 'Welcome aboard!';
let greetingAccent = `Welcome aboard!`;

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 quote = 'Steve Jobs once said: "People do not know what they want until you show it to them." ';
document.write(quote);

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 once said: " 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 quote = "Steve Jobs once said: \"People do not know what they want until you show it to them.\"";

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 output = `Triangle: a = ${a} cm, b = ${b} cm, c = ${c} cm.`;
document.write(output);

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 wisdom = `He that mischiefs hatches,
mischiefs catches`;

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

let wisdom = "He that mischiefs hatches,\n" +
"mischiefs catches";

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 name = "David";
document.write(name.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 name = "  Homer Simpson  ";
document.write(name.length + "<br />"); // the result counts two spaces at the beginning of the string and two spaces at the end of it
name = name.trim(); // now we have "Homer Simpson" stored in the variable
document.write(name.length + "<br />");
document.write(name);

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 originalSentence = "PHP is the best!";
let modifiedSentence = originalSentence.replace("PHP", "JavaScript");
document.write(originalSentence);
document.write("<br />");
document.write(modifiedSentence);

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 a v malých písmenách. Zmení teda všetky písmená v reťazci na veľké alebo na malé:

let name = "david Jones";
name = name.toUpperCase(); // DAVID JONES
document.write(name);
document.write("<br />");
name = name.toLowerCase(); // david jones
document.write(name);

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 firstName = "David";
let lastName = "Jones";
let title = "MBA";

let addressing = firstName + " " + lastName + ", " + title;
document.write(addressing);

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 input = "Rhinopotamus";
document.write(input.startsWith("hin")); // prints out false
document.write(input.startsWith("hin", 1)); // prints out true
document.write(input.endsWith("tamus")); // prints out 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š.