Lekce 4 - Textové řetězce v JavaScriptu

V předchozím kvízu, Kvíz - Úvod, konzole a proměnné v JavaScriptu, jsme si ověřili nabyté zkušenosti z předchozích lekcí.

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, případně tzv. tupým přízvukem. Při deklaraci textových řetězců tak můžeme snadno pracovat s různými formáty, včetně řetězců obsahujících uvozovky. 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 není přesně specifikována.

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ě!`;

Jednoduché uvozovky

Jednoduché uvozovky ' (apostrof) napíšeme pomocí klávesy Shift a následující klávesy:

Dvojité uvozovky

Dvojité uvozovky " se napíšou 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í.

Tupý přízvuk

Tupý přízvuk 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 a naopak:

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:

Escapování a speciální znaky

Pokud je potřeba zapsat v řetězci stejnou uvozovku, v nichž je řetězec již zapsaný, musí se uvozovka takzvaně escapovat. Tím docílíme toho, že ji interpret 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:

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 je jejich seznam:

• \b – backspace,
• \f – přeskočení na další "stránku",
• \n – nový řádek,
• \r – carriage return (někdy jako součást odřádkování),
• \t – horizontální tabulátor,
• \v – vertikální tabulátor,
• \\ – zpětné lomítko,
• \0 – nulový znak (také používaný pro ukončení řetězce).

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 indikovat nový řádek v textovém prostředí nebo v konzoli. V HTML odřádkujeme pomocí <br />. Pokud bychom v kódu použili odřádkování pomocí \n, prohlížeč ho nezobrazí.

Interpolace řetězců

Na výpis textových řetězců můžeme použít tupý přízvuk (`) namísto uvozovek, což nám umožní tzv. interpolaci, tedy vložit proměnné přímo do řetězce. Použijeme znak dolaru ($) a složené závorky ({}), do kterých zapíšeme proměnnou.

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

Složené závorky se na české klávesnici napíšou pomocí pravého ALT a písmene B či N:

Díky těmto speciálním znakům můžeme 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:

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 to udělat pomocí \n:

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

Operace s řetězci

Nyní si představíme základní metody pro práci s textovými řetězci. Začneme vlastností length, která v sobě nese informaci o délce řetězce.

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 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()

Rozlišování velkých a malých písmen může být někdy na obtíž. 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 můžeme spojovat několika způsoby. Nejčastěji použijeme 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š.