11. diel - Textové reťazce v JavaScripte druhýkrát - Práca so znakmi Nové

V dnešnom JavaScript tutoriále sa budeme zaoberať prístupom k jednotlivým znakom textového reťazca a predstavíme si ďalšie metódy pre prácu s reťazcami.

Textový reťazec

Pokiaľ ste vycítili nejakú podobnosť medzi poľom a textovým reťazcom, tak ste vycítili správne. Pre ostatných môže byť prekvapením, že je dátový typ string v podstate poľa jednotlivých znakov a môžeme s ním aj takto pracovať. Pre prístup k jednotlivým znakom slúži metóda charAt(index), kde index udáva index znaku v reťazci (počnúc 0). Opačne na zistenie indexu zadaného znaku slúži metóda indexOf(znak), kde znak je hľadaný znak. Táto metóda vracia index prvého výskytu daného znaku a pokiaľ ho v reťazci nenájde vráti hodnotu -1.

Práca so znakmi reťazca

Najprv si vyskúšajme, že to všetko funguje. Rozcvičíme sa na jednoduchom vypísaní znaku na danej pozícii:

let jazyk = "JavaScript";
document.write(jazyk);
document.write("<br />");
document.write(jazyk.charAt(2));
document.write("<br />");
document.write(jazyk.indexOf("a"));

Výstup:

Jednotlivé znaky v reťazci môžeme vybrať aj pomocou indexu. Index sa zapisuje do hranatých zátvoriek za názvom premennej. Čísluje sa od nuly, prvému znaku teda zodpovedá index [0]:

let vstup = "JavaScript";
document.write(vstup[0]); // vypíše prvý znak reťazca
document.write(vstup[4]); // vypíše piaty znak reťazca

Výstup:

Znaky na danej pozícii sú v JavaScripte read-only, nemôžeme ich teda jednoducho zmeniť.

Samozrejme to ide urobiť inak, neskôr si to ukážeme, zatiaľ sa budeme venovať iba čítaniu jednotlivých znakov.

Metóda lastIndexOf()

Ak chceme zistiť posledný index daného znaku alebo podreťazca, použijeme metódu lastIndexOf():

let pozdrav = "Hello, world!";
pozdrav.indexOf("world"); // vracia prvý index = 7
pozdrav.lastIndexOf("o"); // vracia posledný nájdený index = 8

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

let pozdrav = "Ahoj ";
let trojnasobnyPozdrav = pozdrav.repeat(3);
document.write(trojnasobnyPozdrav);

Výstup:

Metóda substring()

Teraz si ešte ukážeme, ako získať vybranú časť reťazca, ktoré sa hovorí podreťazec:

let skladatel = "Wolfgang Amadeus Mozart";
skladatel.substring(9, 16); // vráti znaky od deviatej do šestnástej pozície, teda "Amadeus"

V JS existovala aj metóda substr(), ktorá je teraz označená ako zastaraná.

ASCII hodnota

Možno ste už niekedy počuli o tabuľke ASCII. Najmä v ére operačného systému MS-DOS prakticky nebola iná možnosť, ako zaznamenávať text. Jednotlivé znaky boli uložené ako čísla typu byte, teda s rozsahom hodnôt od 0 do 255. V systéme bola uložená tzv. ASCII tabuľka, ktorá mala tiež 256 znakov a každému ASCII kódu (číselnému kódu) priraďovala jeden znak.

Asi je vám jasné, prečo tento spôsob nepretrval dodnes. Do tabuľky sa jednoducho nezmestili všetky znaky všetkých národných abecied, teraz sa používa Unicode (UTF-8) kódovanie, kde sú znaky reprezentované trochu iným spôsobom. Napriek tomu máme stále možnosť pracovať s ASCII hodnotami jednotlivých znakov. Hlavná výhoda je v tom, že znaky sú uložené v tabuľke za sebou, podľa abecedy. Napr. na pozícii 97 nájdeme znak a, na pozícii 98 znak b a podobne. Podobne je to s číslami, diakritické znaky tam budú bohužiaľ len nejako rozhádzané.

Skúsme si teraz previesť znak do jeho ASCII hodnoty a naopak podľa ASCII hodnoty daný znak vytvoriť. Využijeme na to metódu charCodeAt() a ako parameter jej zadáme index 0 a metódu String.fromCharCode(), ktorá v parametri prijíma číselnú hodnotu pre daný ASCII znak:

let znak = 'a';
let hodnotaAscii = znak.charCodeAt(0); // Prevedie znak na jeho ASCII hodnotu
document.write(`Znak ${znak} jsme převedli na ASCII hodnotu ${hodnotaAscii}`);
document.write("<br />");

hodnotaAscii = 98;
znak = String.fromCharCode(hodnotaAscii); // Prevedie ASCII hodnotu na znak
document.write(`ASCII hodnotu ${hodnotaAscii} jsme převedli na znak ${znak}`);

Výstup:

Caesarovho šifra. Program si dokonca môžete vyskúšať v praxi - Online caesarovho šifra Vráťme sa k programovaniu a pripravme si kód. Budeme potrebovať premenné pre pôvodný text, zašifrovanú správu a pre posun. Ďalej cyklus prechádzajúci jednotlivé znaky a výpis zašifrovanej správy. Správu si necháme zapísanú napevno v kóde, aby sme ju nemuseli pri každom spustení programu písať. Šifra nepočíta s diakritikou, medzerami a interpunkčnými znamienkami:

// inicializácia premenných
let puvodniZprava = "gaiusjuliuscaesar";
document.write("Pôvodná správa: " + puvodniZprava);
document.write("<br />");

let zasifrovanaZprava = "";
let posun = 1;

// cyklus prechádzajúci jednotlivými znakmi
for (let znak of puvodniZprava) {
    // ...
}

// výpis
document.write("Zašifrovaná správa: " + zasifrovanaZprava);

Teraz sa presunieme dovnútra cyklu, prevedieme premennú so znakom znak na ASCII hodnotu (čiže ordinálnu hodnotu), túto hodnotu zvýšime o posun a prevedieme späť na znak. Tento znak nakoniec pripojíme k výslednej správe:

// inicializácia premenných
let puvodniZprava = "gaiusjuliuscaesar";
document.write("Pôvodná správa: " + puvodniZprava);
document.write("<br />");

let zasifrovanaZprava = "";
let posun = 1;

// cyklus prechádzajúci jednotlivými znakmi
for (let znak of puvodniZprava) {
    let ascii = znak.charCodeAt(0);
    ascii += posun;
    znak = String.fromCharCode(ascii);
    zasifrovanaZprava += znak;
}

// výpis
document.write("Zašifrovaná správa: " + zasifrovanaZprava);

Výstup programu:

Program si vyskúšame. Výsledok vyzerá celkom dobre. Skúsme si však zadať vyšší posun alebo napísať slovo zebra. Vidíme, že znaky môžu po z pretiecť do ASCII hodnôt ďalších znakov, v texte teda už nemáme len písmená, ale ďalšie škaredé znaky. Uzavrieme znaky do kruhu tak, aby posun plynule po znaku z prešiel opäť k znaku a a ďalej. Postačí nám k tomu jednoduchá podmienka, ktorá od novej ASCII hodnoty odpočíta celú abecedu tak, aby sme začínali opäť na a. Upravený cyklus bude vyzerať takto:

for (let znak of puvodniZprava) {
    let ascii = znak.charCodeAt(0);
    ascii += posun;
    // Kontrola pretečenia
    if (ascii > 'z'.charCodeAt(0)) {
        ascii -= 26;
    }
    znak = String.fromCharCode(ascii);
    zasifrovanaZprava += znak;
}

Pokiaľ hodnota premennej ascii presiahne ASCII hodnotu 'z', znížime ju o 26 znakov (toľko znakov má anglická abeceda). Operátor -= vykoná to isté, ako by sme napísali ascii = ascii - 26. Je to jednoduché a náš program je teraz funkčný.

Ako pôvodnú správu nastavíme text zebra av prehliadači potom program znovu spustíme:

Všimnime si, že nikde nepoužívame priame kódy znakov, v podmienke je ascii > 'z'.charCodeAt(0), aj keď by sme tam mohli napísať rovno 122. Je to z dôvodu, aby bol náš program plne odtienený od explicitných ASCII hodnôt a bolo lepšie viditeľné, ako funguje. Cvične si skúste urobiť dešifrovanie:)

V budúcej lekcii, Textové reťazce v JavaScripte do tretice - Split a join , si ukážeme, že string vie predsa len ešte niečo navyše. Prezradím, že budeme dekódovať Morseovu abecedu.

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