TypeScript String in Number umwandeln (und zurück)

Um in TypeScript einen String in eine Zahl umzuwandeln, rufst du Number(text) auf. Das Ergebnis hat den Typ number und ist NaN, wenn der Text keine gültige Zahl ist. Für Text mit nachfolgenden Zeichen wie "42px" nimmst du parseInt(text, 10) oder 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

Alle vier Umwandlungen liefern den Typ number. TypeScript weiß nicht, ob der Text gültig war; ein ungültiger String ergibt trotzdem eine number, deren Wert NaN ist.

Warum du umwandeln musst

Formularfelder, URL-Parameter, Umgebungsvariablen und Dateiinhalte kommen als Strings an. TypeScript lässt dich keinen davon dort verwenden, wo eine Zahl erwartet wird:

// 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.

Rechnen mit -, * und / auf einem String ist ein Fehler. + ist erlaubt, verkettet aber, also ist "3" + 10 der String "310". Deshalb muss die Umwandlung zuerst kommen: Number(quantity) * 10.

Eine Typ-Assertion hilft auch nicht. quantity as number wird abgelehnt (TS2352), und es über as unknown as number zu erzwingen, bringt nur den Compiler zum Schweigen: Zur Laufzeit bleibt der Wert ein String.

Number vs parseInt vs parseFloat vs unäres Plus

Die vier Funktionen stimmen bei sauberer Eingabe überein und unterscheiden sich bei allem anderen. Diese Tabelle zeigt die echte Ausgabe jeder Funktion unter Node:

Die Regeln hinter der Tabelle:

• Number und unäres + sind identisch. Sie wandeln den ganzen String nach dem Entfernen von Leerzeichen um, verstehen 1e3 und hexadezimales 0x und geben NaN zurück, wenn etwas übrig bleibt. Ein leerer oder nur aus Leerzeichen bestehender String wird zu 0.
• parseInt und parseFloat lesen vom Anfang und hören beim ersten Zeichen auf, das sie nicht verwenden können, deshalb liefern "42px" und "1,000" Teilzahlen. Ein leerer String ergibt NaN.
• parseInt verwirft den Nachkommaanteil und versteht keine Exponenten: "1e3" endet beim e.
• Numerische Trennzeichen (12_000) sind im Quellcode gültig, nicht in Strings.

Number ist die strengere Wahl, um Eingaben zu validieren. parseInt und parseFloat passen zu Text, der tatsächlich eine Einheit oder ein Suffix trägt, etwa CSS-Größen.

Ungültige Eingaben behandeln: NaN

NaN hat den Typ number, deshalb warnt der Compiler nie davor. Prüfe das Ergebnis selbst, mit Number.isNaN oder 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
}

Wenn die Funktion number | undefined zurückgibt, wird der Fehlschlag Teil des Typs, und jeder Aufrufer muss ihn behandeln, bevor er rechnet. Number.isFinite lehnt auch Infinity ab, das Number("Infinity") bereitwillig zurückgibt.

Vermeide das globale isNaN(x): Es wandelt sein Argument erst um, daher ist isNaN("abc") in JavaScript true. Die Deklaration in TypeScript akzeptiert nur eine number, einen String zu übergeben ist also der Fehler TS2345. Das ist ein Hinweis, Number.isNaN auf einen bereits umgewandelten Wert anzuwenden.

String in Integer

Übergib parseInt immer das zweite Argument, die Basis: 10 für Dezimaltext. Es ist optional, dokumentiert aber die Absicht und ist bei anderen Basen wichtig. Um aus einem Dezimalstring eine ganze Zahl zu bekommen, wandle um und runde dann ausdrücklich.

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 erwartet einen String: parseInt(12.7) ist ein Compilerfehler (TS2345). Das ist nützlich, denn in JavaScript wandelt parseInt eine Zahl zuerst in Text um und liefert bei Werten wie 0.0000005 falsche Ergebnisse (es gibt 5 zurück). Für Zahlen nimmst du Math.trunc. Für ganze Zahlen jenseits von Number.MAX_SAFE_INTEGER liest BigInt(text) den vollen Wert (und wirft bei ungültigem Text einen SyntaxError, statt NaN zurückzugeben).

Zahl in String

String(n), n.toString() und `${n}` wandeln eine Zahl jeweils in ihre kürzeste String-Form um. Formatierungsmethoden geben mehr Kontrolle:

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 rundet den binären Wert, nicht die Dezimalzahl, die du getippt hast, deshalb ist (1.005).toFixed(2) gleich "1.00": 1.005 wird als etwas weniger als 1.005 gespeichert. Für Geldbeträge speicherst du ganze Cent oder formatierst mit Intl.NumberFormat.

String(n) funktioniert auch mit null und undefined (ergibt "null" und "undefined"), während n.toString() unter strict ein Compilerfehler wäre, da der Wert fehlen könnte.

Kurzreferenz