13. diel - Textové reťazce v JavaScripte do tretice - Split a join

V minulej lekcii, Textové reťazce v JavaScripte druhýkrát - Práca so znakmi, sme si ukázali, že textový reťazec je vlastne pole znakov.

V dnešnom tutoriále základov JavaScriptu si vysvetlíme ďalšie metódy na reťazci, ktoré sme vám zámerne zatajili, pretože sme nevedeli, že textový reťazec je vlastne pole

Metódy na reťazci

Keď si vytvoríme ľubovoľnú premennú a napíšeme za ňu potom bodku, zobrazí nám IDE ponuku všetkých metód a vlastností (a tiež premenných, ale k tomu sa dostaneme až pri objektoch), ktoré na ňu môžeme volať. Skúsme si to:

Samozrejme to platí pre všetky premenné aj triedy a budeme to využívať stále častejšie. Metódy sú radené abecedne a môžeme nimi listovať pomocou kurzorových šípok. Visual Studio Code nám navyše zobrazuje aj popis metód (čo robia a aké vyžadujú parametre). Tento popis môžeme vo VS Code vyvolať tým, že prejdeme kurzorom myši na danú metódu:

Povedzme si o nasledujúcich metódach a ukážme si ich na jednoduchých príkladoch.

Metóda localeCompare()

Naučíme sa porovnávať dva reťazce podľa aktuálneho jazykového prostredia. V JavaScripte na to slúži metóda localeCompare():

let hosts = 'Argentina';
let visitors = 'Barbados';

let result = hosts.localeCompare(visitors);

if (result < 0) {
    document.write('String "hosts" is BEFORE the string "visitors" in alphabetical order.');
} else if (result > 0) {
    document.write('String "hosts" is AFTER the string "visitors" in alphabetical order.');
} else {
    document.write('String "hosts" and "visitors" matches in alphabetical order.');
}

Metóda localeCompare() vracia číslo, ktoré označuje poradie porovnávaných reťazcov v abecednom poradí. Hodnota -1 znamená, že prvý reťazec je pred reťazcom v parametri. Hodnotu 0 dostaneme, ak sú oba textové reťazce rovnaké. A hodnotu 1 získame, pokiaľ je prvý reťazec v abecede za druhým.

Pre naše reťazce bude výstup v prehliadači:

Poďme sa teraz pozrieť na ďalšie metódy, ktoré sú naozaj veľmi užitočné.

Metóda join()

Metóda join() slúži na spojenie všetkých prvkov poľa do jedného reťazca:

let words = ['apple', 'orange', 'banana'];
let sentence = words.join(', '); // joins array elements with a comma as a separator
document.write(sentence);

Oddeľovač medzi prvkami poľa je voliteľný. Ak nie je špecifikovaný, prvky sú spojené čiarkou bez medzery.

Výstup:

Metódu join() môžeme použiť namiesto cyklu for...of, ak potrebujeme vypísať všetky položky uložené v poli. V lekcii Pole v JavaScripte sme vypisovali čísla z poľa takto:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

for (let number of numbers) {
    document.write(number + " ");
}

Rovnaký výsledok dosiahneme zápisom:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

document.write(numbers.join(' '));

Výstup:

Metóda split()

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

let question = 'how-are-you';
let words = question.split("-"); // [0] how [1] are [2] you
for (let word of words) {
    document.write(word + "<br>");
}

Výstup:

Práca s formátom CSV

Z predchádzajúceho tutoriálu vieme, že parsovanie reťazca po znaku môže byť niekedy celkom zložité a to sme robili pomerne jednoduchý príklad. S reťazcami sa samozrejme budeme stretávať stále, a to ako na vstupe od používateľa (napr. z konzoly alebo z polí v okenných aplikáciách), tak v súboroch TXT a XML. Veľmi často máme zadaný jeden dlhší textový reťazec (riadka súboru alebo riadok konzoly), v ktorom je viac hodnôt, oddelených tzv. separátormi, napr. čiarkou. V tomto prípade hovoríme o formáte CSV (Comma-Separated Values, teda hodnoty oddelené čiarkou). Aby sme si boli istí, že vieme, o čom hovoríme, ukážme si nejaké ukážkové reťazce:

John,Murphy,Long street 10,Dublin 3,D03 XYZ
.. ... .-.. .- -. -.. ... --- ..-. -
(1,2,3;4,5,6;7,8,9)

Význam jednotlivých reťazcov:

• Prvý reťazec je očividne nejaký používateľ, takto by sme mohli napr. realizovať uloženie používateľov do CSV súboru, každý na jeden riadok.
• Druhý reťazec sú znaky Morseovej abecedy, separátor (oddeľovač) je tu medzera.
• Tretí reťazec je matica s 3 stĺpcami a 3 riadkami. Oddeľovač stĺpcov je čiarka, riadkov bodkočiarka.

Keďže nevieme tvoriť objekty (užívateľa), skúsime si naprogramovať dekodér správ z Morseovej abecedy.

Dekodér Morseovej abecedy

Poďme si opäť pripraviť štruktúru programu. Budeme potrebovať dva reťazce so správou, jeden so správou v Morseovej abecede, druhý zatiaľ prázdny, do ktorého budeme ukladať výsledok nášho snaženia:

// the string we want to decode
let encryptedMessage= ".-.. . --- -. .- .-. -.. ---";

// string with the decrypted message
let decryptedMessage= "";

Ďalej budeme ako v prípade samohlások potrebovať nejaký vzor písmen. K písmenám samozrejme vzor ich znaku v morseovke:

let alphabet = "abcdefghijklmnopqrstuvwxyz";
let morseCodes = [".-", "-...", "-.-.", "-..", ".", "..-.", "--.", "....",
  "..", ".---", "-.-", ".-..", "--", "-.", "---", ".--.", "--.-", ".-.", "...", "-", "..-",
  "...-", ".--", "-..-", "-.--", "--.."];

Písmená môžeme uložiť do obyčajného reťazca, pretože majú iba jeden znak. Znaky Morseovej abecedy majú už znakov viac, tie musíme dať do poľa.

Neskôr si môžeme pridať ďalšie znaky ako čísla a interpunkčné znamienka, my ich tu vynecháme.

Teraz si reťazec encryptedMessage rozbijeme metódou split() na pole podreťazcov, obsahujúcich jednotlivé znaky morzeovky:

// breaking the string into Morse code characters
let characters = encryptedMessage.split(" ");

// iteration of morse code characters
for (let morseCode of characters) {
    // ...
}

Rozdeľovať budeme podľa znaku medzery. Pole následne proiterujeme cyklom for...of.

Ideálne by sme sa mali nejako vysporiadať s prípadmi, keď používateľ zadá napr. viac medzier medzi znakmi (to používatelia radi robia). Metóda split() potom vytvorí o jeden reťazec v poli viac, ktorý bude prázdny. Ten by sme mali potom v cykle detekovať a ignorovať, my sa s tým v tutoriáli nebudeme zaoberať.

V cykle sa pokúsime nájsť aktuálne čítaný znak morzeovky v poli morseCodes. Bude nás zaujímať jeho index, pretože keď sa pozrieme na ten istý index v reťazci alphabet, bude tam zodpovedajúce písmeno. To je samozrejme z toho dôvodu, že pole aj reťazec obsahujú rovnaké znaky, zoradené podľa abecedy. Telo cyklu teda doplníme kódom:

// iteration of morse code characters
for (let morseCode of characters) {
    let alphabetCharacter = '?';

    let index = morseCodes.indexOf(morseCode);

    // character has been found
    if (index >= 0) {
        alphabetCharacter = alphabet.charAt(index);
    }
    decryptedMessage += alphabetCharacter;
}

Kód najskôr do abecedného znaku uloží znak ?, pretože sa môže stať, že znak v našej sade nemáme. Následne sa pokúsime zistiť jeho index pomocou metódy indexOf(). Ak sme znak našli (index >= 0), dosadíme do premennej alphabetCharacter znak z abecedy pod týmto indexom. Nakoniec znak pripojíme k správe.

Operátor += nahrádza message = message + alphabetCharacter.

Na záver samozrejme vypíšeme pôvodnú aj dekódovanú správu. Celý kód bude vyzerať takto:

// the string we want to decode
let encryptedMessage = ".-.. . --- -. .- .-. -.. ---";

// string with the decoded message
let decryptedMessage = "";

let alphabet = "abcdefghijklmnopqrstuvwxyz";
let morseCodes = [".-", "-...", "-.-.", "-..", ".", "..-.", "--.", "....",
    "..", ".---", "-.-", ".-..", "--", "-.", "---", ".--.", "--.-", ".-.", "...", "-", "..-",
    "...-", ".--", "-..-", "-.--", "--.."];

// breaking the string into Morse code characters
let characters = encryptedMessage.split(" ");

// iteration of morse code characters
for (let morseCode of characters) {
    let alphabetCharacter = '?';

    let index = morseCodes.indexOf(morseCode);

    // character has been found
    if (index >= 0) {
        alphabetCharacter = alphabet.charAt(index);
    }
    decryptedMessage += alphabetCharacter;
}

document.write("Original message: " + encryptedMessage + "<br>");
document.write("Decrypted message: " + decryptedMessage + "<br>");

Výstup programu:

Hotovo! Za úlohu máte si naprogramovať program opačný, ktorý naopak zakóduje reťazec do morzeovky, kód bude veľmi podobný. S metódami split() a join() sa stretneme počas kurzu ešte niekoľkokrát.

V ďalšej lekcii, Funkcie v JavaScripte, sa pozrieme na funkcie. Budeme im odovzdávať parametre, potom budú vracať a ukladať hodnotu.

 

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