Řetězec

V tomto tutoriálu jsme již diskutovali o primitivním typu řetězce v JavaScriptu, ale také jsme hovořili o tom, že na vrcholu primitivního typu máme složitější objekt String. Můžete vytvořit řetězec instancováním objektu String, ale není to nutné - stále můžete přistupovat k metodám nalezeným na objektu String na primitivním řetězci, protože JavaScript automaticky obalí primitivní řetězec jako objekt String, pokud je to potřeba.

S tím na paměti se pojďme podívat na některé z nejzajímavějších vlastností a metod, které jsou k nalezení na objektu String.

Vlastnosti String

string.length

Pomocí vlastnosti délky můžete vidět, jak dlouhý je řetězec, takto:

let s = "Hello, world!";
alert(s.length);

Buďte si vědomi, že pokud řetězec obsahuje složité unicode znaky, jako jsou emotikony nebo neobvyklé čínské symboly, nemusí to být přesné. Nicméně pro všechny běžné případy použití bude vlastnost délky přesná a řekne vám, kolik znaků váš řetězec obsahuje.

Metody String

Objekt String obsahuje mnoho užitečných metod a zde probereme ty nejzajímavější. Pro úplný seznam se podívejte na referenci objektu String.

string.at()

Použijte metodu at() na řetězci k získání jednoho znaku z konkrétní pozice v řetězci. Přijímá jeden parametr: index hledaného znaku. Pokud je index kladný, bude to index počítaný od začátku řetězce (začínající od 0). Pokud je index záporný, bude počítán zpětně od konce řetězce. Zde je pár příkladů:

let s = "Hello, world!";
alert(s.at(7)); // w
alert(s.at(-1)); // !

Velmi jednoduché na použití, ale získáte jen jediný znak. Pokud potřebujete větší část řetězce, měli byste se podívat na metodu slice(), jak je popsáno níže.

string.endsWith() / string.startsWith()

Pomocí metody endsWith() můžete specifikovat hledaný řetězec a zjistit, zda váš řetězec tímto hledaným řetězcem končí. Samozřejmě metoda startsWith() dělá přesně to samé, ale dívá se na začátek řetězce místo na konec. Zde je pár příkladů:

let s = "Hello, world!";
alert(s.endsWith("!")); // true
alert(s.endsWith("world!")); // true
alert(s.startsWith("h")); // false (wrong case)
alert(s.startsWith("H")); // true

Jak vidíte, mohu specifikovat jediný znak nebo celý řetězec, který hledám. Také si všimnete, že metoda rozlišuje velká a malá písmena.

string.includes()

Metoda includes() vám umožní rychle testovat, zda je řetězec obsažen v jiném řetězci. Metoda rozlišuje velká a malá písmena a lze ji použít s parametry řetězce různé délky, jak můžete vidět z tohoto příkladu:

let s = "Hello, world!";

alert(s.includes("world")); // true
alert(s.includes("World")); // false (wrong case)
alert(s.includes(",")); // true

string.indexOf()

Metoda indexOf() také hledá řetězec v jiném řetězci, ale místo toho, aby vracela pouze true nebo false, jako metoda includes(), vrátí místo toho pozici podřetězce. Pokud řetězec není nalezen, vrátí místo toho -1. Tato metoda také rozlišuje velká a malá písmena:

let s = "Hello, world!";

alert(s.indexOf("H")); // 0
alert(s.indexOf(",")); // 5
alert(s.indexOf("world")); // 7
alert(s.indexOf("World")); // -1 (wrong case)

Buďte si vědomi, že bude vrácena pouze pozice prvního výskytu, což platí i pro metodu includes(). Metoda však přijímá druhý, volitelný parametr, který vám umožňuje specifikovat počáteční pozici pro vykonání hledání. Toto můžeme využít k objevení všech výskytů podřetězce, pokud je to potřeba:

let s = "Hello, world, how are you, today?";
let pos = s.indexOf(",");
while(pos >= 0)
{
	alert("A comma found at position " + pos);
	pos = s.indexOf(",", pos + 1);		
}

V tomto příkladu chci najít všechny výskyty čárky. Začínám tedy nalezením první pozice a poté používám while smyčku, abych pokračoval v iteraci skrz řetězec, přičemž pokaždé aktualizuji proměnnou pozice a nechám další hledání začít po předchozí pozici.

string.lastIndexOf()

Metoda lastIndexOf() funguje stejně jako indexOf(), ale jak název napovídá, vrátí pozici posledního výskytu hledaného řetězce namísto prvního:

let s = "Hello, world, how are you, today?";
alert(s.lastIndexOf(",")); // 25

string.replace() / string.replaceAll()

Metody replace() a replaceAll() jsou velmi užitečné! Přijímají dva parametry: hledaný řetězec a řetězec pro nahrazení. Umožní vám snadno nahradit jeden řetězec jiným, například takto:

let s = "Hello, world - what a crazy world indeed!";


alert(s.replace("world", "universe"));
// Result: Hello, universe - what a crazy world indeed!

alert(s.replaceAll("world", "universe"));
// Result: Hello, universe - what a crazy universe indeed!

Jak vidíte, metoda replace() nahradí pouze první výskyt hledaného řetězce, zatímco metoda replaceAll() se postará o všechny výskyty.

Buďte si vědomi, že vyhledávání rozlišuje velká a malá písmena. Pokud chcete provést vyhledávání/nahrazení bez rozlišení velkých a malých písmen, musíme použít regulární výrazy - o tom budeme mluvit mnohem více v pozdější kapitole, kde se podíváme na všechny pokročilé možnosti, které získáte s regulárními výrazy.

string.slice()

Metoda slice() v zásadě dosáhne toho samého jako metoda substring() a zastaralá metoda substr(): poskytne vám část řetězce na základě indexu (indexů), které zadáte. Přijímá alespoň jeden parametr, který se používá k určení, od kterého indexu chcete začít extrahovat podřetězec. Můžete specifikovat druhý parametr, který bude fungovat jako (nezačleněná) koncová pozice. Pokud zadáte pouze jeden parametr, bude zahrnut i zbytek řetězce.

Doufám, že to vše bude jasnější, jakmile si prohlédnete tento příklad:

let s = "Hello, world, how are you, today?";
alert(s.slice(0, 5)); 	// Hello
alert(s.slice(7, 12)); 	// world
alert(s.slice(14)); 	// how are you, today?

Tato metoda funguje také se zápornými indexy. Pokud je použita záporná pozice, bude se počítat zpětně od konce řetězce namísto dopředu od začátku řetězce:

let s = "Hello, world, how are you, today?";
alert(s.slice(-6)); 	// today?
alert(s.slice(-6, -1)); // today

Tato metoda je často používána ve spojení s metodami indexOf()/lastIndexOf(), aby se vyhledala a extrahovala část řetězce, například takto:

let s = "Hello, world, how are you, today?";
let startPos = s.indexOf("how");
let endPos = s.lastIndexOf(",");
alert(s.slice(startPos, endPos)); 	// how are you

string.substring()

Metoda substring() dosáhne toho samého jako metoda slice(), přičemž metoda slice() je novějším přídavkem do jazyka a proto je často preferovanou metodou pro extrakci části řetězce. Mezi těmito dvěma metodami je však malý rozdíl, a i když to často není relevantní, chci, abyste o tom věděli:

Pokud těmto metodám předáte počáteční a koncový index a koncový index je větší než počáteční index, dostanete odlišné chování: metoda slice() jednoduše nic nevrátí, zatímco metoda substring() prohodí oba argumenty a poté vrátí výsledný řetězec. Zde je příklad ukazující rozdíl:

let s = "Hello, world, how are you, today?";
alert(s.slice(12, 7)); 	// "" (empty string)
alert(s.substring(12, 7)); // world

Chování, které zde vidíte u metody substring(), je příkladem starého přístupu JavaScriptu, kde by jazyk vždy snažil vytvořit výsledek, i když jste mu dali vstup/parametry, které nedávaly smysl. Metoda slice() toto chování odstraňuje a může být proto považována za trochu "čistší". Nicméně ve skutečném světě skutečný rozdíl nepocítíte, ale doporučuji používat metodu slice() místo metody substring(), protože vám to alespoň ušetří několik stisků kláves pokaždé, když ji použijete.

string.toLowerCase() / string.toUpperCase()

Tyto dvě metody udělají přesně to, co byste od nich na základě jejich názvů očekávali: Změní velikost písmen řetězce buď na malá, nebo VELKÁ PÍSMENA. Zde je příklad:

let s = "Hello, World!";
alert(s.toLowerCase()); // hello, world!
alert(s.toUpperCase()); // HELLO, WORLD!

string.trim() / string.trimStart() / string.trimEnd()

Ořezávání řetězce v JavaScriptu se týká odstranění jakéhokoli potenciálního bílého místa ze začátku nebo konce řetězce, nebo z obou konců, v závislosti na tom, kterou z metod trim*() zavoláte:

let s = "   Hello, World!   ";
alert(s.trimStart()); 	// "Hello, World!   "
alert(s.trimEnd()); 	// "   Hello, World!"
alert(s.trim()); 		// "Hello, World!"

Docela jednoduché, ale velmi užitečné - rychle se ocitnete v situaci, kdy musíte zajistit, že na konci (koncích) vašeho řetězce nejsou žádná nadměrná prázdná místa.

Shrnutí

Jak vidíte, vestavěný objekt String má celou řadu užitečných metod. Prošli jsme většinou z nich, ale některé jsem vynechal, většinou proto, že byly příliš triviální nebo nejasné.

Také jsem vynechal některé metody související s regulárními výrazy, protože jsem věnoval celou kapitolu všemu, co souvisí s regulárními výrazy. Přečtěte si tuto kapitolu později, pokud chcete vědět více o pokročilých operacích vyhledávání/nahrazování v řetězcích.