Koercja typów w JavaScript: konwersje niejawne i jawne

Dwa rodzaje koercji

JavaScript luźno podchodzi do typów. Gdy operator dostaje wartość „złego” typu, język nie rzuca błędu, tylko ją konwertuje. Taka konwersja to koercja (coercion) i występuje w dwóch odmianach:

• Jawna: sam o nią prosisz, Number("42"), String(99), Boolean(value).
• Niejawna: uruchamia ją operator, choć nie napisałeś konwersji, "5" - 2, "" == 0, if (value).

Obie ostatecznie korzystają z tych samych reguł konwersji. Różnica polega na tym, czy o konwersji decydujesz ty, czy język. Niemal każdy mylący wynik w JavaScript, "5" + 1 === "51", [] == false, null == undefined, bierze się z niejawnej koercji, która zaskakuje cię znienacka.

console.log(Number("42"));    // 42     (explicit)
console.log("5" - 2);         // 3      (implicit)
console.log("5" + 2);         // "52"   (implicit, and different!)
console.log(Boolean(""));     // false  (explicit)
console.log(!!"");            // false  (implicit, same result)

Model myślowy: jeśli piszesz Number(...) albo String(...), wiesz, o co prosisz. Jeśli nie, każdy operator ma własne zdanie na temat tego, co zrobić, i właśnie w tych zdaniach mieszkają błędy.

Trzy typy docelowe

Koercja zawsze konwertuje do jednego z trzech typów prymitywnych: string, number albo boolean. (Jest też czwarty, bigint, ale inne typy nigdy nie są do niego automatycznie konwertowane). Cała reszta reguł wynika z tego, do którego typu dąży dany operator.

console.log(String(123));       // "123"
console.log(String(true));      // "true"
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String([1, 2, 3])); // "1,2,3"
console.log(String({a: 1}));    // "[object Object]"

Koercja do stringa jest najbardziej wyrozumiała: każda wartość ma postać tekstową. Zauważ, że obiekty zamieniają się na mało pomocne "[object Object]", dlatego logowanie obiektu doklejonego do stringa ("user: " + user) prawie nigdy nie pokazuje tego, czego chcesz. Zamiast tego użyj JSON.stringify albo template literals z konkretnymi polami.

Koercja do liczby

Koercja do liczby jest bardziej rygorystyczna. Stringi muszą naprawdę wyglądać jak liczba, w przeciwnym razie dostajesz NaN:

console.log(Number("42"));       // 42
console.log(Number("42.5"));     // 42.5
console.log(Number(""));         // 0    (!)
console.log(Number("   "));      // 0    (!)
console.log(Number("42px"));     // NaN
console.log(Number(true));       // 1
console.log(Number(false));      // 0
console.log(Number(null));       // 0    (!)
console.log(Number(undefined));  // NaN
console.log(Number([]));         // 0    (!)
console.log(Number([42]));       // 42   (!)
console.log(Number([1, 2]));     // NaN

Niespodzianki oznaczone w nawiasach warto zapamiętać:

• Pusty string i string z samych spacji dają 0, a nie NaN.
• null daje 0, ale undefined daje NaN.
• Pusta tablica daje 0, tablica z jednym elementem jest konwertowana jak ten element, a tablica z wieloma elementami daje NaN.

Jeśli chcesz wyciągnąć liczbę ze stringa z dodatkowymi znakami, użyj parseInt albo parseFloat zamiast Number:

console.log(parseInt("42px", 10));   // 42
console.log(parseFloat("3.14em"));   // 3.14
console.log(parseInt("", 10));       // NaN  (stricter than Number(""))

Zawsze przekazuj do parseInt podstawę systemu (10). Bez niej stringi zaczynające się od "0x" są parsowane szesnastkowo, a rzadko o to ci chodzi.

Koercja do boolean

Koercja do boolean jest najprostsza z trzech. Krótka lista wartości zamienia się na false, a wszystko inne na true.

Wartości falsy to:

• false
• 0, -0, 0n
• "" (pusty string)
• null
• undefined
• NaN

To wszystko. Każda inna wartość, w tym "false", "0", [] i {}, jest truthy.

console.log(Boolean(""));      // false
console.log(Boolean("false")); // true   (niepusty string)
console.log(Boolean(0));       // false
console.log(Boolean("0"));     // true   (niepusty string)
console.log(Boolean([]));      // true   (pusta tablica jest truthy!)
console.log(Boolean({}));      // true   (pusty obiekt jest truthy!)

if ([]) console.log("pusta tablica wykonuje blok if");
if ({}) console.log("pusty obiekt też go wykonuje");

Wyniki dla pustej tablicy i pustego obiektu zaskakują osoby przychodzące z Pythona, gdzie puste kolekcje są falsy. W JavaScript są truthy: jeśli chcesz sprawdzić, czy tablica jest pusta, sprawdź jawnie arr.length === 0.

Koercja do boolean zachodzi zawsze, gdy wartość pojawia się tam, gdzie oczekiwany jest boolean: if (...), while (...), operator trójargumentowy ? : oraz operatory logiczne &&, ||, !.

Operator + to przypadek szczególny

Większość operatorów arytmetycznych wymusza zamianę operandów na liczby. + działa inaczej: jeśli którakolwiek strona jest stringiem, + łączy stringi. W przeciwnym razie dodaje liczby.

console.log(1 + 2);       // 3
console.log("1" + 2);     // "12"
console.log(1 + "2");     // "12"
console.log(1 + 2 + "3"); // "33"    (left-to-right: 3, then "33")
console.log("1" + 2 + 3); // "123"   (once it's a string, it stays one)

console.log("5" - 2);     // 3       (- has no string version)
console.log("5" * "2");   // 10      (* coerces both sides)
console.log("5" / "2");   // 2.5

Obliczanie przebiega od lewej do prawej. 1 + 2 + "3" najpierw liczy 1 + 2 = 3, a potem 3 + "3" = "33". Natomiast "1" + 2 + 3 od początku jest stringiem i już nim pozostaje: "12", potem "123".

Dlatego budowanie stringów przez + jest kruche. Template literals nie mają tego problemu:

const count = 3;
console.log("count: " + count + 1);   // "count: 31"  (oops)
console.log(`count: ${count + 1}`);   // "count: 4"

Template literal oblicza count + 1 jako osobne wyrażenie liczbowe, a dopiero potem wstawia wynik. Żadnej niespodziewanej koercji.

Wybieraj jawne konwersje

Gdy musisz zmienić typ, powiedz to wprost. Kosztuje to kilka znaków, a następnej osobie czytającej kod usuwa wszelkie wątpliwości:

const input = "42";

// Implicit - works, but easy to misread.
const n1 = +input;
const n2 = input * 1;

// Explicit - reads as "I want a number from this string".
const n3 = Number(input);

// For user input that might be messy:
const n4 = parseInt(input, 10);

console.log(n1, n2, n3, n4);

Podobnie z wartościami logicznymi. !!value działa i jest popularne, ale Boolean(value) mówi dokładnie, co robi:

const value = "hello";
console.log(!!value);          // true
console.log(Boolean(value));   // true - easier to grep for

Rozsądna zasada: w logice aplikacji używaj jawnych konwersji, a krótkie formy (+x, !!x) zostaw na miejsca, gdzie liczy się zwięzłość, a intencja jest oczywista z kontekstu.

Operator == mocno polega na koercji

Operatory równości to największe źródło niespodzianek związanych z koercją. == konwertuje przed porównaniem, === nie.

console.log(1 == "1");         // true   (string coerced to number)
console.log(0 == "");          // true   (both coerce to 0)
console.log(0 == false);       // true   (false coerces to 0)
console.log(null == undefined); // true  (special case, only these two)
console.log(null == 0);        // false  (null does NOT coerce for ==)
console.log([] == false);      // true   ([] → "" → 0, false → 0)
console.log([1] == 1);         // true   ([1] → "1" → 1)

console.log(1 === "1");        // false  (different types, done)
console.log(null === undefined); // false

Każde true powyżej to wynik wieloetapowego łańcucha koercji, którego większość programistów nie wyrecytuje z pamięci. I w tym problem: kod, który działa przypadkiem, to kod, który później się zepsuje. Pełne reguły równości omówimy na następnej stronie. Na razie zapamiętaj: domyślnie używaj ===, a po == sięgaj tylko w konkretnym idiomie x == null (który łapie zarówno null, jak i undefined).

Wszystko razem

Przykład pokazujący, gdzie koercja pomaga, a gdzie szkodzi:

function parsePrice(input) {
    // Explicit: we want a number or nothing.
    const n = Number(input);
    if (Number.isNaN(n)) return null;
    return n;
}

function formatTotal(price, quantity) {
    // Template literal handles string building without + surprises.
    const total = price * quantity;
    return `Total: $${total.toFixed(2)}`;
}

console.log(parsePrice("19.99"));  // 19.99
console.log(parsePrice(""));        // 0      (Number("") is 0 - watch out)
console.log(parsePrice("abc"));     // null
console.log(formatTotal(parsePrice("19.99"), 3)); // "Total: $59.97"

Zwróć uwagę na drugie wywołanie. Number("") zwraca 0, a nie NaN, więc parsePrice("") zwraca 0, czego użytkownik tej funkcji raczej by nie chciał. Jeśli puste dane mają być odrzucane, dodaj jawne sprawdzenie:

function parsePrice(input) {
    if (typeof input !== "string" || input.trim() === "") return null;
    const n = Number(input);
    return Number.isNaN(n) ? null : n;
}

console.log(parsePrice(""));       // null
console.log(parsePrice("  "));     // null
console.log(parsePrice("19.99"));  // 19.99

Wiedza, które wartości zamieniają się na 0, a które na NaN, to właśnie to, co chroni cię przed subtelnym błędem w dalszej części kodu.

Co warto zapamiętać

• Koercja konwertuje do string, number albo boolean, zależnie od operatora.
• + z jakimkolwiek stringiem staje się łączeniem stringów, a każdy inny operator arytmetyczny konwertuje do liczby.
• Wartości falsy to stała, krótka lista: zapamiętaj ją. Wszystko inne jest truthy, w tym [] i {}.
• Number("") to 0, Number([]) to 0, Number(null) to 0, ale Number(undefined) to NaN. To pojawia się w prawdziwych błędach.
• Wybieraj Number(x), String(x), Boolean(x) zamiast sprytnych niejawnych sztuczek. Przyszły ty będzie ci wdzięczny.

Dalej: operatory równości

Wszystko, co koercja robi w porównaniach, dzieje się wewnątrz ==. Następna strona omawia ==, === i Object.is, jedyny idiom, w którym == nadal się przydaje, i powód, dla którego lintery domyślnie oznaczają luźną formę.