Řetězce

Textové řetězce, v programování obvykle označované jen jako řetězce, jsou jednoduše kusy textu. Možnost ukládat text je v programování samozřejmě velmi důležitá, stejně jako čísla, a JavaScript přichází s řadou pěkných funkcí, které usnadňují používání řetězců.

V mnoha programovacích jazycích existují dva datové typy pro ukládání textu: typ char pro ukládání jednoho znaku a typ string pro ukládání více znaků. Ale v JavaScriptu neexistuje typ char - typ string se používá bez ohledu na to, kolik znaků chcete uložit.

Definice řetězce

Nejprve mi dovolte ukázat, jak definovat řetězec v JavaScriptu:

let s = "Hello, world!";

Takže na rozdíl od čísla je textový řetězec uzavřen mezi dvojicí uvozovek. V tomto případě používám dvojité uvozovky, ale ve skutečnosti JavaScript umožňuje použít také jednoduché uvozovky:

let s = 'Hello, world!';

Tyto dva řetězce se při použití zobrazí přesně stejně, takže to, jaký typ uvozovek použijete, je hlavně na vás.

Řetězce jsou v podstatě pole znaků

Když je řetězec definován, můžete přistupovat ke každému jeho znaku pomocí jeho indexu, přesně jako byste pracovali s polem (o tom později) znaků. První znak má index 0, druhý index 1 a tak dále. Takže pokud chceme z našeho příkladu výše přistupovat k "w" v našem řetězci, můžeme to udělat jednoduše takto:

let s = 'Hello, world!';
alert(s[7]);

Jednoduše odkazuji na index 7 pomocí hranatých závorek, které použijeme při práci s poli později v tomto tutoriálu, abych získal znak "w" z řetězce. To také znamená, že můžete řetězec v jiných ohledech chápat jako pole, například jej projít smyčkou:

let s = 'Hello, world!';
for(let i = 0; i < 5; i++)
	alert(s[i]);

Únikové uvozovky (escape sekvence)

Když umístíte řetězec mezi sadu uvozovek, JavaScript ví, kde začíná a končí, aby se nepomíchal s aktuálním kódem. To však také znamená, že musíte věnovat zvláštní pozornost, pokud chcete uvnitř svých řetězců použít znaky uvozovek. Například, jak má JavaScript pracovat s tímto příkladem?

let s = 'Hello, world, what's up?'; // Syntax error

Odpověď je jasná: Nemůže. Bude si myslet, že řetězec končí po slově "what" kvůli jednoduché uvozovce hned za ním, ale potom zbytek bude mít za následek syntaktickou chybu. Pro situace, jako je tato, existují dvě možnosti: Můžete buď kombinovat typy uvozovek:

let s = "Hello world, what's up?";

...nebo můžete použít escape sekvenci, aby JavaScript věděl, že jednoduchá uvozovka uvnitř řetězce má být považována za součást řetězce a ne za jeho konec:

let s = 'Hello world, what\'s up?';

Všimněte si zpětného lomítka před jednoduchou uvozovkou v řetězci - tomu se říká escapování znaku, což v podstatě znamená, že mu odebereme speciální význam, který obvykle má.

Speciální znaky

Právě jsme viděli, jak můžeme escapovat uvozovku, abychom odstranili její speciální význam, předřazením zpětného lomítka. Nicméně, zpětné lomítko lze také použít v kombinaci s jinými znaky, aby jim byl přidělen speciální význam. Skvělým příkladem toho je znak nového řádku, který vloží do řetězce nový řádek:

let s = 'Hello world,\n what\'s up?';
alert(s);

Všimněte si \n uvnitř řetězce - bude převedeno na znak nového řádku, jak můžete vidět, pokud příklad spustíte. Dalším příkladem speciálního znaku je \t, který bude převeden na tabulátor (horizontální tabulaci).

V tomto okamžiku se možná ptáte: Pokud je zpětné lomítko používáno k escapování jiných znaků, jak mohu vložit skutečné zpětné lomítko do textového řetězce? No, jednoduše escapujete escape znak přidáním ještě jednoho zpětného lomítka:

let s = 'Hello world \\ what\'s up?';
alert(s);

Šablony literálů/řetězců

Můžete si myslet, že dva typy uvozovek (jednoduché a dvojité) by měly být dostatečné pro definování řetězců v JavaScriptu, ale v roce 2015, s normou ES6, byl představen třetí typ řetězců. Místo uvozovek používá zpětné apostrofy a nabízí několik skvělých možností, které se v běžných řetězcích nenajdou. Vypadá to takto:

let s = `Hello, world!`;

Šablony literálů, někdy označované jako šablonové řetězce, nejsou jen o šablonách. Mohou být rozhodně použity i pro to, jak uvidíme za chvíli, ale jsou také mnohem flexibilnější než běžné řetězce. Například umožňují psát řetězce, které se v kódu rozkládají na více řádků:

let s = `A very, very
			long, long
			string...`;
alert(s);

Ale jak uvidíte, pokud tento příklad spustíte, všechno je zde opravdu doslovné - všechny znaky jsou zahrnuty, dokonce i tabulátory a vícenásobné mezery.

Zástupné symboly

Pokračujme k důvodu, proč se jim říká šablonové literály/řetězce: Zástupné symboly. V běžném řetězci, pokud byste chtěli kombinovat statický text s obsahem proměnné, by to mohlo vypadat takto:

let w = "world";
let s = "Hello, " + w + "!";
alert(s);

Používáme jednoduché spojování řetězců k vytvoření řetězce. Ale použitím šablonových literálů místo toho můžeme kombinovat statický text s proměnnými, takto:

let w = "world";
let s = `Hello, ${w}!`;
alert(s);

Toto se také nazývá interpolace řetězců - mohu umístit zástupný symbol do řetězce pomocí notace $, a to bude automaticky nahrazeno JavaScriptem. To je zvláště užitečné, pokud máte složité řetězce s mnoha proměnnými, kde předchozí přístup (spojování řetězců) by mohl vypadat dost nepřehledně.

A nemusí to být jednoduchá proměnná - vše, co vložíte do šablonového literálu jako zástupný symbol, bude vyhodnoceno JavaScriptovým enginem. Zde je příklad, kde provádím matematiku uvnitř řetězce:

let a = 21, b = 2;
let s = `a * b = ${a * b}`;
alert(s);

Označené šablony (tagged templates)

Pro ještě složitější případy použití máme něco, co se nazývá šablonové literály s tagy (označené šablony). Jsou zde převážně k řešení velmi pokročilých šablonových úkolů, a proto většinou programátorů JavaScriptu nejsou běžně používány. Protože řeší složitý úkol, nejsou tak snadno pochopitelné jako běžné šablonové literály, takže pokud tomuto dalšímu dílu úplně nerozumíte, nebojte se toho - pokud jste v JavaScriptu nováčci. Jen tak toto nevyužijete.

Šablonové literály s tagy vám umožňují specifikovat funkci, která bude volána, když je váš řetězec interpretován, což vám dává nekonečné možnosti ve vytváření řetězců. Tuto techniku můžete použít umístěním názvu funkce přímo před váš řetězec s obrácenými apostrofy, takto:

let s = Highlight`${name} is ${age} years old`;

Když je tento řetězec interpretován, všechny prvky tohoto řetězce budou předány funkci nazvané Highlight. Když tuto funkci implementujeme, získáme úplnou kontrolu nad tím, jak bude výsledek vypadat, což nám umožňuje udělat před vrácením výsledku prakticky cokoli.

Ve svém příkladu chci přidat sadu HTML značek pro tučné písmo kolem každé z hodnot zástupných symbolů. Zde je kompletní příklad:

function Highlight(strings, ...highlights)
{
	let result = "";
	for(let i = 0; i < highlights.length; i++)
	{
		result += strings[i];
		result += "<b>" + highlights[i] + "</b>";
	}
	result += strings[strings.length - 1];
	return result;
}

let name = "John Doe";
let age = 42;

let s = Highlight`${name} is ${age} years old`;
alert(s);

Věnujte zvláštní pozornost dvěma parametrům funkce Highlight(). První z nich, nazvaný literals, bude polem všech částí předaného řetězce, které nejsou hodnotami zástupných symbolů. Pro druhý parametr, nazvaný highlights, používáme spread syntax k získání pole hodnot zástupných symbolů předaných řetězci (v tomto případě jméno a věk). Poté použiji tyto dvě pole k rekonstrukci řetězce přidáním HTML značek kolem hodnot zástupných symbolů.

Jak bylo již zmíněno, šablonové literály s tagy se používají téměř výhradně k řešení složitých šablonovacích úkolů, ale i tak jsem vám chtěl poskytnout rychlý pohled na to, jak to funguje, pro úplnost.

Shrnutí

Tento článek byl celý o tom, jak se naučit definovat řetězec a různé způsoby, jak to v JavaScriptu udělat. Dalším krokem je naučit se, jak s nimi pracovat a manipulovat s nimi, a naštěstí pro nás, JavaScript přichází s vestavěným objektem String, který nám nabízí spoustu funkcionalit právě pro to.