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

V minulej lekcii, Cykly v JavaScripte druhýkrát , sme sa naučili používať kľúčové slová break, continue, návestí a cyklus do-while.

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 poskytuje JavaScript dve metódy:

• charAt(index) – Túto metódu použijeme na získanie znaku na určitej pozícii. V jej parametri zadáme index znaku v reťazci (počnúc 0).
• indexOf(znak) – Opakom je metóda indexOf(znak). Vďaka nej zistíme index zadaného znaku. Ako parameter jej teda odovzdáme 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. Jednotlivé znaky v reťazci môžeme vybrať 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 jazyk = "JavaScript";
document.write(jazyk[0]); // vypíše prvý znak reťazca
document.write(jazyk[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 charAt()

Znak na danom indexe môžeme nájsť aj pomocou metódy charAt() predchádzajúci kód by sme zapísali takto:

let jazyk = "JavaScript";
document.write(jazyk.charAt(0));
document.write(jazyk.charAt(4));

V praxi použijeme skôr prvý zápis. Ak v ňom zadáme neplatný index (v našom prípade napríklad číslo 15), získame hodnotu undefined. Oproti tomu metóda charAt() v takom prípade vráti prázdny reťazec.

Výstup:

Metóda indexOf()

A teraz sa pozrieme na zistenie indexu zadaného znaku. Ako sme už spomenuli v úvode lekcie, využijeme metódu indexOf().

Skúsme si vypísať index znaku a, s a nejaký znak, ktorý v texte nie je, napríklad x:

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

Výstup:

Vidíme, že znak s v texte JavaScript nebol nájdený. Metóda indexOf() totiž rozlišuje medzi veľkými a malými písmenami. Ak by sme jej v parametri zadali veľké S, získali by sme index 4.

Metóda lastIndexOf()

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

let jazyk = "JavaScript";
document.write(jazyk.lastIndexOf("a"));

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";
document.write(skladatel.substring(9, 16));

Výstup:

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. Využijeme na to metódu charCodeAt() a ako parameter jej zadáme index 0:

let znak = "a";
let hodnotaAscii = znak.charCodeAt(0); // Prevedie znak na jeho ASCII hodnotu
document.write(`Znak '${znak}' sme previedli na ASCII hodnotu ${hodnotaAscii}`);

Výstup:

Pomocou metódy String.fromCharCode() naopak vytvoríme určitý znak, keď jej v parametri zadáme číselnú ASCII hodnotu:

let hodnotaAscii = 98;
let znak = String.fromCharCode(hodnotaAscii); // Prevedie ASCII hodnotu na znak
document.write(`ASCII hodnotu ${hodnotaAscii} sme previedli 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 si pripravíme cyklus prechádzajúci jednotlivými znakmi 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 i = 0; i < puvodniZprava.length; i++) {
    // ...
}

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

Teraz sa presunieme dovnútra cyklu, v ňom postupne získame ASCII hodnotu (čiže ordinálnu hodnotu) jednotlivých znakov, túto hodnotu zakaždým zvýšime o posun a prevedieme 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 i = 0; i < puvodniZprava.length; i++) {
    let ascii = puvodniZprava.charCodeAt(i);
    ascii += posun;
    let 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.

Doplnenie kontroly pretečenia

Problém vyriešime tým, že uzavrieme znaky do kruhu tak, aby posun plynule po znaku z prešiel opäť k znaku a podobne. 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 i = 0; i < puvodniZprava.length; i++) {
    let ascii = puvodniZprava.charCodeAt(i);
    ascii += posun;
    // Kontrola pretečenia
    if (ascii > "z".charCodeAt(0)) {
        ascii -= 26;
    }
    let 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š.