5. diel - Textové reťazce v JavaScripte

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ťazec reprezentovaný dátovým typom string, je rad znakov uložený v pamäti v za sebou idúcich bajtoch. Maximálna dĺžka nie je presne špecifikovaná, záleží na interpreti. V niektorých variantoch môže byť teoreticky nekonečná a je obmedzená iba veľkosťou pamäte RAM.

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:

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:

Escapovanie a špeciálne znaky

Pokiaľ je potrebné zapísať v reťazci rovnakú úvodzovku, ako v ktorých je reťazec 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:

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 sekvenciou. 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 pozor na to, keď chceme zapísať spätnú lomku. V tomto prípade musíme zapísať dve. Inak si JavaScript bude myslieť, že píšeme nejaký š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 klávesy 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:

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:

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

Operácia s reťazcami

Teraz si ukážeme, ako prechádzať jednotlivé znaky reťazca, zistiť ich dĺžku, niečo nahradiť, zmeniť alebo spojiť.

Index

Pomocou indexov je možné vyberať jednotlivé znaky v reťazci. Index sa zapisuje do hranatých zátvoriek za názvom premennej. Čísluje sa od nuly, prvému znaku teda zodpovedá index [0]:

Vlastnosť length

Dĺžku reťazca nám zistíme vďaka vlastnosti length:

Metóda trim()

Pokiaľ načítame text od užívateľa, môže sa nám stať, že pred neho alebo za neho 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é:

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ť:

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

Zlučovanie reťazcov

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

Pre zlúčenie reťazcov poskytuje JavaScript metódu concat(). Tá je tiež automaticky volaná, keď použijeme operátor +. Spojenie reťazcov metódou concat() docielime nasledovne:

Metóda join()

Metóda join() slúži na spojenie všetkých prvkov poľa do jedného reťazca. Oddeľovač medzi prvkami poľa je voliteľný. Ak nie je špecifikovaný, prvky sú spojené bez medzery:

Metóda split()

Metóda split() naopak rozdelí reťazec na pole podreťazcov podľa zadaného znaku (oddeľovača):

Obe metódy tu uvádzame pre úplnosť, s poľami sa ešte len bližšie stretneme v lekciiPole v JavaScripte.

Metóda repeat()

Metóda repeat() vytvorí nový reťazec opakovaným spojením určitého počtu kópií pôvodného reťazca. Táto metóda berie jediný argument, ktorý určuje, koľkokrát sa má pôvodný reťazec opakovať:

Metódy startsWith() a endsWith()

Nasledujúcimi metódami kontrolujeme, či reťazec začína alebo končí určitým podreťazcom. Ako argument 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ť. Obe metódy vracajú true, ak reťazec nájdu v opačnom prípade vráti false:

Metódy indexOf() a lastIndexOf()

Metódy indexOf() a lastIndexOf() umožňujú zistiť určitú pozíciu znaku daného podreťazca:

Metódy substring() a substr()

Nakoniec si ešte ukážeme, ako získať vybranú časť reťazca, ktoré sa hovorí podreťazec. Metódy substring() a substr() robia v podstate to isté, líšia sa však významom parametrov:

 

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š.