Lekce 13 - Textové řetězce v JavaScriptu do třetice - Split a join

V minulé lekci, Textové řetězce v JavaScriptu podruhé - Práce se znaky, jsme si ukázali, že textový řetězec je vlastně pole znaků.

V dnešním tutoriálu základů JavaScriptu si vysvětlíme další metody na řetězci, které jsme vám záměrně zatajili, protože jsme nevěděli, že textový řetězec je vlastně pole

Metody na řetězci

Když si vytvoříme libovolnou proměnnou a napíšeme za ni poté tečku, zobrazí nám IDE nabídku všech metod a vlastností (a také proměnných, ale k tomu se dostaneme až u objektů), které na ni můžeme volat. Zkusme si to:

Samozřejmě to platí pro všechny proměnné i třídy a budeme toho využívat stále častěji. Metody jsou řazené abecedně a můžeme jimi listovat pomocí kurzorových šipek. Visual Studio Code nám navíc zobrazuje i popis metod (co dělají a jaké vyžadují parametry). Tento popis můžeme ve VS Code vyvolat tím, že najedeme kurzorem myši na danou metodu:

Řekněme si o následujících metodách a ukažme si je na jednoduchých příkladech.

Metoda localeCompare()

Naučíme se porovnávat dva řetězce podle aktuálního jazykového prostředí. V JavaScriptu k tomu slouží metoda 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í.');
}

Metoda localeCompare() vrací číslo, které označuje pořadí porovnávaných řetězců v abecedním pořadí. Hodnota -1 znamená, že je první řetězec před řetězcem v parametru. Hodnotu 0 dostaneme, pokud jsou oba textové řetězce stejné. A hodnotu 1 získáme, pokud je první řetězec v abecedě za druhým.

Pro naše řetězce bude výstup v prohlížeči:

Pojďme se nyní podívat na další metody, které jsou opravdu velmi užitečné.

Metoda join()

Metoda join() slouží ke spojení všech prvků pole do jednoho řetězce:

let slova = ['jablko', 'pomeranč', 'banán'];
let veta = slova.join(', '); // spojí prvky pole s čárkou jako oddělovačem
document.write(veta);

Oddělovač mezi prvky pole je volitelný. Pokud není specifikován, prvky jsou spojeny čárkou bez mezery.

Výstup:

Metodu join() můžeme použít namísto cyklu for...of, pokud potřebujeme vypsat všechny položky uložené v poli. V lekci Pole v JavaScriptu jsme vypisovali čísla z pole takto:

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

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

Stejného výsledku dosáhneme zápisem:

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

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

Výstup:

Metoda split()

Metoda split() naopak rozdělí řetězec na pole podřetězců podle zadaného znaku (oddělovače):

let otazka = 'jak-se-máš';
let slova = otazka.split("-"); // [0] jak [1] se [2] máš
for (let slovo of slova) {
    document.write(slovo + "<br>");
}

Výstup:

Práce s formátem CSV

Z předchozího tutoriálu víme, že parsování řetězce po znaku může být někdy docela složité a to jsme dělali poměrně jednoduchý příklad. S řetězci se samozřejmě budeme setkávat stále, a to jak na vstupu od uživatele (např. z konzole nebo z polí v okenních aplikacích), tak v souborech TXT a XML. Velmi často máme zadán jeden delší textový řetězec (řádka souboru nebo řádka konzole), ve kterém je více hodnot, oddělených tzv. separátory, např. čárkou. V tomto případě hovoříme o formátu CSV (Comma-Separated Values, tedy hodnoty oddělené čárkou). Abychom si byli jisti, že víme, o čem hovoříme, ukažme si nějaké ukázkové řetězce:

Jan,Novák,Dlouhá 10,Praha 3,130 00
.. ... .-.. .- -. -.. ... --- ..-. -
(1,2,3;4,5,6;7,8,9)

Význam jednotlivých řetězců:

• První řetězec je očividně nějaký uživatel, takto bychom mohli např. realizovat uložení uživatelů do CSV souboru, každý na jeden řádek.
• Druhý řetězec jsou znaky Morseovy abecedy, separátor (oddělovač) je zde mezera.
• Třetí řetězec je matice o 3 sloupcích a 3 řádcích. Oddělovač sloupců je čárka, řádků středník.

Jelikož neumíme tvořit objekty (uživatele), zkusíme si naprogramovat dekodér zpráv z Morseovy abecedy.

Dekodér Morseovy abecedy

Pojďme si opět připravit strukturu programu. Budeme potřebovat dva řetězce se zprávou, jeden se zprávou v Morseově abecedě, druhý zatím prázdný, do kterého budeme ukládat výsledek našeho snažení:

// řetězec, který chceme dekódovat
let sifrovanaZprava = ".-.. . --- -. .- .-. -.. ---";

// řetězec s dekódovanou zprávou
let dekodovanaZprava = "";

Dále budeme jako v případě samohlásek potřebovat nějaký vzor písmen. K písmenům samozřejmě vzor jejich znaku v morseovce:

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

Písmena můžeme uložit do pouhého řetězce, protože mají jen jeden znak. Znaky Morseovy abecedy mají již znaků více, ty musíme dát do pole.

Později si můžeme přidat další znaky jako čísla a interpunkční znaménka, my je zde vynecháme.

Nyní si řetězec sifrovanaZprava rozbijeme metodou split() na pole podřetězců, obsahujících jednotlivé znaky morseovky:

// rozbití řetězce na znaky morseovky
let znaky = sifrovanaZprava.split(" ");

// iterace znaky morseovky
for (let morseuvZnak of znaky) {
    // ...
}

Rozdělovat budeme podle znaku mezery. Pole následně proiterujeme cyklem for...of.

Ideálně bychom se měli nějak vypořádat s případy, kdy uživatel zadá např. více mezer mezi znaky (to uživatelé rádi dělají). Metoda split() poté vytvoří o jeden řetězec v poli více, který bude prázdný. Ten bychom měli poté v cyklu detekovat a ignorovat, my se s tím v tutoriálu nebudeme zabývat.

V cyklu se pokusíme najít aktuálně čtený znak morseovky v poli morseovyZnaky. Bude nás zajímat jeho index, protože když se podíváme na ten samý index v řetězci abeceda, bude tam odpovídající písmeno. To je samozřejmě z toho důvodu, že jak pole tak řetězec obsahují stejné znaky, seřazené dle abecedy. Tělo cyklu tedy doplníme kódem:

// iterace znaky morseovky
for (let morseuvZnak of znaky) {
    let abecedniZnak = '?';

    let index = morseovyZnaky.indexOf(morseuvZnak);

    // znak nalezen
    if (index >= 0) {
        abecedniZnak = abeceda.charAt(index);
    }
    dekodovanaZprava += abecedniZnak;
}

Kód nejprve do abecedního znaku uloží znak ?, protože se může stát, že znak v naší sadě nemáme. Následně se pokusíme zjistit jeho index pomocí metody indexOf(). Pokud jsme znak našli (index >= 0), dosadíme do proměnné abecedniZnak znak z abecedy pod tímto indexem. Nakonec znak připojíme ke zprávě.

Operátor += nahrazuje zprava = zprava + abecedniZnak.

Závěrem samozřejmě vypíšeme původní i dekódovanou zprávu. Celý kód bude vypadat takto:

// řetězec, který chceme dekódovat
let sifrovanaZprava = ".-.. . --- -. .- .-. -.. ---";

// řetězec s dekódovanou zprávou
let dekodovanaZprava = "";

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

// rozbití řetězce na znaky morseovky
let znaky = sifrovanaZprava.split(" ");

// iterace znaky morseovky
for (let morseuvZnak of znaky) {
    let abecedniZnak = '?';

    let index = morseovyZnaky.indexOf(morseuvZnak);

    // znak nalezen
    if (index >= 0) {
        abecedniZnak = abeceda.charAt(index);
    }
    dekodovanaZprava += abecedniZnak;
}

document.write("Původní zpráva: " + sifrovanaZprava + "<br>");
document.write("Dekódovaná zpráva: " + dekodovanaZprava + "<br>");

Výstup programu:

Hotovo! Za úkol máte si naprogramovat program opačný, který naopak zakóduje řetězec do morseovky, kód bude velmi podobný. S metodami split() a join() se potkáme během kurzu ještě několikrát.

V další lekci, Funkce v JavaScriptu, se podíváme na funkce. Budeme jim předávat parametry, poté budou vracet a ukládat hodnotu.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.