O que é a propriedade valueAsNumber?

A propriedade valueAsNumber está disponível nos elementos HTML <input>. Ela devolve a representação numérica do valor do campo de entrada, se o navegador conseguiu interpretá-lo como um número. Caso contrário, devolve NaN.

Esta propriedade é especialmente útil para tipos <input type="number">, <input type="range">, <input type="date"> e <input type="time">, pois ela trata automaticamente da conversão de valores de string para valores numéricos ou representações numéricas de data/hora.

Exemplo de uso:

// Obter o elemento input
const numberInput = document.getElementById('myNumberInput');

// Obter o valor numérico
const valueAsNumber = numberInput.valueAsNumber;

// Verificar se a conversão para número foi bem-sucedida
if (isNaN(valueAsNumber)) {
  console.log('O valor não é um número.');
} else {
  console.log('Valor numérico:', valueAsNumber);
}

Se o input tiver o tipo date ou time, valueAsNumber retornará o número de milissegundos desde o início da época (1 de janeiro de 1970, 00:00:00 UTC).

// Obter o elemento input de tipo date
const dateInput = document.getElementById('myDateInput');

// Obter o timestamp em milissegundos
const timestamp = dateInput.valueAsNumber;

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

// Converter o timestamp em um objeto Date
const dateObject = new Date(timestamp);
console.log('Objeto Date:', dateObject);

É importante notar que valueAsNumber leva em consideração automaticamente as configurações locais de formatação de números e datas ao fazer o parsing, o que simplifica o trabalho com aplicações web internacionalizadas em comparação com o parsing manual de value.