12. diel - Textové reťazce v JavaScripte do tretice - Split a join 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 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 nabehneme 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()

Začneme metódou localeCompare(), tá v JavaScripte slúži na porovnanie dvoch reťazcov podľa aktuálneho jazykového prostredia. Táto metóda vracia číslo, ktoré označuje poradie porovnávaných reťazcov v abecednom poradí. Hodnotu -1 znamená, že prvý reťazec je pred reťazcom v parametri. Hodnotu dostaneme 0, ak sú oba textové reťazce rovnaké. A hodnotu 1 získame, ak je prvý reťazec v abecede za druhým:

let domaci = 'Argentina';
let hoste = 'Barbados';

let vysledek = domaci.localeCompare(hoste);

if (vysledek < 0) {
    document.write('Řetězec "domaci" je PŘED řetězcem "hoste" v abecedním pořadí.');
} else if (vysledek > 0) {
    document.write('Řetězec "domaci" je ZA řetězcem "hoste" v abecedním pořadí.');
} else {
    document.write('Řetězec "domaci" a "hoste" jsou shodné v abecedním pořadí.');
}

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. Oddeľovač medzi prvkami poľa je voliteľný. Ak nie je špecifikovaný, prvky sú spojené bez medzery:

let slova = ['Ahoj', 'světe'];
let veta = slova.join(' '); // spoja prvky poľa s medzerou ako oddeľovačom -> "Ahoj svete"

Metóda split()

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

let otazka = 'ako-sa-máš';
otazka.split("-"); // [0] ako [1] sa [2] máš

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 (C omma -S eparated V alues, teda hodnoty oddelené čiarkou). Aby sme si boli istí, že vieme, o čom hovoríme, ukážme si nejaké ukážkové reťazce:

Jan,Novák,Dlhá 10,Praha 3,130 00
.. ... .-.. .- -. -.. ... --- ..-. -
(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.

Na type string môžeme volať metódu split(), ktorá berie ako parameter separátor. Následne pôvodný reťazec rozdelí podľa separátorov na pole podreťazcov, ktoré vrátia. To nám veľmi uľahčí prácu pri rozdeľovaní hodnôt v reťazci.

Metóda join() sa volá priamo na type string a umožňuje nám naopak pole podreťazcov spojiť oddeľovačom do jediného reťazca, parametre sú oddeľovač a pole. Výstupom metódy je výsledný reťazec.

Keďže nevieme tvoriť objekty (užívateľa) a ani pracovať s viacrozmernými poľami (matice), 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. Ďalej budeme ako v prípade samohlások potrebovať nejaký vzor písmen. K písmenám samozrejme vzor ich znaku v morseovke. Písmená môžeme opäť 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. Štruktúra nášho programu by teraz mohla vyzerať nasledovne:

// reťazec, ktorý chceme dekódovať
let sifrovanaZprava = ".-.. . --- -. .- .-. -.. ---";
document.write("Pôvodná správa: " + sifrovanaZprava + "<br>");

// reťazec s dekódovanou správou
let dekodovanaZprava = "";

// vzorové polia
let abeceda = "abcdefghijklmnopqrstuvwxyz";
let morseovyZnaky = [".-", "-...", "-.-.", "-..", ".", "..-.", "--.", "....",
  "..", ".---", "-.-", ".-..", "--", "-.", "---", ".--.", "--.-", ".-.", "...", "-", "..-",
  "...-", ".--", "-..-", "-.--", "--.."];

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

Teraz si reťazec sifrovanaZprava rozbijeme metódou split() na pole podreťazcov, obsahujúcich jednotlivé znaky morzeovky. Rozdeľovať budeme podľa znaku medzery. Pole následne proiterujeme cyklom for...of:

// rozbitie reťazca na znaky morzeovky
let znaky = sifrovanaZprava.split(" ");

// iterácia znaky morseovky
for (let morseuvZnak of znaky) {
  // ...
}

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 morseovyZnaky. Bude nás zaujímať jeho index, pretože keď sa pozrieme na ten istý index v poli abeceda, 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. Umiestnime do tela cyklu nasledujúci kód. Telo cyklu teda doplníme kódom:

// iterácia znaky morseovky
for (let morseuvZnak of znaky) {
  let abecedniZnak = '?';

  let index = morseovyZnaky.indexOf(morseuvZnak);

  // znak nájdený
  if (index >= 0) {
    abecedniZnak = abeceda.charAt(index);
  }
  dekodovanaZprava += abecedniZnak;
}

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(). Pokiaľ sme znak našli (index >= 0), dosadíme do premennej abecedniZnak znak z abecedy pod týmto indexom. Nakoniec znak pripojíme k správe. Operátor += nahrádza zprava = zprava + abecedniZnak.

Na záver, samozrejme, správu vypíšeme. Celý kód bude vyzerať takto:

// reťazec, ktorý chceme dekódovať
let sifrovanaZprava = ".-.. . --- -. .- .-. -.. ---";
document.write("Pôvodná správa: " + sifrovanaZprava + "<br>");

// reťazec s dekódovanou správou
let dekodovanaZprava = "";

// vzorové polia
let abeceda = "abcdefghijklmnopqrstuvwxyz";
let morseovyZnaky = [".-", "-...", "-.-.", "-..", ".", "..-.", "--.", "....",
  "..", ".---", "-.-", ".-..", "--", "-.", "---", ".--.", "--.-", ".-.", "...", "-", "..-",
  "...-", ".--", "-..-", "-.--", "--.."];

// rozbitie reťazca na znaky morzeovky
let znaky = sifrovanaZprava.split(" ");

// iterácia znaky morseovky
for (let morseuvZnak of znaky) {
  let abecedniZnak = '?';

  let index = morseovyZnaky.indexOf(morseuvZnak);

  // znak nájdený
  if (index >= 0) {
    abecedniZnak = abeceda.charAt(index);
  }
  dekodovanaZprava += abecedniZnak;
}

document.write("Dekódovaná správa: " + dekodovanaZprava + "<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.

 

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