Was ist die Eigenschaft valueAsNumber?

Die Eigenschaft valueAsNumber ist bei HTML-Elementen <input> verfügbar. Sie gibt die numerische Darstellung des Wertes des Eingabefelds zurück, wenn der Browser ihn als Zahl interpretieren konnte. Andernfalls wird NaN zurückgegeben.

Diese Eigenschaft ist besonders nützlich für die Typen <input type="number">, <input type="range">, <input type="date"> und <input type="time">, da sie die automatische Umwandlung von String-Werten in numerische Werte oder numerische Darstellungen von Datum/Uhrzeit übernimmt.

Anwendungsbeispiel:

// Eingabeelement abrufen
const numberInput = document.getElementById('myNumberInput');

// Numerischen Wert abrufen
const valueAsNumber = numberInput.valueAsNumber;

// Überprüfen, ob die Umwandlung in eine Zahl erfolgreich war
if (isNaN(valueAsNumber)) {
  console.log('Der Wert ist keine Zahl.');
} else {
  console.log('Numerischer Wert:', valueAsNumber);
}

Wenn das Input den Typ date oder time hat, gibt valueAsNumber die Millisekunden seit Beginn der Epoche (1. Januar 1970, 00:00:00 UTC) zurück.

// Eingabeelement vom Typ date abrufen
const dateInput = document.getElementById('myDateInput');

// Zeitstempel in Millisekunden erhalten
const timestamp = dateInput.valueAsNumber;

console.log('Zeitstempel:', timestamp);

// Zeitstempel in ein Date-Objekt umwandeln
const dateObject = new Date(timestamp);
console.log('Date-Objekt:', dateObject);

Wichtig ist, dass valueAsNumber die lokalen Einstellungen für Zahlen- und Datumsformatierung beim Parsen automatisch berücksichtigt, was die Arbeit mit internationalisierten Webanwendungen im Vergleich zum manuellen Parsen von value erleichtert.