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

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 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í.');
}

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 slova = ['jablko', 'pomeranč', 'banán'];
let veta = slova.join(', '); // spojí prvky poľa s čiarkou ako oddeľovačom
document.write(veta);

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 cisla = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

for (let cislo of cisla) {
    document.write(cislo + " ");
}

Rovnaký výsledok dosiahneme zápisom:

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

document.write(cisla.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 otazka = 'ako-sa-máš';
let slova = otazka.split("-"); // [0] ako [1] sa [2] máš
for (let slovo of slova) {
    document.write(slovo + "<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 (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.

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:

// reťazec, ktorý chceme dekódovať
let sifrovanaZprava = ".-.. . --- -. .- .-. -.. ---";

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

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

let abeceda = "abcdefghijklmnopqrstuvwxyz";
let morseovyZnaky = [".-", "-...", "-.-.", "-..", ".", "..-.", "--.", "....",
  "..", ".---", "-.-", ".-..", "--", "-.", "---", ".--.", "--.-", ".-.", "...", "-", "..-",
  "...-", ".--", "-..-", "-.--", "--.."];

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. Štruktúra nášho programu by teraz mohla vyzerať nasledovne:

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:

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

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

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 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. 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 najprv 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 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 vypíšeme pôvodnú aj dekódovanú správu. Celý kód bude vyzerať takto:

// reťazec, ktorý chceme dekódovať
let sifrovanaZprava = ".-.. . --- -. .- .-. -.. ---";

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

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("Pôvodná správa: " + sifrovanaZprava + "<br>");
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.

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