Stringi i template literals w JavaScript

Trzy sposoby zapisu stringa

JavaScript daje ci trzy ograniczniki stringów. Dwa są wymienne, trzeci potrafi więcej.

const single = 'hello';
const double = "hello";
const backtick = `hello`;

console.log(single === double, double === backtick);

Apostrofy i cudzysłowy dają identyczne stringi: wybierz jeden styl i się go trzymaj (większość nowoczesnych projektów domyślnie używa apostrofów albo zostawia decyzję formaterowi). Backticki tworzą template literal i tu robi się ciekawie: pozwalają na interpolację i obejmują wiele linii.

Pod spodem wszystkie trzy tworzą ten sam prymitywny typ string. Ogranicznik to tylko kwestia składni.

Sekwencje ucieczki i cudzysłowy w środku

Wewnątrz stringa ukośnik wsteczny zaczyna sekwencję ucieczki. Najczęstsze to \n (nowa linia), \t (tabulator), \\ (dosłowny ukośnik wsteczny) oraz \" / \' do wstawienia tego samego cudzysłowu, którym string otwarto:

const quote = "She said \"hi\" and left.";
const path = "C:\\Users\\Rosa";
const lines = "first\nsecond\nthird";

console.log(quote);
console.log(path);
console.log(lines);

Większości znaków ucieczki unikniesz, wybierając drugi rodzaj cudzysłowu: 'She said "hi" and left.' nie potrzebuje żadnego ukośnika. Pragmatyzm ponad dogmaty.

Template literals: supermoc backticków

Template literal robi dwie rzeczy, których nie potrafią zwykłe stringi. Po pierwsze, interpoluje wyrażenia przez ${...}:

const name = "Ada";
const age = 36;

const greeting = `Hello, ${name}. You are ${age} years old.`;
console.log(greeting);

Wszystko wewnątrz ${...} to wyrażenie JavaScript, a nie tylko nazwa zmiennej. Arytmetyka, wywołania funkcji, operatory trójargumentowe, a nawet inne template literals, wszystko wolno:

const price = 19.99;
const qty = 3;
const user = { name: "rosa" };

console.log(`Total: $${(price * qty).toFixed(2)}`);
console.log(`Hi, ${user.name.toUpperCase()}!`);
console.log(`Status: ${qty > 0 ? "in stock" : "sold out"}`);

Po drugie, template literals obejmują wiele linii bez \n:

const message = `Dear customer,

Your order has shipped.
Expect delivery in 3-5 days.

Thanks.`;

console.log(message);

Znaki nowej linii w kodzie źródłowym stają się znakami nowej linii w stringu. Przy wszystkim, co jest dłuższe od krótkiej etykiety, backticki to prawie zawsze dobry wybór.

Interpolacja wygrywa z konkatenacją

Zanim pojawiły się template literals, jedynym sposobem na zbudowanie dynamicznego stringa był operator +:

const name = "Ada";
const age = 36;

const old = "Hello, " + name + ". You are " + age + " years old.";
const modern = `Hello, ${name}. You are ${age} years old.`;

console.log(old);
console.log(modern);

Obie wersje dają identyczny wynik. Template literal czyta się jak zdanie, które buduje, a wersja z + zmusza cię do pilnowania cudzysłowów, spacji i operatorów konkatenacji. Używaj + tylko wtedy, gdy doklejasz coś małego do istniejącego stringa. Przy czymkolwiek dłuższym sięgaj po backticki.

Stringi są niemutowalne

Każda metoda, która wygląda, jakby zmieniała string, w rzeczywistości zwraca nowy:

const s = "hello";

s.toUpperCase();           // returns "HELLO" - discarded
console.log(s);            // still "hello"

const loud = s.toUpperCase();
console.log(loud);         // "HELLO"

Jeśli chcesz zachować zmianę, musisz gdzieś przypisać wynik. To pułapka dla początkujących, którzy piszą s.replace("a", "b") i oczekują, że s się zmieni. Nie zmieni się. Stringi w JavaScript są jak liczby: samej wartości nie da się zmienić, można tylko skierować zmienną na nową wartość.

Metody stringów, których naprawdę używasz

Pełne API stringów jest duże. Oto garść metod, po które sięgasz codziennie:

const s = "  Hello, World!  ";

console.log(s.length);                     // 17
console.log(s.trim());                     // "Hello, World!"
console.log(s.toLowerCase());              // "  hello, world!  "
console.log(s.includes("World"));          // true
console.log(s.startsWith("  He"));         // true
console.log(s.replace("World", "Ada"));    // "  Hello, Ada!  "
console.log(s.split(","));                 // ["  Hello", " World!  "]
console.log(s.slice(2, 7));                // "Hello"

Kilka rzeczy, które warto zapamiętać:

• length to właściwość, a nie metoda: bez nawiasów.
• replace ze zwykłym stringiem zamienia tylko pierwsze wystąpienie. Żeby zamienić wszystkie, użyj replaceAll albo wyrażenia regularnego z flagą g.
• slice(start, end) przyjmuje przedział prawostronnie otwarty: znak na pozycji end nie jest wliczany.
• Ujemne indeksy w slice liczą się od końca: s.slice(-3) daje ostatnie trzy znaki.

Indeksowanie i przechodzenie po znakach

Stringi zachowują się jak tablice znaków tylko do odczytu. Możesz odwoływać się do nich przez indeks i po nich iterować, ale nie możesz przypisać wartości na danej pozycji:

const s = "hello";

console.log(s[0]);      // "h"
console.log(s[4]);      // "o"
console.log(s[99]);     // undefined

s[0] = "H";             // silently ignored (or throws in strict mode)
console.log(s);         // still "hello"

for (const ch of s) {
    console.log(ch);
}

for...of iteruje po punktach kodowych (code points), co poprawnie obsługuje większość Unicode. Indeksy (s[i]) iterują po jednostkach kodu UTF-16, co potrafi przeciąć na pół emoji i inne znaki spoza BMP. Przy zwykłym tekście oba sposoby są w porządku. Przy treściach wpisywanych przez użytkowników wybierz for...of albo [...s].

Tagged template literals

Jest jeszcze jedna forma, którą warto znać, nawet jeśli rzadko ją piszesz. Otagowany (tagged) template literal wywołuje funkcję, przekazując jej osobno statyczne kawałki stringa i wstawione wartości:

function highlight(strings, ...values) {
    return strings.reduce((out, str, i) => {
        const val = values[i] !== undefined ? `[${values[i]}]` : "";
        return out + str + val;
    }, "");
}

const name = "Ada";
const score = 95;

console.log(highlight`User ${name} scored ${score} points.`);

Funkcja tagu decyduje, jak wygląda końcowy string: może escapować HTML, bezpiecznie budować SQL, kompilować CSS albo parsować GraphQL. Ten wzorzec zobaczysz w bibliotekach (styled-components, graphql-tag, lit-html) znacznie częściej, niż sam go napiszesz. Ale gdy potrzebujesz własnego przetwarzania stringów, tagi są najczystszym narzędziem.

Typowe pułapki

Krótka lista rzeczy, na których ludzie się potykają:

• Zapominanie o przypisaniu wyniku metody. Samo s.trim() nic nie robi.
• Łączenie liczby ze stringiem przez +. "Age: " + 30 + 5 to "Age: 305", a nie "Age: 35". Template literals omijają ten problem: `Age: ${30 + 5}`.
• Mylenie == z porównywaniem stringów. Równości przyjrzymy się dokładnie później, ale "1" == 1 to true, a "1" === 1 to false. Wybieraj ===.
• Założenie, że length to liczba znaków. Dla emoji i innych znaków z par zastępczych "".length to 2, a nie 1. Użyj [..."".length] albo Array.from(s).length, gdy potrzebujesz znaków widzianych przez użytkownika.

Dalej: Number i BigInt

Stringi to jeden typ prymitywny, liczby to drugi, a system liczbowy JavaScript ma własne dziwactwa: jeden typ Number dla liczb całkowitych i zmiennoprzecinkowych oraz BigInt na wypadek, gdy to nie wystarcza. O tym na następnej stronie.