Number(), parseInt(), parseFloat: Strings in Zahlen umwandeln und prüfen

Alle Zahlen sind einfach number – kein Integer, kein Floating Point

Anders als die meisten Programmiersprachen kennt Javascript nur einen Typ von Zahlen – keine Integer, Short, Long oder Floating Point- Zahlen. Zahlen sind einfach Number, ob mit oder ohne Dezimalstellen.

let a = 10;      // Integer
let b = 3.14;    // Dezimalzahl

Wenn Daten vom Benutzer eingegeben werden – über die Eingabefelder von Formularen – beginnen sie als Text oder Zeichenketten (Strings). Number(), parseInt() und parseFloat() ziehen Zahlen aus Strings.

Number("42")     // 42
parseInt("42px") // 42
parseFloat("3.14")

Number(s)

Number() kommt vom globalen Konstruktor Number (Objekt) und konvertiert eine Variable oder einen String in eine Zahl und wird heute parseInt() bzw. parseFloat() vorgezogen, denn Number() ist strenger, vorhersehbarer und macht Fehler besser sichtbar.

• Ein numerischer String von Zahlen wie 17.4050 wird in die Zahl 17.405 umgewandelt.
• Ein String wie "Javascript" gibt NaN (not a number) zurück.
• Ein leerer String "" wird in 0 umgewandelt.

console.log (Number ("17.4050"));    // 
console.log (Number("22,99"));       // 
console.log (Number ("Javascript")); // 
console.log (Number (""));           // 
console.log (Number (Math.PI));      // 

parseInt() – String zu ganzer Zahl

Parst (analysiert) einen String "x" und gibt die erste Zahl (Integer) zurück, die gefunden wird.

parseInt( x, [radix] )

Ist das erste Zeichen keine Ziffer, Leerzeichen oder ein führendes Minusszeichen, gibt parseInt() NaN zurück.

                ┌── zur Basis 2
                ▼
parseInt("111", 2) // 7

                ┌── zur Basis 10
                ▼
parseInt("42", 10) // 42

           ┌── zur Basis 10
           ▼
parseInt("16px")   // 16

parseFloat("3.14rem") // 3.14

parseInt() unterstützt einen zweiten optionalen Parameter radix, um die Basis der geparsten Zahl anzugeben (im Bereich 2-36).

• Mit dem Wert "10" interpretiert der Parser die Zahl im Dezimalsystem, während "16" eine Zahl als Hexadezimalwert interpretiert.
• Ist der Parameter nicht vorhanden, geht parseInt () davon aus, dass Zahlen, die mit "0x" beginnen, radix 16 sind, "0" radix 8 und alle anderen Zahlen radix 10.
• Grundsätzlich sollte man den Radix, die Zahlbasis, immer angeben.

parseInt("ff", 16)                  // 255 
parseInt( "50", 10 )                // liefert 50
parseInt( "17", 8 )                 // liefert 15
parseInt( "3-facher Meister". 10 )  // liefert 3
parseInt( "  5 lebt", 10 )          // liefert 5 
parseInt( "Ich habe 3 Computer" )   // liefert NaN

Vorsichtshalber sollte die Basis 10 bei der Auswertung von Formularfeldern immer angegeben werden, damit führende Nullen nicht zu Fehlern führen.

parseInt("017")     // liefert 15
parseInt("17")      // liefert 17

parseInt() ist toleranter als Number() – der wohl wichtigste Unterschied.

Number("42px")   // NaN ❌ – nicht immer erwünscht
parseInt("42px") // 42 ✅

parseFloat(x) – String zu Gleitkammazahl

Parst einen String x und gibt die erste Fliesskommazahl – also die erste Zahl mit einem Dezimalpunkt – zurück. Ist das erste Zeichen im String keine Ziffer, Weißraum oder ein führendes Minuszeichen, gibt parseFloat() NaN zurück.

parseFloat( "15.87" )            // gibt 15,87 zurück
parseFloat( "-17,8 Meter" )      // gibt -17 zurück
parseFloat( "foo " )             // gibt NaN zurück
parseFloat( "   2.5" )           // gibt 2.5 zurück

parseFloat() wandelt z.B. Eingaben in Formularfeldern in Zahlen um. Javascript interpretiert die Werte von Formularfeldern immer als String, auch wenn der Benutzer '17.87' in ein Feld eingetragen hat. Bei der Transformation von Fliesskommazahlen aus Formularfeldern müssen Kommas vor dem Aufruf von parseInt() in Punkte umgewandelt werden, da parseInt() ansonsten nur die Zahl bis zum Komma umwandelt.

x = x.replace( /,/,"." );
y.value = parseFloat( x );

Doppeltilde ~~ und Unärer Plus-Operator

~~ ist eine doppelte bitweise Negation. ~~"42" wertet zuerst ~"42" aus (-(x + 1)) und dann ~"-43". Schnell, aber nicht gerade intuitiv.

const num1 = "42";      // 
const num2 = "17.4050"; // 
const num3 = "22,99";   // 
const num4 = true;      // 
const num5 = false;     // 
const num6 = "-2002";   // 

Ein Plus vor der Variablen wird als Unitary plus operator interpretiert.

const plus1 = ~~"42";      // +plus1 = 
const plus2 = ~~"17.4050"; // +plus2 = 
const plus3 = ~~"22,99";   // +plus3 = 
const plus4 = ~~true;      // +plus4 = 
const plus5 = ~~"false";   // +plus5 = 
const plus6 = ~"-2002";   // +plus6 = 

isNaN ()

isNaN () prüft, ob x den Wert NaN (Not a Number) aufweist – eine illegale Zahl.

isNaN (document.getElementById('nannum').value)

isNaN gibt true zurück, wenn x keine ordentliche Zahl (NaN) ist und ansonsten false. Ein typisches Beispiel für NaN ist »0 dividiert durch 0«, aber auch beim Prüfen von Eingaben in Formularfeldern muss geprüft werden, ob sich die Eingabe tatsächlich in eine Zahl umwandeln lässt. Für die Prüfung ist isNaN erforderlich, da die Gleichheitsoperatoren sowohl bei einer Abfrage if (num == NaN) als auch bei if (num === Nan) nicht funktionieren.

isFinite(x)

Stellt fest, ob eine Zahl endlich (finit) ist. Gibt false zurück, wenn x +infinity, -infinity oder NaN ist (ab JavaScript 1.3).

console.log (isFinite (2.17424));	// true
console.log (isFinite (1.5E+317));	// false
console.log (isFinite (17/3));		// true
console.log (isFinite (0/0));		// false

Number(obj)

Javascript Number (obj) konvertiert das Objekt im Argument in eine Zahl, die das Objekt darstellt. Wenn sich das Objekt nicht in eine Zahl umwandeln läßt, gibt Number() NaN (not a number) zurück. Das Objekt muss ein Javascript-Objekt sein. Wenn kein Argument übergeben wird, gibt Number() 0 zurück.

let foo = new Boolean( "true" );
console.log ( Number( foo ) );

gibt 1 zurück