valueAsNumber özelliği nedir?

HTML öğeleri <input> üzerinde kullanılabilen valueAsNumber özelliği, giriş alanının değerinin sayısal temsilini döner, eğer tarayıcı bunu sayı olarak ayrıştırabildiyse. Aksi takdirde, NaN döner.

Bu özellik, özellikle <input type="number">, <input type="range">, <input type="date"> ve <input type="time"> türleri için faydalıdır çünkü string değerlerin sayısal veya tarih/zaman sayısal temsiline otomatik dönüşümünü sağlar.

Kullanım örneği:

// input elementini al
const numberInput = document.getElementById('myNumberInput');

// sayısal değeri al
const valueAsNumber = numberInput.valueAsNumber;

// dönüşümün başarılı olup olmadığını kontrol et
if (isNaN(valueAsNumber)) {
  console.log('Değer bir sayı değil.');
} else {
  console.log('Sayısal değer:', valueAsNumber);
}

Eğer input'un tipi date veya time ise, valueAsNumber başlangıçtan itibaren milisaniye cinsinden sayıyı döner (1 Ocak 1970, 00:00:00 UTC).

// date tipi input elementini al
const dateInput = document.getElementById('myDateInput');

// zaman damgasını milisaniye cinsinden al
const timestamp = dateInput.valueAsNumber;

console.log('Zaman damgası:', timestamp);

// zaman damgasını Date nesnesine dönüştür
const dateObject = new Date(timestamp);
console.log('Date nesnesi:', dateObject);

Önemli not: valueAsNumber, sayısal ve tarihsel biçimlendirme ayarlarını otomatik olarak dikkate alır, bu da uluslararasılaştırılmış web uygulamalarıyla çalışmayı, value'nun manuel ayrıştırılmasına kıyasla kolaylaştırır.