String na number w TypeScript (i number na string)

Żeby zamienić string na liczbę w TypeScript, wywołaj Number(text). Wynik ma typ number i jest równy NaN, gdy tekst nie jest poprawną liczbą. Dla tekstu ze znakami na końcu, na przykład "42px", użyj parseInt(text, 10) albo parseFloat(text).

const input: string = "42";

const a = Number(input);       // 42
const b = parseInt(input, 10); // 42 (whole numbers)
const c = parseFloat("3.75");  // 3.75
const d = +input;              // 42 (unary plus, same as Number)

console.log(a + 1, b + 1, c + 1, d + 1); // 43 43 4.75 43

// And back: number to string
const text: string = String(a);
console.log(text, text.length); // 42 2

Wszystkie cztery konwersje zwracają typ number. TypeScript nie wie, czy tekst był poprawny: niepoprawny string też daje number, którego wartość to NaN.

Dlaczego trzeba konwertować

Pola formularzy, parametry URL, zmienne środowiskowe i zawartość plików przychodzą jako stringi. TypeScript nie pozwoli użyć takiej wartości tam, gdzie oczekiwana jest liczba:

// This does not compile: a string is not a number.
const quantity: string = "3";
const total: number = quantity * 10;
console.log(total);

index.ts(3,23): error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

Arytmetyka z -, * i / na stringu to błąd. + jest dozwolony, ale łączy napisy, więc "3" + 10 to string "310". Dlatego konwersja musi być pierwsza: Number(quantity) * 10.

Asercja typu też nie pomoże. quantity as number zostaje odrzucone (TS2352), a wymuszenie przez as unknown as number tylko ucisza kompilator: w czasie wykonania wartość pozostaje stringiem.

Number, parseInt, parseFloat i jednoargumentowy plus

Cztery funkcje zgadzają się przy czystych danych i różnią się we wszystkim innym. Ta tabela to prawdziwy wynik każdej z nich w Node:

Zasady stojące za tabelą:

• Number i jednoargumentowy + działają identycznie. Konwertują cały string po obcięciu białych znaków, rozumieją 1e3 i szesnastkowe 0x, a jeśli coś zostanie, zwracają NaN. Pusty string albo string z samych białych znaków staje się 0.
• parseInt i parseFloat czytają od początku i zatrzymują się na pierwszym znaku, którego nie potrafią użyć, więc "42px" i "1,000" dają częściowe liczby. Pusty string to NaN.
• parseInt odcina część ułamkową i nie rozumie wykładników: "1e3" zatrzymuje się na e.
• Separatory liczbowe (12_000) są poprawne w kodzie źródłowym, ale nie w stringach.

Number to ostrzejszy wybór do walidacji danych wejściowych. parseInt i parseFloat pasują do tekstu, który naprawdę zawiera jednostkę albo przyrostek, jak rozmiary w CSS.

Obsługa niepoprawnych danych: NaN

NaN ma typ number, więc kompilator nigdy przed nim nie ostrzeże. Sprawdź wynik samodzielnie, przez Number.isNaN albo Number.isFinite:

function toNumber(text: string): number | undefined {
    if (text.trim() === "") return undefined; // Number("") would be 0
    const n = Number(text);
    return Number.isFinite(n) ? n : undefined;
}

for (const s of ["12.5", "", "abc", "7 ", "Infinity"]) {
    console.log(JSON.stringify(s), toNumber(s));
}

const age = toNumber("30");
if (age !== undefined) {
    console.log(age + 1); // age is number here
}

Zwracanie number | undefined sprawia, że porażka staje się częścią typu, więc każde wywołanie musi ją obsłużyć przed obliczeniami. Number.isFinite odrzuca też Infinity, które Number("Infinity") chętnie zwraca.

Unikaj globalnego isNaN(x): najpierw konwertuje argument, więc w JavaScript isNaN("abc") to true. Deklaracja w TypeScript przyjmuje tylko number, więc przekazanie stringa to błąd TS2345. To podpowiedź, żeby użyć Number.isNaN na już przekonwertowanej wartości.

String na liczbę całkowitą

Zawsze podawaj parseInt drugi argument, podstawę: 10 dla tekstu dziesiętnego. Jest opcjonalny, ale pokazuje intencję i ma znaczenie przy innych podstawach. Żeby dostać liczbę całkowitą ze stringa z częścią ułamkową, przekonwertuj go, a potem jawnie zaokrąglij.

console.log(parseInt("0042", 10)); // 42
console.log(parseInt("ff", 16));   // 255
console.log(parseInt("1010", 2));  // 10

const price = Number("19.99");
console.log(Math.trunc(price), Math.round(price), Math.floor(price)); // 19 20 19

console.log(Number.isInteger(Number("7")));   // true
console.log(Number.isInteger(Number("7.5"))); // false

console.log(BigInt("9007199254740993")); // 9007199254740993n

parseInt oczekuje stringa: parseInt(12.7) to błąd kompilacji (TS2345). To przydatne, bo w JavaScript parseInt na liczbie najpierw zamienia ją na tekst i daje złe wyniki dla wartości takich jak 0.0000005 (zwraca 5). Dla liczb używaj Math.trunc. Dla liczb całkowitych większych niż Number.MAX_SAFE_INTEGER BigInt(text) parsuje pełną wartość (a przy niepoprawnym tekście rzuca SyntaxError, zamiast zwrócić NaN).

Number na string

Każde z String(n), n.toString() i `${n}` zamienia liczbę na jej najkrótszą postać tekstową. Metody formatujące dają większą kontrolę:

const n = 1234.5678;

console.log(String(n));            // 1234.5678
console.log(n.toString());         // 1234.5678
console.log(`${n}`);               // 1234.5678
console.log(n.toFixed(2));         // 1234.57
console.log(n.toPrecision(3));     // 1.23e+3
console.log(n.toLocaleString("en-US")); // 1,234.568
console.log((255).toString(16));   // ff
console.log((5).toString().padStart(3, "0")); // 005

const label: string = n.toFixed(1); // every method here returns string
console.log(label);                 // 1234.6

toFixed zaokrągla wartość binarną, a nie wpisaną liczbę dziesiętną, więc (1.005).toFixed(2) to "1.00": 1.005 jest przechowywane jako nieco mniej niż 1.005. Przy pieniądzach trzymaj kwoty jako całkowite grosze albo formatuj przez Intl.NumberFormat.

String(n) działa też na null i undefined (daje "null" i "undefined"), a n.toString() byłoby w trybie strict błędem kompilacji, bo wartości może brakować.

Ściąga