Что такое свойство valueAsNumber?

Свойство valueAsNumber доступно у HTML-элементов <input>. Оно возвращает числовое представление значения поля ввода, если браузер смог парсить его как число. В противном случае возвращает NaN.

Это свойство особенно полезно для типов <input type="number">, <input type="range">, <input type="date"> и <input type="time">, так как оно автоматически обрабатывает преобразование строкового значения в числовое или числовое представление даты/времени.

Пример использования:

// Получаем элемент input
const numberInput = document.getElementById('myNumberInput');

// Получаем числовое значение
const valueAsNumber = numberInput.valueAsNumber;

// Проверяем, удалось ли преобразование в число
if (isNaN(valueAsNumber)) {
  console.log('Значение не является числом.');
} else {
  console.log('Числовое значение:', valueAsNumber);
}

Если инпут имеет тип date или time, valueAsNumber вернет число миллисекунд с начала эпохи (1 января 1970 года, 00:00:00 UTC).

// Получаем элемент input с типом date
const dateInput = document.getElementById('myDateInput');

// Получаем timestamp в миллисекундах
const timestamp = dateInput.valueAsNumber;

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

// Преобразуем timestamp в объект Date
const dateObject = new Date(timestamp);
console.log('Объект Date:', dateObject);

Важно отметить, что valueAsNumber автоматически учитывает локальные настройки форматирования чисел и дат при парсинге, что упрощает работу с интернационализованными веб-приложениями по сравнению с ручным парсингом value.