Lekce 5 - Textové řetězce v JavaScriptu

V minulé lekci, Využití umělé inteligence při studiu programování, jsme si ukázali, jak využívat umělou inteligenci při studiu programování.

V dnešním tutoriálu základů JavaScriptu si představíme textové řetězce a operace, které s nimi můžeme provádět. Probereme také používání různých uvozovek a speciální znaky.

Textové řetězce v JavaScriptu

Textové řetězce slouží k uchovávání textu. Je to v podstatě řada znaků obklopená uvozovkami. S řetězci lze provádět různé operace, jako je spojení, rozdělení, vyhledávání podřetězců či měnění velikosti písmen. Textový řetězec je reprezentovaný datovým typem string. Jeho maximální délka záleží na konkrétním prohlížeči, ale jedná se minimálně o stovky milionů znaků.

Vytváření řetězců

Řetězce zapisujeme pomocí uvozovek. Využít můžeme několik typů – dvojité ", jednoduché ', ale i zpětné uvozovky ` neboli takzvaný tupý přízvuk:

let pozdravUvozovky = "Vítej na palubě!";
let pozdravApostrofy = 'Vítej na palubě!';
let pozdravPrizvuk = `Vítej na palubě!`;

Dvojité uvozovky

Dvojité uvozovky " napíšeme na klávesnici pomocí klávesy Shift a klávesy ů:

Když používáme dvojité uvozovky, můžeme uvnitř řetězce přímo použít jednoduché uvozovky bez potřeby escapování.

Jednoduché uvozovky

Jednoduché uvozovky ' (apostrof) napíšeme pomocí klávesy Shift a následující klávesy nad Enter (nebo vedle Enter, pokud máte Enter do tvaru "L"):

Tupý přízvuk

Zpětné uvozovky ` na české klávesnici můžeme napsat pomocí pravého Alt a písmene ý:

Kombinování uvozovek

Uvozovky lze kombinovat i uvnitř řetězce. Pokud tedy například chceme napsat jednoduchou uvozovku, vložíme řetězec do uvozovek dvojitých. Jednoduchá uvozovky by jinak v řetězci uzavřeném také v jednoduchých uvozovkách řetězec ukončila. Naopak, pokud chceme do řetězce vložit dvojité uvozovky, napíšeme jej do uvozovek jednoduchých:

let citat = 'Steve Jobs jednou řekl: "Lidé často nevědí, co chtějí, dokud jim to neukážete."';
document.write(citat);

Výstup v prohlížeči:

Pokud v předešlém příkladu nahradíme jednoduché uvozovky dvojitými, nic se nám nevypíše. Program si totiž bude myslet, že textový řetězec deklarujeme pouze v části "Steve Jobs jednou řekl: " a nebude vědět, jak vyhodnotit zbývající znaky, takže dojde k chybě.

Visual Studio Code nás na chybu upozorní a označí zbylý text červeně:

V prohlížeči pak uvidíme podobnou chybu v konzoli, kterou si otevřeme pomocí klávesy F12:

Kromě citací se dvojité uvozovky používají v HTML kódu pro atributy elementů, tudíž řetězec s HTML kódem také obalíme do uvozovek jednoduchých:

let htmlKod = '<img src="jelen.jpg" alt="Jelen lesní" />';

Escapování a speciální znaky

V řetězci můžeme zapsat i stejnou uvozovku, v nichž je řetězec již zapsaný, jen se uvozovka musí takzvaně escapovat. Tím docílíme toho, že ji JavaScript nevyhodnotí jako ukončení řetězce, ale pouze jako obyčejný znak. K escapování se používá zpětné lomítko:

let citat = "Steve Jobs jednou řekl: \"Lidé často nevědí, co chtějí, dokud jim to neukážete.\"";

Zpětné lomítko se na české klávesnici napíše pomocí pravého Alt a písmene Q:

Nyní zápis řetězce již chybu nevyvolá, protože dvojitá uvozovka je označená zpětným lomítkem \ a je jasné, že řetězec neukončuje. Zápis je ale nepřehledný a je lepší se mu vyhnout použitím jiných uvozovek.

Escape sekvence

Znaky s tímto lomítkem se souhrnně nazývají escape sekvence. Kromě uvozovek můžeme pomocí lomítka zapsat ještě několik speciálních znaků, které by se nám jinak zapisovaly těžko. Zde jsou ty nejpoužívanější:

• \n – nový řádek,
• \r – carriage return (součást odřádkování na Windows, viz dále),
• \t – tabulátor,
• \\ – zpětné lomítko.

Dejme si pozor na zápis zpětného lomítka. V tomto případě musíme zapsat dvě. V opačném případě si JavaScript bude myslet, že píšeme speciální znak.

Odřádkování \n je standardní způsob, jak zalomit nový řádek. Na Windows systémech se zpravidla odřádkovává sekvencí \r\n, ale na webu používáme jen \n. Pokud text vypisujeme jako HTML, odřádkujeme v něm klasicky pomocí <br />. Pokud bychom v HTML kódu použili odřádkování pomocí \n, prohlížeč ho nezobrazí, pokud si neotevřeme zdrojový kód stránky.

Interpolace řetězců

Na zápis textových řetězců můžeme použít zpětné uvozovky (`), což nám umožní tzv. interpolaci, tedy vložit proměnné přímo do řetězce. K vložení proměnné použijeme znak dolaru ($) a složené závorky ({}), do kterých zapíšeme název proměnné.

Na klávesnici znak dolaru $ napíšeme pomocí pravého Alt a písmene ů:

Složené závorky se na české klávesnici napíší pomocí pravého Alt a písmene B, resp. N:

Díky těmto speciálním znakům můžeme snadno např. vypsat proměnné přímo v textovém řetězci:

let a = 6;
let b = 4;
let c = 8;
let vypis = `Trojúhelník: a = ${a} cm, b = ${b} cm, c = ${c} cm.`;
document.write(vypis);

V prohlížeči se nám zobrazí tento výsledek:

Interpolace řetězců je mnohem přehlednější, než kdybychom řetězec přerušovali a proměnné do něj vkládali pomocí operátoru +.

Víceřádkové řetězce

Zpětné uvozovky umožňují definovat také víceřádkový text přímo v kódu:

let mudroslovi = `Kdo jinému jámu kopá,
sám do ní padá`;

Pokud bychom použili jednoduché nebo dvojité uvozovky, museli bychom odřádkovat pomocí \n:

let mudroslovi = "Kdo jinému jámu kopá,\n" +
"sám do ní padá";

Znovu připomínáme, že pokud řetězec vypíšete do HTML stránky, prohlížeč odřádkování nahradí mezerou. To je standardní chování jazyka HTML a stane se tak i když napíšete odřádkování přímo do HTML kódu a ne do JavaScriptu.

Text s odřádkováním si proto vypišme do ladící konzole pomocí funkce console.log():

<!DOCTYPE html>

<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <title>Víceřádkové řetězce v JavaScriptu</title>
    </head>
    <body>
        <script>
        let mudroslovi = `Kdo jinému jámu kopá,
sám do ní padá`;
        console.log(mudroslovi);
        </script>
    </body>
</html>

Skript uložíme a stránku obnovíme. Když otevřeme také ladící konzoli klávesou F12, uvidíme v ní odřádkovaný text:

Operace s řetězci

Nyní si představíme základní vlastnosti a metody pro práci s textovými řetězci. Začneme vlastností length, která v sobě nese informaci o počtu znaků v řetězci.

Vlastnost length

Délku řetězce zjistíme díky vlastnosti length. Použijeme ji následovně:

let jmeno = "Karel";
document.write(jmeno.length);

Výstup v prohlížeči:

Metoda trim()

Pokud načítáme text od uživatele, může se nám stát, že před text nebo za něj uživatel napíše mezeru. Kolem řetězců se také často vyskytují další takzvané bílé znaky, např. konce řádků. Metoda trim() tyto bílé znaky okolo řetězce odstraní, aby nekomplikovaly další zpracování. Uvnitř textu zůstanou bílé znaky ponechány:

let jmeno = "  Homer Simpson  ";
document.write(jmeno.length + "<br />"); // ve výsledku jsou započítány dvě mezery na začátku řetězce a dvě mezery na jeho konci
jmeno = jmeno.trim(); // v proměnné je nyní uloženo "Homer Simpson"
document.write(jmeno.length + "<br />");
document.write(jmeno);

Výstup v prohlížeči:

Metoda replace()

Tato metoda slouží k nahrazení podřetězce, což je část řetězce, jiným textem. Přijímá dva parametry. Nejprve zadáme hledaný text a poté text, kterým jej chceme nahradit:

let puvodniVeta = "PHP je nejlepší!";
let upravenaVeta = puvodniVeta.replace("PHP", "JavaScript");
document.write(puvodniVeta);
document.write("<br />");
document.write(upravenaVeta);

Výstup v prohlížeči:

Metody toUpperCase() a toLowerCase()

Mnohdy se budeme potřebovat zeptat na přítomnost podřetězce tak, aby nezáleželo na velikosti písmen. Situaci můžeme vyřešit pomocí metod toUpperCase() a toLowerCase(), které vrací řetězec ve velkých a v malých písmenech. Změní tedy všechna písmena v řetězci na velká nebo na malá:

let jmeno = "karel Novák";
jmeno = jmeno.toUpperCase(); // KAREL NOVÁK
document.write(jmeno);
document.write("<br />");
jmeno = jmeno.toLowerCase(); // karel novák
document.write(jmeno);

Výstup:

Slučování řetězců

Řetězce jsme již zkoušeli spojovat do jednoho, slouží k tomu operátor +:

let titul = "Ing.";
let jmeno = "Jan";
let prijmeni = "Novák";

let osloveni = titul + " " + jmeno + " " + prijmeni;
document.write(osloveni);

Výstup v prohlížeči:

Pro sloučení řetězců poskytuje JavaScript metodu concat(). Ta je automaticky volána, když použijeme operátor +, proto budeme tento způsob preferovat.

Metody startsWith() a endsWith()

Následujícími metodami kontrolujeme, zda řetězec začíná nebo končí určitým podřetězcem. Jako argument metody přijímají podřetězec, který se má hledat. Volitelně lze přidat druhý argument, který u metody startsWith() určuje pozici v řetězci, od níž se má začít hledat, a u metody endsWith() upřesňuje délku řetězce, ve kterém se má hledat. V případě, že metody řetězec naleznou, obě vracejí true, v opačném případě vrátí false:

let vstup = "Krokonosohroch";
document.write(vstup.startsWith("rok")); // vypíše false
document.write(vstup.startsWith("rok", 1)); // vypíše true
document.write(vstup.endsWith("hroch")); // vypíše true

Výstup:

V následujícím kvízu, Kvíz - Textové řetězce v JavaScriptu, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.

 

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