String in Zahl umwandeln: parseInt, Number und + in JavaScript

Ein Wert aus einem Formularfeld, einem HTML-Attribut, einer URL oder einer schlecht typisierten JSON-Datei kommt immer als String an. Vor dem Rechnen musst du ihn in eine Zahl umwandeln. JavaScript bietet dafür vier Wege, und sie reagieren nicht gleich auf „42px“, „3,99“ oder einen leeren String. Hier steht, was jeder davon wirklich zurückgibt, geprüft unter Node.js 22.

Die vier Methoden in einer Tabelle

Zwei Familien zeichnen sich ab. parseInt und parseFloat extrahieren: Sie lesen den String von vorn, halten beim ersten Zeichen an, das keine Ziffer ist, und geben zurück, was sie gelesen haben. Number() und der Operator + wandeln ganz oder gar nicht um: Der komplette String muss eine Zahl darstellen, sonst kommt NaN. Eine Ausnahme, die weh tut: Der leere String ist für sie 0.

parseInt(): die Ganzzahl am Anfang des Strings

parseInt('42', 10);      // 42
parseInt('42px', 10);    // 42  : hält beim „p“ an
parseInt('3.99', 10);    // 3   : der Nachkommateil wird ignoriert, nicht gerundet
parseInt('  42  ', 10);  // 42  : Leerzeichen ringsum sind erlaubt
parseInt('abc', 10);     // NaN : keine Ziffer am Anfang
parseInt('', 10);        // NaN

Das zweite Argument ist die Basis (oder Radix). Sie ist 10 für eine Dezimalzahl, 16 für Hexadezimal, 2 für Binär:

parseInt('ff', 16);   // 255
parseInt('101', 2);   // 5
parseInt('0x1f');     // 31 : ohne Basis schaltet das Präfix 0x auf hexadezimal um
parseInt('08');       // 8  : moderne Engines lesen „08“ nicht mehr oktal

Die Basis ausdrücklich zu schreiben, parseInt(s, 10), ist seit ES5 wegen führender Nullen nicht mehr zwingend, bleibt aber die gute Gewohnheit: Sie macht die Absicht lesbar und entschärft den Fall 0x.

parseFloat(): die Dezimalzahl am Anfang des Strings

parseFloat('3.99');     // 3.99
parseFloat('12.5px');   // 12.5
parseFloat('.5');       // 0.5
parseFloat('1e3');      // 1000 : die wissenschaftliche Notation wird verstanden
parseFloat('3,99');     // 3    : das Komma beendet das Lesen
parseFloat('abc');      // NaN

parseFloat hat kein Basis-Argument, sie liest immer dezimal. Das ist die Funktion der Wahl, um ein Maß aus einem CSS-String („12.5px“, „1.5rem“) oder aus Fließtext herauszulösen.

Number(): die strenge Umwandlung

Number('42');       // 42
Number('3.99');     // 3.99
Number('  42  ');   // 42  : Leerzeichen und Zeilenumbrüche ringsum werden ignoriert
Number('42px');     // NaN : ein einziges Zeichen zu viel und alles scheitert
Number('');         // 0   : Achtung
Number(' ');        // 0   : ebenso
Number(null);       // 0
Number(undefined);  // NaN
Number(true);       // 1
Number('0x1f');     // 31  : hexadezimal, binär (0b) und oktal (0o) mit Präfix werden akzeptiert

Number() ist die Umwandlung, die du für einen Wert willst, der eine Zahl sein muss und sonst nichts: ein Preis, eine Menge, eine ID. Hat der Nutzer „12 Euro“ getippt, bekommst du NaN und kannst es ihm sagen, statt unbemerkt mit 12 weiterzurechnen.

Der unäre Operator +: Number() in einem Zeichen

+'42';     // 42
+'';       // 0
+'abc';    // NaN
'42' * 1;  // 42  : auch die Multiplikation erzwingt die Umwandlung
'42' - 0;  // 42
'3' + '4'; // '34' : die Addition dagegen verkettet!

Das + vor einem Wert wendet genau Number() an. Es ist kurz, in bestehendem Code sehr verbreitet und beim Lesen leicht zu übersehen: +valeur sieht aus wie ein Tippfehler. In gemeinsam gepflegtem Code sagt Number(valeur) dasselbe deutlicher. Und wandle nie mit der binären Addition um: '3' + '4' ergibt den String '34'.

NaN richtig behandeln

NaN (Not a Number) ist das Ergebnis jeder gescheiterten Umwandlung. Es hat eine tückische Eigenschaft: Es ist mit nichts gleich, nicht einmal mit sich selbst.

const n = Number('abc');

n === NaN;          // false, immer
Number.isNaN(n);    // true  : so wird richtig geprüft
isNaN('abc');       // true  : aber isNaN wandelt sein Argument zuerst um...
Number.isNaN('abc');// false : ... während Number.isNaN nur echte NaN prüft

Das übliche Muster: umwandeln, prüfen, einen Standardwert setzen oder den Fehler melden.

function toNumber(valeur, defaut = 0) {
  const n = Number(String(valeur).trim());
  return Number.isNaN(n) ? defaut : n;
}

toNumber('42');    // 42
toNumber('42px');  // 0  (Standardwert)
toNumber('', 10);  // 0  : der leere String ergibt 0, nicht den Standardwert

Die letzte Zeile erinnert an die Falle mit dem leeren String: Soll ein leeres Feld als „nicht ausgefüllt“ gelten, prüfe es vor der Umwandlung.

function toNumberStrict(valeur) {
  const s = String(valeur).trim();
  if (s === '') return NaN;
  return Number(s);
}

Der französische Fall: das Dezimalkomma

Keine der vier Methoden versteht „12,5“. Number liefert NaN, parseFloat hält am Komma an und liefert 12, was schlimmer ist: Das Programm läuft mit einem falschen Wert weiter. Normalisiere die Eingabe vor der Umwandlung.

function parseFr(chaine) {
  const normalisee = String(chaine)
    .replace(/\s/g, '')   // entfernt die Tausender-Leerzeichen: „1 234,56“
    .replace(',', '.');   // Dezimalkomma -> Punkt
  return Number(normalisee);
}

parseFr('12,5');       // 12.5
parseFr('1 234,56');   // 1234.56
parseFr('12.5');       // 12.5 : der Punkt bleibt erlaubt

In einem Formular umgeht <input type="number"> das Problem: Der Browser zeigt dem französischen Nutzer das Komma an, überträgt in value aber immer einen Punkt.

Prüfen, ob ein String wirklich eine Zahl ist

Um vor der Verwendung zu wissen, ob ein String eine Zahl darstellt, kombinierst du eine strenge Umwandlung mit Number.isFinite, das NaN und Infinity ablehnt.

function estNumerique(chaine) {
  const s = String(chaine).trim();
  return s !== '' && Number.isFinite(Number(s));
}

estNumerique('42');       // true
estNumerique('3.99');     // true
estNumerique('42px');     // false
estNumerique('');         // false
estNumerique('Infinity'); // false

Und um nach der Umwandlung eine Ganzzahl von einer Dezimalzahl zu unterscheiden: Number.isInteger(42) ist true, Number.isInteger(3.99) ist false.

Große Ganzzahlen: wenn Number nicht mehr reicht

Number stellt Ganzzahlen bis 2⁵³ − 1 (9.007.199.254.740.991) exakt dar. Darüber geht die Genauigkeit ohne Warnung verloren: eine 64-Bit-Datenbank-ID oder ein sehr hoher Betrag in Cent können verfälscht werden.

Number('9007199254740993');   // 9007199254740992 : die letzte Ziffer hat sich geändert
BigInt('9007199254740993');   // 9007199254740993n : exakt
Number.MAX_SAFE_INTEGER;      // 9007199254740991

BigInt lässt sich in einer Rechnung nicht mit Number mischen und akzeptiert keine Nachkommastellen; behalte es IDs und wirklich großen Ganzzahlen vor.

Welche Methode wählen?

• Der Wert muss eine Zahl sein und sonst nichts (Preis, Menge, ID): Number(), nachdem du den leeren String ausgeschlossen hast.
• Du musst eine Zahl aus einem Text herauslösen („12.5px“, „3 Artikel“): parseFloat() für eine Dezimalzahl, parseInt(s, 10) für eine Ganzzahl.
• Die Eingabe kommt von einem französischen Nutzer: Komma und Leerzeichen normalisieren, dann Number().
• Du liest Code mit +valeur: Das ist Number(valeur). Behalte es, wenn das Team daran gewöhnt ist, aber wandle nie mit der Addition '3' + '4' um.
• In jedem Fall: Prüfe mit Number.isNaN() oder Number.isFinite(), bevor du rechnest.

Die umgekehrte Operation, eine Zahl in einen lesbaren String mit zwei Nachkommastellen oder Tausendertrennzeichen zu verwandeln, behandelt Zahlen in JavaScript formatieren. Für die Grundlagen der Sprache erklärt das Kapitel Variablen und Datentypen des Tutorials, warum ein String und eine Zahl zwei verschiedene Typen sind.