Lekce 14 - 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 se naučíme pracovat s našeptávačem. Dále si vysvětlíme další metody na řetězci, které pracují s polem.

Našeptávač Visual Studia Code

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í, které na ni můžeme v závislosti na jejím typu volat. Zkusme si to, vytvořme si proměnnou pozdrav s textovým řetězcem a následně napišme na nový řádek pozdrav. :

Vidíme výpis všech metod a vlastností řetězce, které můžeme použít.

Samozřejmě to platí i pro další datové typy a tohoto našeptávače budeme využívat stále častěji, protože si představíme ještě spoustu metod a nebudeme si je všechny pamatovat z hlavy. Metody jsou v našeptávači ř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:

Metody pro práci s řetězci a poli

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

Metoda split()

Metoda split() převede řetězec na pole. To udělá tak, že jej rozdělí na podřetězce podle zadaného oddělovače. Můžeme tak např. rozdělit text na slova, když jako oddělovač použijeme mezeru:

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

Výstup:

Metoda join()

Metoda join() dělá opačnou akci. Slouží k převedení pole na řetězec. Všechny prvky pole spojí do jednoho řetězce pomocí zadaného oddělovače. Kód níže spojí prvky pole do jednoho řetězce a oddělí je čárkou a mezerou:

let ovoce = ['jablko', 'pomeranč', 'banán'];
let text = ovoce.join(', '); // spojí prvky pole s čárkou jako oddělovačem
document.body.innerHTML += text;

Výstup:

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

Práce s formátem CSV

Z předchozích lekcí 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.

Dekodér Morseovy abecedy

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

Příprava proměnných

Budeme potřebovat dva řetězce:

• jeden se zprávou v Morseově abecedě,
• druhý zatím prázdný, do kterého budeme ukládat výsledek našeho snažení.

Kód bude následující:

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

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

Dále budeme potřebovat nějaký vzor písmen. A samozřejmě i 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.

Převod zprávy na pole

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) {
    // ...
}

Zprávu budeme rozdělovat 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. Metoda split() poté vytvoří o jeden řetězec v poli více, který bude prázdný. K tomu se dá zadat jako oddělovač tzv. regulární výraz. Ty jsou však nad rámec tohoto kurzu.

Vyhledání daného Morseova znaku

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.

Výpis zpráv a dokončení

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.body.innerHTML += "Původní zpráva: " + sifrovanaZprava + "<br>";
document.body.innerHTML += "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š.