Czym jest właściwość valueAsNumber?

Właściwość valueAsNumber jest dostępna dla elementów HTML <input>. Zwraca ona numeryczną reprezentację wartości pola wejściowego, jeśli przeglądarka była w stanie ją sparsować jako liczbę. W przeciwnym razie zwraca NaN.

Ta właściwość jest szczególnie przydatna dla typów <input type="number">, <input type="range">, <input type="date"> i <input type="time">, ponieważ automatycznie obsługuje konwersję wartości tekstowej na wartość numeryczną lub numeryczną reprezentację daty/czasu.

Przykład użycia:

// Pobierz element input
const numberInput = document.getElementById('myNumberInput');

// Pobierz wartość numeryczną
const valueAsNumber = numberInput.valueAsNumber;

// Sprawdź, czy konwersja na liczbę się powiodła
if (isNaN(valueAsNumber)) {
  console.log('Wartość nie jest liczbą.');
} else {
  console.log('Wartość numeryczna:', valueAsNumber);
}

Jeśli input ma typ date lub time, valueAsNumber zwróci liczbę milisekund od początku epoki (1 stycznia 1970, 00:00:00 UTC).

// Pobierz element input typu date
const dateInput = document.getElementById('myDateInput');

// Pobierz znacznik czasu w milisekundach
const timestamp = dateInput.valueAsNumber;

console.log('Znacznik czasu:', timestamp);

// Zamień znacznik czasu na obiekt Date
const dateObject = new Date(timestamp);
console.log('Obiekt Date:', dateObject);

Ważne jest, aby zauważyć, że valueAsNumber automatycznie uwzględnia ustawienia lokalne formatowania liczb i dat podczas parsowania, co upraszcza pracę z międzynarodowymi aplikacjami internetowymi w porównaniu do ręcznego parsowania value.