Qu'est-ce que la propriété valueAsNumber?

La propriété valueAsNumber est disponible sur les éléments HTML <input>. Elle renvoie la représentation numérique de la valeur du champ de saisie si le navigateur a pu l'analyser comme un nombre. Sinon, elle renvoie NaN.

Cette propriété est particulièrement utile pour les types <input type="number">, <input type="range">, <input type="date"> et <input type="time">, car elle gère automatiquement la conversion de la valeur de chaîne en valeur numérique ou en représentation numérique de la date/heure.

Exemple d'utilisation :

// Obtenir l'élément input
const numberInput = document.getElementById('myNumberInput');

// Obtenir la valeur numérique
const valueAsNumber = numberInput.valueAsNumber;

// Vérifier si la conversion en nombre a réussi
if (isNaN(valueAsNumber)) {
  console.log('La valeur n’est pas un nombre.');
} else {
  console.log('Valeur numérique :', valueAsNumber);
}

Si l'input a le type date ou time, valueAsNumber renverra le nombre de millisecondes depuis le début de l'époque (1er janvier 1970, 00:00:00 UTC).

// Obtenir l'élément input de type date
const dateInput = document.getElementById('myDateInput');

// Obtenir le timestamp en millisecondes
const timestamp = dateInput.valueAsNumber;

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

// Convertir le timestamp en objet Date
const dateObject = new Date(timestamp);
console.log('Objet Date :', dateObject);

Il est important de noter que valueAsNumber prend automatiquement en compte les paramètres locaux de formatage des nombres et des dates lors de l'analyse, ce qui facilite le travail avec des applications web internationalisées par rapport à l'analyse manuelle de value.