Einleitung: Warum ist das wichtig?
Stellen Sie sich vor: Sie schreiben einen Trinkgeldrechner in JavaScript. Der Benutzer gibt den Rechnungsbetrag in ein Eingabefeld ein, klickt auf eine Schaltfläche – und erhält... undefined oder, noch schlimmer, einen String "10010" anstelle der Zahl 110. Kommt Ihnen das bekannt vor? Wenn Sie gerade erst mit dem Programmieren beginnen, ist das Problem der Umwandlung eines Strings in eine Zahl in JavaScript einer jener "Stolpersteine", auf die absolut jeder tritt.
Auf Stack Overflow hat die Frage "How can I convert a string to an integer in JavaScript?" tausende Aufrufe und hunderte Antworten gesammelt. Das bedeutet, dass selbst erfahrene Entwickler manchmal bei den Nuancen durcheinanderkommen. Heute klären wir ein für alle Mal, wie man einen String korrekt in eine Zahl in JavaScript konvertiert, welche Methoden funktionieren, welche nicht – und warum das Ergebnis manchmal unerwartet ist.
Bereit? Dann legen wir los!
Warum überhaupt einen String in eine Zahl umwandeln?
JavaScript ist eine dynamisch typisierte Sprache. Das ist cool, weil Sie nicht über Datentypen nachdenken müssen… bis Sie auf einen Bug stoßen. Das Problem ist, dass Daten aus prompt(), input-Formularfeldern, URL-Parametern oder APIs immer als Strings ankommen. Selbst wenn der Benutzer "42" eingegeben hat, sieht JavaScript keine Zahl, sondern eine Zeichenfolge.
Versuchen Sie, zwei Strings zu addieren:
let a = "10";let b = "20";console.log(a + b); // "1020"Sehen Sie? Statt der Summe 30 erhalten Sie eine Verkettung. Um dies zu vermeiden, müssen Sie JavaScript explizit mitteilen: "Hey, das sind Zahlen, behandle sie wie Zahlen!".
Methode Nr. 1: parseInt() – der Klassiker
Die beliebteste Methode, einen String in eine ganze Zahl in JavaScript umzuwandeln, ist die Funktion parseInt(). Sie nimmt einen String und "beißt" die ganze Zahl daraus heraus, wobei alles ignoriert wird, was nach den Ziffern kommt.
Syntax und Beispiele
let str = "42";let num = parseInt(str);console.log(num); // 42 (Zahl)
// Funktioniert sogar mit "Müll" nach den Ziffernconsole.log(parseInt("123px")); // 123console.log(parseInt("10.99")); // 10 (verwirft den Nachkommateil)
// Wenn der String jedoch nicht mit einer Ziffer beginnt...console.log(parseInt("abc123")); // NaNconsole.log(parseInt(" 7")); // 7 (Leerzeichen am Anfang werden ignoriert)Wichtig: parseInt() stoppt beim ersten nicht-numerischen Zeichen. Wenn der String mit einem Buchstaben beginnt, erhalten Sie NaN (Not a Number).
Zweites Argument – Zahlensystem
Nur wenige wissen, dass parseInt() einen zweiten Parameter hat – radix (Basis des Zahlensystems). Dies schützt vor Bugs mit oktalen Zahlen:
// Ohne radix kann es zu Verwirrung kommenconsole.log(parseInt("010")); // 10 (in alten IE konnte es 8 sein)
// Geben Sie für das Dezimalsystem immer 10 anconsole.log(parseInt("010", 10)); // 10console.log(parseInt("FF", 16)); // 255 (hexadezimal)Professioneller Tipp: Übergeben Sie immer das zweite Argument 10, wenn Sie mit Dezimalzahlen arbeiten. Das macht den Code verständlicher und sicherer.
Methode Nr. 2: Number() – streng, aber ehrlich
Die Funktion Number() ist eine strengere Methode, einen String in eine Zahl in JavaScript zu konvertieren. Im Gegensatz zu parseInt() toleriert sie keine fremden Zeichen.
console.log(Number("42")); // 42console.log(Number("10.99")); // 10.99 (behält den Nachkommateil)console.log(Number("123px")); // NaN (String enthält zusätzliche Zeichen)console.log(Number("")); // 0 (leerer String = 0)console.log(Number(" ")); // 0Wann verwenden: wenn Sie zu 100% sicher sind, dass der String nur eine Zahl enthält (z.B. nach Formularvalidierung). Für Benutzereingaben ist parseInt() oder