Struny

V JavaScriptu jsou textová data uložena jako řetězce. Neexistuje žádný samostatný typ pro jeden znak.

Interní formát řetězců je vždy UTF-16, není vázán na kódování stránky.

Citace

Připomeňme si druhy citátů.

Řetězce mohou být uzavřeny buď do jednoduchých, dvojitých nebo zpětných uvozovek:

let single = 'single-quoted';
let double = "double-quoted";

let backticks = `backticks`;

Jednoduché a dvojité uvozovky jsou v podstatě stejné. Backticks nám však umožňují vložit jakýkoli výraz do řetězce jeho zabalením do ${…} :

function sum(a, b) {
 return a + b;
}

alert(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3.

Další výhodou použití zpětných značek je to, že umožňují řetězci překlenout více řádků:

let guestList = `Guests:
 * John
 * Pete
 * Mary
`;

alert(guestList); // a list of guests, multiple lines

Vypadá přirozeně, že? Jednoduché nebo dvojité uvozovky však tímto způsobem nefungují.

Pokud je použijeme a pokusíme se použít více řádků, dojde k chybě:

let guestList = "Guests: // Error: Unexpected token ILLEGAL
 * John";

Jednoduché a dvojité uvozovky pocházejí z dávných dob tvorby jazyka, kdy se s potřebou víceřádkových řetězců nepočítalo. Backticks se objevily mnohem později, a proto jsou všestrannější.

Backtick nám také umožňují specifikovat „funkci šablony“ před prvním backtickem. Syntaxe je:func`string` . Funkce func je volán automaticky, přijímá řetězec a vložené výrazy a dokáže je zpracovat. Toto se nazývá „tagované šablony“. Tato funkce usnadňuje implementaci vlastních šablon, ale v praxi se používá jen zřídka. Více si o tom můžete přečíst v manuálu.

Speciální znaky

Stále je možné vytvářet víceřádkové řetězce s jednoduchými a dvojitými uvozovkami pomocí takzvaného „znaku nového řádku“, zapsaného jako \n , což označuje zalomení řádku:

let guestList = "Guests:\n * John\n * Pete\n * Mary";

alert(guestList); // a multiline list of guests

Například tyto dva řádky jsou stejné, jen jsou jinak napsané:

let str1 = "Hello\nWorld"; // two lines using a "newline symbol"

// two lines using a normal newline and backticks
let str2 = `Hello
World`;

alert(str1 == str2); // true

Existují další, méně obvyklé „zvláštní“ znaky.

Zde je úplný seznam:

Příklady s Unicode:

alert( "\u00A9" ); // ©
alert( "\u{20331}" ); // 佫, a rare Chinese hieroglyph (long Unicode)
alert( "\u{1F60D}" ); // 😍, a smiling face symbol (another long Unicode)

Všechny speciální znaky začínají zpětným lomítkem \ . Nazývá se také „únikový znak“.

Můžeme jej také použít, pokud bychom chtěli do řetězce vložit citaci.

Například:

alert( 'I\'m the Walrus!' ); // I'm the Walrus!

Jak vidíte, vnitřní uvozovku musíme předřadit zpětným lomítkem \' , protože jinak by označoval konec řetězce.

Samozřejmě je třeba escapovat pouze uvozovky, které jsou stejné jako ty přiložené. Takže jako elegantnější řešení bychom mohli místo toho přejít na dvojité uvozovky nebo zpětné zaškrtnutí:

alert( `I'm the Walrus!` ); // I'm the Walrus!

Všimněte si, že zpětné lomítko \ slouží ke správnému načtení řetězce JavaScriptem, poté zmizí. Řetězec v paměti nemá \ . Jasně to vidíte v alert z výše uvedených příkladů.

Ale co když potřebujeme ukázat skutečné zpětné lomítko \ v řetězci?

To je možné, ale musíme to zdvojnásobit jako \\ :

alert( `The backslash: \\` ); // The backslash: \

Délka řetězce

length vlastnost má délku řetězce:

alert( `My\n`.length ); // 3

Všimněte si, že \n je jeden „speciální“ znak, takže délka je skutečně 3 .

Lidé se zkušenostmi v některých jiných jazycích někdy chybně zadají voláním str.length() místo pouze str.length . To nefunguje.

Vezměte prosím na vědomí, že str.length je číselná vlastnost, nikoli funkce. Není třeba za ním přidávat závorky.

Přístup ke znakům

Chcete-li získat znak na pozici pos , použijte hranaté závorky [pos] nebo zavolejte metodu str.charAt(pos). První znak začíná od nulové pozice:

let str = `Hello`;

// the first character
alert( str[0] ); // H
alert( str.charAt(0) ); // H

// the last character
alert( str[str.length - 1] ); // o

Hranaté závorky představují moderní způsob získání znaku, zatímco charAt existuje většinou z historických důvodů.

Jediný rozdíl mezi nimi je, že pokud není nalezen žádný znak, [] vrátí undefined a charAt vrátí prázdný řetězec:

let str = `Hello`;

alert( str[1000] ); // undefined
alert( str.charAt(1000) ); // '' (an empty string)

Můžeme také iterovat znaky pomocí for..of :

for (let char of "Hello") {
 alert(char); // H,e,l,l,o (char becomes "H", then "e", then "l" etc)
}

Řetězce jsou neměnné

Řetězce nelze v JavaScriptu měnit. Je nemožné změnit postavu.

Zkusme to ukázat, že to nefunguje:

let str = 'Hi';

str[0] = 'h'; // error
alert( str[0] ); // doesn't work

Obvyklým řešením je vytvořit celý nový řetězec a přiřadit jej k str místo toho starého.

Například:

let str = 'Hi';

str = 'h' + str[1]; // replace the string

alert( str ); // hi

V následujících částech uvidíme další příklady.

Změna velikosti písmen

Metody toLowerCase() a toUpperCase() mění velikost písmen:

alert( 'Interface'.toUpperCase() ); // INTERFACE
alert( 'Interface'.toLowerCase() ); // interface

Nebo, pokud chceme, aby jeden znak byl malými písmeny:

alert( 'Interface'[0].toLowerCase() ); // 'i'

Hledání podřetězce

Existuje několik způsobů, jak hledat podřetězec v řetězci.

str.indexOf

První metoda je str.indexOf(substr, pos).

Hledá substr v str , počínaje zadanou pozicí pos a vrátí pozici, kde byla nalezena shoda, nebo -1 pokud nelze nic najít.

Například:

let str = 'Widget with id';

alert( str.indexOf('Widget') ); // 0, because 'Widget' is found at the beginning
alert( str.indexOf('widget') ); // -1, not found, the search is case-sensitive

alert( str.indexOf("id") ); // 1, "id" is found at the position 1 (..idget with id)

Nepovinný druhý parametr nám umožňuje začít hledat z dané pozice.

Například první výskyt "id" je na pozici 1 . Chcete-li vyhledat další výskyt, začněte hledat od pozice 2 :

let str = 'Widget with id';

alert( str.indexOf('id', 2) ) // 12

Pokud nás zajímají všechny výskyty, můžeme spustit indexOf ve smyčce. Každý nový hovor je proveden s pozicí po předchozí shodě:

let str = 'As sly as a fox, as strong as an ox';

let target = 'as'; // let's look for it

let pos = 0;
while (true) {
 let foundPos = str.indexOf(target, pos);
 if (foundPos == -1) break;

 alert( `Found at ${foundPos}` );
 pos = foundPos + 1; // continue the search from the next position
}

Stejný algoritmus může být rozvržen kratší:

let str = "As sly as a fox, as strong as an ox";
let target = "as";

let pos = -1;
while ((pos = str.indexOf(target, pos + 1)) != -1) {
 alert( pos );
}

Existuje také podobná metoda str.lastIndexOf(substr, pozice), která hledá od konce řetězce k jeho začátku.

Uvádí výskyty v opačném pořadí.

S indexOf došlo k mírné nepříjemnosti v if test. Nemůžeme to vložit do if takhle:

let str = "Widget with id";

if (str.indexOf("Widget")) {
 alert("We found it"); // doesn't work!
}

alert ve výše uvedeném příkladu se nezobrazuje, protože str.indexOf("Widget") vrátí 0 (to znamená, že našla shodu na výchozí pozici). Správně, ale if považuje 0 být false .

Takže bychom měli skutečně zkontrolovat -1 , takto:

let str = "Widget with id";

if (str.indexOf("Widget") != -1) {
 alert("We found it"); // works now!
}

Bitový trik NOT

Jeden ze starých triků, které se zde používají, je bitové NOT ~ operátor. Převede číslo na 32bitové celé číslo (odstraní desetinnou část, pokud existuje) a poté obrátí všechny bity v binární reprezentaci.

V praxi to znamená jednoduchou věc:pro 32bitová celá čísla ~n rovná se -(n+1) .

Například:

alert( ~2 ); // -3, the same as -(2+1)
alert( ~1 ); // -2, the same as -(1+1)
alert( ~0 ); // -1, the same as -(0+1)
alert( ~-1 ); // 0, the same as -(-1+1)

Jak vidíme, ~n je nula pouze v případě, že n == -1 (to platí pro jakékoli 32bitové celé číslo se znaménkem n ).

Takže test if ( ~str.indexOf("...") ) je pravdivý pouze v případě, že výsledek indexOf není -1 . Jinými slovy, když dojde ke shodě.

Lidé jej používají ke zkrácení indexOf kontroluje:

let str = "Widget";

if (~str.indexOf("Widget")) {
 alert( 'Found it!' ); // works
}

Obvykle se nedoporučuje používat jazykové funkce nezřejmým způsobem, ale tento konkrétní trik je široce používán ve starém kódu, takže bychom mu měli rozumět.

Pamatujte:if (~str.indexOf(...)) zní jako „pokud bylo nalezeno“.

Abychom byli přesní, velká čísla jsou zkrácena na 32 bitů pomocí ~ existují další čísla, která dávají 0 , nejmenší je ~4294967295=0 . Díky tomu je taková kontrola správná pouze v případě, že řetězec není tak dlouhý.

Právě teď můžeme tento trik vidět pouze ve starém kódu, protože moderní JavaScript poskytuje .includes metoda (viz níže).

zahrnuje, začínáS, končíS

Modernější metoda str.includes(substr, pos) vrací true/false podle toho, zda str obsahuje substr uvnitř.

Je to správná volba, pokud potřebujeme otestovat zápas, ale nepotřebujeme jeho pozici:

alert( "Widget with id".includes("Widget") ); // true

alert( "Hello".includes("Bye") ); // false

Volitelný druhý argument str.includes je pozice, ze které se má začít hledat:

alert( "Widget".includes("id") ); // true
alert( "Widget".includes("id", 3) ); // false, from position 3 there is no "id"

Metody str.startsWith a str.endsWith dělají přesně to, co říkají:

alert( "Widget".startsWith("Wid") ); // true, "Widget" starts with "Wid"
alert( "Widget".endsWith("get") ); // true, "Widget" ends with "get"

Získání podřetězce

V JavaScriptu existují 3 způsoby, jak získat podřetězec:substring , substr a slice .

str.slice(start [, end])

Vrátí část řetězce z start na (ale ne včetně) end .

Například:

let str = "stringify";
alert( str.slice(0, 5) ); // 'strin', the substring from 0 to 5 (not including 5)
alert( str.slice(0, 1) ); // 's', from 0 to 1, but not including 1, so only character at 0

Pokud neexistuje žádný druhý argument, pak slice jde až na konec řetězce:

let str = "stringify";
alert( str.slice(2) ); // 'ringify', from the 2nd position till the end

Záporné hodnoty pro start/end jsou také možné. Znamená to, že pozice se počítá od konce řetězce:

let str = "stringify";

// start at the 4th position from the right, end at the 1st from the right
alert( str.slice(-4, -1) ); // 'gif'

str.substring(start [, end])

Vrátí část řetězce mezi start a end .

To je téměř stejné jako slice , ale umožňuje start být větší než end .

Například:

let str = "stringify";

// these are same for substring
alert( str.substring(2, 6) ); // "ring"
alert( str.substring(6, 2) ); // "ring"

// ...but not for slice:
alert( str.slice(2, 6) ); // "ring" (the same)
alert( str.slice(6, 2) ); // "" (an empty string)

Záporné argumenty nejsou (na rozdíl od řezu) podporovány, jsou považovány za 0 .

str.substr(start [, length])

Vrátí část řetězce z start , s daným length .

Na rozdíl od předchozích metod nám tato umožňuje zadat length místo koncové pozice:

let str = "stringify";
alert( str.substr(2, 4) ); // 'ring', from the 2nd position get 4 characters

První argument může být záporný, abychom počítali od konce:

let str = "stringify";
alert( str.substr(-4, 2) ); // 'gi', from the 4th position get 2 characters

Tato metoda je uvedena v příloze B jazykové specifikace. To znamená, že by jej měly podporovat pouze Javascriptové motory hostované v prohlížeči a nedoporučujeme jej používat. V praxi je podporován všude.

Pojďme si tyto metody zrekapitulovat, abychom se vyhnuli nejasnostem:

Všichni tu práci zvládnou. Formálně substr má menší nevýhodu:není popsána v základní specifikaci JavaScriptu, ale v příloze B, která pokrývá funkce pouze prohlížeče, které existují hlavně z historických důvodů. Neprohlížečová prostředí jej tedy nemusí podporovat. Ale v praxi to funguje všude.

Z dalších dvou variant slice je o něco flexibilnější, umožňuje negativní argumenty a kratší psaní. Stačí si tedy zapamatovat pouze slice z těchto tří metod.

Porovnání řetězců

Jak víme z kapitoly Porovnání, řetězce se porovnávají znak po znaku v abecedním pořadí.

I když existují určité zvláštnosti.

1. Malé písmeno je vždy větší než velké:

   alert( 'a' > 'Z' ); // true

2. Písmena s diakritickými znaménky jsou „mimo pořadí“:

   alert( 'Österreich' > 'Zealand' ); // true

   To může vést k podivným výsledkům, pokud tyto názvy zemí seřadíme. Lidé by obvykle očekávali Zealand až po Österreich v seznamu.

Abychom pochopili, co se stane, podívejme se na interní reprezentaci řetězců v JavaScriptu.

Všechny řetězce jsou kódovány pomocí UTF-16. To znamená:každý znak má odpovídající číselný kód. Existují speciální metody, které umožňují získat znak pro kód a zpět.

str.codePointAt(pos)

Vrátí kód pro znak na pozici pos :

// different case letters have different codes
alert( "z".codePointAt(0) ); // 122
alert( "Z".codePointAt(0) ); // 90

String.fromCodePoint(code)

Vytvoří znak podle jeho číselné hodnoty code

alert( String.fromCodePoint(90) ); // Z

Můžeme také přidat znaky Unicode podle jejich kódů pomocí \u následovaný hexadecimálním kódem:

// 90 is 5a in hexadecimal system
alert( '\u005a' ); // Z

Nyní se podívejme na znaky s kódy 65..220 (latinská abeceda a něco navíc) vytvořením řetězce z nich:

let str = '';

for (let i = 65; i <= 220; i++) {
 str += String.fromCodePoint(i);
}
alert( str );
// ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~€‚ƒ„
// ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜ

Vidět? První jsou velká písmena, potom několik speciálních, poté malá písmena a Ö blízko konce výstupu.

Nyní je zřejmé, proč a > Z .

Znaky se porovnávají podle jejich číselného kódu. Větší kód znamená, že znak je větší. Kód pro a (97) je větší než kód pro Z (90).

• Všechna malá písmena následují za velkými písmeny, protože jejich kódy jsou větší.
• Některá písmena jako Ö stojí mimo hlavní abecedu. Zde je jeho kód větší než cokoli z a na z .

Správná srovnání

„Správný“ algoritmus pro porovnávání řetězců je složitější, než se může zdát, protože abecedy se v různých jazycích liší.

Prohlížeč tedy potřebuje znát jazyk, aby mohl porovnávat.

Naštěstí všechny moderní prohlížeče (IE10 – vyžaduje další knihovnu Intl.js) podporují internacionalizační standard ECMA-402.

Poskytuje speciální metodu pro porovnání řetězců v různých jazycích podle jejich pravidel.

Volání str.localeCompare(str2) vrací celé číslo označující, zda str je menší, roven nebo větší než str2 podle jazykových pravidel:

• Pokud str, vrátí záporné číslo je menší než str2 .
• Vrátí kladné číslo, pokud str je větší než str2 .
• Vrátí 0 pokud jsou rovnocenné.

Například:

alert( 'Österreich'.localeCompare('Zealand') ); // -1

Tato metoda má ve skutečnosti dva další argumenty specifikované v dokumentaci, což jí umožňuje specifikovat jazyk (ve výchozím nastavení převzato z prostředí, pořadí písmen závisí na jazyku) a nastavit další pravidla, jako je rozlišování malých a velkých písmen nebo by "a" a "á" být považováno za stejné atd.

Interní prvky, Unicode

Sekce jde hlouběji do vnitřností strun. Tyto znalosti se vám budou hodit, pokud se plánujete vypořádat s emotikony, vzácnými matematickými nebo hieroglyfickými znaky nebo jinými vzácnými symboly.

Pokud je neplánujete podporovat, můžete tuto sekci přeskočit.

Náhradní páry

Všechny často používané znaky mají 2bajtové kódy. Písmena ve většině evropských jazyků, čísla a dokonce i většina hieroglyfů mají 2bajtové zastoupení.

Ale 2 bajty umožňují pouze 65536 kombinací a to nestačí pro každý možný symbol. Vzácné symboly jsou tedy kódovány dvojicí dvoubajtových znaků nazývaných „náhradní pár“.

Délka těchto symbolů je 2 :

alert( '𝒳'.length ); // 2, MATHEMATICAL SCRIPT CAPITAL X
alert( '😂'.length ); // 2, FACE WITH TEARS OF JOY
alert( '𩷶'.length ); // 2, a rare Chinese hieroglyph

Všimněte si, že náhradní páry v době, kdy byl vytvořen JavaScript, neexistovaly, a proto nejsou jazykem správně zpracovány!

Ve skutečnosti máme v každém z výše uvedených řetězců jeden symbol, ale length zobrazuje délku 2 .

String.fromCodePoint a str.codePointAt je několik vzácných metod, které se zabývají náhradními páry správně. Nedávno se objevily v jazyce. Před nimi existovaly pouze String.fromCharCode a str.charCodeAt. Tyto metody jsou ve skutečnosti stejné jako fromCodePoint/codePointAt , ale nepracujte s náhradními páry.

Získání symbolu může být složité, protože náhradní páry jsou považovány za dva znaky:

alert( '𝒳'[0] ); // strange symbols...
alert( '𝒳'[1] ); // ...pieces of the surrogate pair

Všimněte si, že kusy náhradního páru nemají jeden bez druhého žádný význam. Takže výstrahy ve výše uvedeném příkladu ve skutečnosti zobrazují odpad.

Technicky jsou zástupné páry také zjistitelné podle jejich kódů:pokud znak má kód v intervalu 0xd800..0xdbff , pak je to první část náhradního páru. Další znak (druhá část) musí mít kód v intervalu 0xdc00..0xdfff . Tyto intervaly jsou standardem vyhrazeny výhradně pro náhradní páry.

Ve výše uvedeném případě:

// charCodeAt is not surrogate-pair aware, so it gives codes for parts

alert( '𝒳'.charCodeAt(0).toString(16) ); // d835, between 0xd800 and 0xdbff
alert( '𝒳'.charCodeAt(1).toString(16) ); // dcb3, between 0xdc00 and 0xdfff

Další způsoby, jak se vypořádat s náhradními páry, najdete později v kapitole Opakovatelné. Pravděpodobně existují speciální knihovny i pro to, ale není zde nic tak slavného, ​​co by se dalo navrhnout.

Diakritická znaménka a normalizace

V mnoha jazycích existují symboly, které se skládají ze základního znaku se značkou nad/pod ním.

Například písmeno a může být základní znak pro:àáâäãåā . Nejběžnější „složené“ znaky mají svůj vlastní kód v tabulce UTF-16. Ale ne všechny, protože existuje příliš mnoho možných kombinací.

Pro podporu libovolných kompozic nám UTF-16 umožňuje používat několik znaků Unicode:základní znak následovaný jedním nebo více znaky „označení“, které jej „zdobí“.

Například, pokud máme S následovaný speciálním znakem „tečka nad“ (kód \u0307 ), zobrazí se jako Ṡ.

alert( 'S\u0307' ); // Ṡ

Pokud potřebujeme další značku nad písmenem (nebo pod ním) – žádný problém, stačí přidat potřebný znak značky.

Pokud například připojíme znak „tečka pod“ (kód \u0323 ), pak budeme mít „S s tečkami nad a pod“:Ṩ .

Například:

alert( 'S\u0307\u0323' ); // Ṩ

To poskytuje velkou flexibilitu, ale také zajímavý problém:dvě postavy mohou vizuálně vypadat stejně, ale být reprezentovány různými kompozicemi Unicode.

Například:

let s1 = 'S\u0307\u0323'; // Ṩ, S + dot above + dot below
let s2 = 'S\u0323\u0307'; // Ṩ, S + dot below + dot above

alert( `s1: ${s1}, s2: ${s2}` );

alert( s1 == s2 ); // false though the characters look identical (?!)

K vyřešení tohoto problému existuje algoritmus „Unicode normalizace“, který převádí každý řetězec do jednoho „normálního“ tvaru.

Je implementován pomocí str.normalize().

alert( "S\u0307\u0323".normalize() == "S\u0323\u0307".normalize() ); // true

Je legrační, že v naší situaci normalize() ve skutečnosti spojuje sekvenci 3 znaků do jednoho:\u1e68 (S se dvěma tečkami).

alert( "S\u0307\u0323".normalize().length ); // 1

alert( "S\u0307\u0323".normalize() == "\u1e68" ); // true

Ve skutečnosti tomu tak vždy není. Důvodem je, že symbol Ṩ je „dostatečně běžné“, takže jej tvůrci UTF-16 zahrnuli do hlavní tabulky a dali mu kód.

Pokud se chcete dozvědět více o normalizačních pravidlech a variantách – jsou popsány v příloze standardu Unicode:Unicode Normalization Forms, ale pro většinu praktických účelů stačí informace z této sekce.

Shrnutí

• Existují 3 typy uvozovek. Backticks umožňují, aby řetězec zahrnoval více řádků a vložil výrazy ${…} .
• Řetězce v JavaScriptu jsou kódovány pomocí UTF-16.
• Můžeme použít speciální znaky jako \n a vložte písmena podle jejich Unicode pomocí \u... .
• Chcete-li získat znak, použijte:[] .
• Chcete-li získat podřetězec, použijte:slice nebo substring .
• Pro malá/velká písmena v řetězci použijte:toLowerCase/toUpperCase .
• Chcete-li vyhledat podřetězec, použijte:indexOf nebo includes/startsWith/endsWith pro jednoduché kontroly.
• Chcete-li porovnat řetězce podle jazyka, použijte:localeCompare , jinak se porovnávají podle kódů znaků.

V řetězcích je několik dalších užitečných metod:

• str.trim() – odstraní („ořízne“) mezery ze začátku a konce řetězce.
• str.repeat(n) – opakuje řetězec n krát.
• …a další naleznete v příručce.

Řetězce mají také metody pro vyhledávání/nahrazování regulárními výrazy. Ale to je velké téma, takže je vysvětleno v samostatné výukové sekci Regulární výrazy.