Zahlen in JavaScript parsen

Wenn Sie einen Wert aus einem Formularfeld, einem URL-Parameter oder einer JSON-API-Antwort auslesen, liegt dieser fast immer als String vor. Bevor Sie damit rechnen können, müssen Sie ihn in eine Zahl umwandeln. JavaScript bietet Ihnen mehrere Möglichkeiten dafür, die sich so stark unterscheiden, dass die Wahl der falschen Methode subtile Fehler verursacht. Dieser Artikel behandelt die wichtigsten Methoden, wann Sie welche verwenden sollten und die Randfälle, über die Entwickler am häufigsten stolpern.

Schnellvergleich: JavaScript-Methoden zur String-zu-Zahl-Konvertierung

parseInt(): Partielles Parsen für Ganzzahlen

parseInt(string, radix) liest Zeichen von links nach rechts und stoppt in dem Moment, in dem es auf etwas trifft, das es nicht parsen kann. Das macht es nützlich für Strings wie "24px" oder "10rem", bei denen die Zahl zuerst kommt.

parseInt("24px", 10)   // 24
parseInt("3.99", 10)   // 3  (Dezimalpunkt stoppt das Parsen)
parseInt("abc", 10)    // NaN (erstes Zeichen ist ungültig)

Übergeben Sie immer die Radix. Ohne diese behandelt parseInt Strings, die mit 0x beginnen, als hexadezimal und parst ansonsten zur Basis 10. Während moderne Engines standardmäßig Basis 10 verwenden, ist das Weglassen der Radix eine bekannte Fehlerquelle und macht Ihre Absicht unklar.

parseInt("0xFF", 16)   // 255 — explizites Hex-Parsen
parseInt("011", 10)    // 11  — Radix verhindert Mehrdeutigkeit

Ein nicht offensichtliches Verhalten: parseInt stoppt am Dezimalpunkt in "6.022e23", sodass parseInt("6.022e23", 10) 6 zurückgibt, nicht 602200000000000000000000. Verwenden Sie parseInt nicht zum Abschneiden großer Fließkommazahlen. Verwenden Sie stattdessen Math.trunc().

parseFloat(): Partielles Parsen für Dezimalzahlen

parseFloat() funktioniert genauso wie parseInt, behält aber den Dezimalteil bei. Es hat keinen Radix-Parameter und parst immer zur Basis 10.

parseFloat("3.14rem")  // 3.14
parseFloat("1e3")      // 1000 — versteht wissenschaftliche Notation
parseFloat("px10")     // NaN  — erstes Zeichen ist ungültig

Verwenden Sie parseFloat, wenn die Eingabe einen Dezimalwert enthalten kann und Sie diesen beibehalten möchten.

Number() und unärer +: Strikte Konvertierung

Sowohl Number() als auch der unäre +-Operator erfordern, dass der gesamte String eine gültige Zahl ist. Wenn ein Teil davon ungültig ist, erhalten Sie NaN. Diese Striktheit ist ein Vorteil bei der Arbeit mit API-Antworten oder validierten Formulardaten, wo ein partielles Parsen ein stiller Fehler wäre.

Number("42")     // 42
Number("3.14")   // 3.14
Number("42px")   // NaN — strikter als parseInt
Number("")       // 0   — achten Sie darauf
+"42"            // 42  — identisches Verhalten, kürzere Syntax

Der Randfall mit leerem String ist bei der Formularverarbeitung wichtig. Number("") gibt 0 zurück, nicht NaN, was einen fehlenden Wert verschleiern kann. Prüfen Sie immer auf leere Eingaben, bevor Sie konvertieren.

Numerische Trennzeichen funktionieren nicht zur Laufzeit

JavaScript-Quellcode erlaubt 1_000_000 als numerisches Literal, aber diese Syntax überträgt sich nicht auf das String-Parsen.

parseInt("1_000", 10)   // 1 — Parsen stoppt beim Unterstrich
Number("1_000")         // NaN

Wenn Ihre API oder Benutzereingabe Unterstriche als Tausendertrennzeichen verwendet, entfernen Sie diese zuerst mit str.replace(/_/g, "").

BigInt(): Parsen großer Ganzzahlen

JavaScripts Number-Typ verliert Präzision jenseits von Number.MAX_SAFE_INTEGER (2⁵³ − 1). Für Werte, die größer sind – Datenbank-IDs, kryptografische Werte, finanzielle Ganzzahlen – verwenden Sie BigInt().

BigInt("9007199254740993")   // 9007199254740993n — exakt
Number("9007199254740993")   // 9007199254740992  — um eins daneben

Übergeben Sie den String direkt an BigInt(). Übergeben Sie ihn nicht zuerst durch parseInt, da die Präzision zu diesem Zeitpunkt bereits verloren ist. Beachten Sie, dass BigInt-Werte nicht ohne explizite Konvertierung mit regulären Number-Werten in arithmetischen Operationen gemischt werden können.

Locale-bewusstes Parsen

JavaScript hat keine eingebaute Funktion zum Parsen von locale-formatierten Zahlen wie "1.234,56" (üblich in deutschen oder spanischen Locales). Sie müssen den String manuell normalisieren, bevor Sie ihn parsen:

const raw = "1.234,56"
const normalized = raw.replace(/\./g, "").replace(",", ".")
parseFloat(normalized) // 1234.56

Welche Methode sollten Sie verwenden?

• Benutzereingaben oder CSS-Werte mit Einheiten → parseInt(str, 10) oder parseFloat()
• API-Antworten oder strikt validierte Daten → Number() oder unärer +
• Ganzzahlen jenseits von 2⁵³ − 1 → BigInt()
• Immer validieren, dass das Ergebnis nicht NaN ist, bevor Sie es verwenden:

const qty = parseInt(input, 10)
if (Number.isNaN(qty)) {
  // ungültige Eingabe behandeln
}

Verwenden Sie Number.isNaN(), nicht das globale isNaN(). Die globale Version erzwingt zuerst eine Typumwandlung ihres Arguments, was bedeutet, dass isNaN("") false zurückgibt, obwohl "" keine Zahl ist.

Fazit

Die richtige JavaScript-Methode zum Parsen von Zahlen hängt davon ab, was Sie über Ihre Eingabe wissen. Verwenden Sie parseInt oder parseFloat, wenn partielles Parsen akzeptabel und erwartet ist. Verwenden Sie Number() oder den unären +, wenn der gesamte String eine gültige Zahl sein muss. Greifen Sie zu BigInt(), wenn Präzision bei großen Ganzzahlen wichtig ist. Prüfen Sie in allen Fällen auf NaN, bevor Sie das Ergebnis verwenden.

Häufig gestellte Fragen

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.