Wie man einen String in eine Zahl in TypeScript umwandelt: Top-Fehler und wie man sie vermeidet

Einleitung: Warum eine einfache Aufgabe den Code zerstört

Jeder Entwickler, der mit TypeScript arbeitet, steht früher oder später vor der Aufgabe: „Wie wandle ich einen String in eine Zahl um?“. Man sollte meinen, was könnte einfacher sein? Aber genau diese, auf den ersten Blick triviale Operation, wird zur Quelle Dutzender Bugs, besonders an der Schnittstelle von Frontend und Backend, wo Daten aus Eingabeformularen, APIs oder CSV-Parsing kommen.

Auf Stack Overflow hat die Frage „How to convert a string to number in TypeScript?“ Zehntausende von Aufrufen. Und das ist kein Zufall. Entwickler ertrinken in Nuancen: NaN, parseInt gegen Number(), Genauigkeitsverlust und unerwartetes Verhalten mit leeren Strings. In diesem Artikel analysieren wir die Top-Fehler bei der Umwandlung eines Strings in eine Zahl in TypeScript und zeigen, wie man sie vermeidet. Sie erfahren, welche Methode Sie für eine bestimmte Aufgabe wählen und wie Sie wirklich zuverlässigen Code schreiben.

Grundlegende Methoden zur Umwandlung eines Strings in eine Zahl in TypeScript

Bevor wir über Fehler sprechen, erinnern wir uns an die Werkzeuge, die einem TypeScript-Entwickler zur Verfügung stehen. Jedes von ihnen verhält sich anders, und die Wahl der falschen Methode ist der erste und wichtigste Fehler.

1. Die Funktion Number()

Der offensichtlichste Weg. Number(value) versucht, den übergebenen Wert in eine Zahl umzuwandeln. Wenn dies nicht möglich ist, wird NaN zurückgegeben.

const str: string = "42";\nconst num: number = Number(str);\nconsole.log(num); // 42\n\nconst invalid: string = "hallo";\nconst badNum: number = Number(invalid);\nconsole.log(badNum); // NaN

2. Unäres Plus (+)

Kurze Syntax, die dasselbe tut wie Number(). Prägnant, kann aber Anfänger verwirren.

const price: string = "99.99";\nconst numericPrice: number = +price;\nconsole.log(numericPrice); // 99.99\n\nconst empty: string = "";\nconst zero: number = +empty;\nconsole.log(zero); // 0 — Achtung, das ist eine häufige Falle!

3. parseInt() und parseFloat()

Spezialisierte Funktionen zum Parsen von ganzen und gebrochenen Zahlen. Sie „beißen“ den numerischen Teil aus dem String ab und ignorieren nachfolgende Zeichen.

const userInput: string = "123px";\nconst width: number = parseInt(userInput, 10);\nconsole.log(width); // 123 — die Zeichen 'px' wurden verworfen\n\nconst height: string = "45.67em";\nconst parsedHeight: number = parseFloat(height);\nconsole.log(parsedHeight); // 45.67

4. Bitweise Operatoren (~~, | 0)

Exotische Methode, die aus JavaScript stammt. Funktioniert nur für ganze Zahlen und verwirft den Nachkommateil.

const str: string = "7.8";\nconst result: number = ~~str;\nconsole.log(result); // 7 — Nachkommateil verloren

Top-5-Fehler bei der Umwandlung eines Strings in eine Zahl in TypeScript

Nachdem wir nun die Werkzeuge besprochen haben, schauen wir uns an, wo Entwickler am häufigsten stolpern. Diese Fehler sind die sprichwörtlichen „Rechen“, auf die selbst erfahrene Programmierer treten.

Fehler Nr. 1: Ignorieren von NaN

Der häufigste Fehler ist, das Ergebnis nicht auf NaN zu überprüfen. TypeScript gibt keinen Fehler aus, wenn Sie NaN in arithmetischen Operationen oder Vergleichen verwenden, aber das Ergebnis wird unerwartet sein.

const input: string = "keine zahl";\nconst value: number = Number(input);\n\n// Fehler: NaN nimmt an Berechnungen teil\nconst total = value + 10;\nconsole.log(total); // NaN\n\n// Vergleich mit NaN ist immer falsch\nif (value === NaN) {\n  console.log("Das wird nie funktionieren");\n}

Wie man es vermeidet: Verwenden Sie immer isNaN() oder Number.isNaN() zur Überprüfung. Die zweite Variante ist vorzuziehen, da sie nicht-numerische Typen nicht umwandelt.

if (Number.isNaN(value)) {\n  console.error("Es wurde keine Zahl eingegeben");\n  // Sie können einen Standardwert zurückgeben oder einen Fehler anzeigen