یک راه بهتر برای کار با input ها در جاوااسکریپت

خب احتمالا تا حالا زیاد پیش اومده که بخوای یک مقدار عددی رو از input با استفاده از جاوااسکریپت دریافت کنی. به همین خاطر کدهایی مثل کد زیر حتما واست آشناست:

const input= document.querySelector('input')
const num= parseFloat(input);

توی کد بالا ما مقدار input رو دریافت کردیم و برای اینکه اون رو تبدیل کنیم به یک مقدار عددی، از parseFloat استفاده کردیم. کاری که همیشه انجام میدادیم و برامون معموله.

اما از ES10 به بعد یک راه بهتر برای کار با مقادیر عددی input ها بوجود اومده و اونهم استفاده از valueAsNumber هست. یعنی  به جای استفاده از parseFloat اینطوری بنویسی:

const input= document.querySelector('input')
const num= input.valueAsNumber;

و البته که امکان تغییر مقدار اون رو به صورت مستقیم خواهی داشت:

input.valueAsNumber = 568.23

اما یه چیزی رو باید درنظر داشته باشی و اون هم اینه که valuseAsNumber  همیشه از نوع Number هست. بنابراین اگه input ما مقداری نداشته باشه، مقدار Nan دریافت میکنی و همونطور که میدونی:

typeof NaN
// number

پس اگه یه جایی نیاز به عدد واقعی داشتی حواست باشه که قبلش چک کنی مقدارش NaN نباشه 

const num= input.valueAsNumber;
if (!isNaN(number)) {
  // continue your code
}

کار با input های از نوع تاریخ در جاوااسکریپت

جالب اینجاست که  مشابه همین رو برای input های از نوع Date هم داریم که با valueAsDate قابل استخراجه:

const dateInput = document.querySelector('.date-input')
const date = dateInput.valueAsDate

و دقیقا مشابه قبل امکان تغییر مقدار اون رو هم داریم:

dateInput.valueAsDate = new Date();

برخلاف valueAsNumber در این حالت اگر input مقداری نداشته باشه دیگه از NaN خبری نیست و صرفا null برگردونده میشه:

const date = dateInput.valueAsDate
if (date) {
  // continue your code
}

پشتیبانی در مرورگرها

پراپرتی های valueAsNumber  و valueAsDate سالهاست که در جاوااسکریپت حضور دارن بنابراین خیالت از بابت پشتیبانی مرورگرها تقریبا راحته:

امیدوارم این آموزش برات مفید بوده باشه. حتما نظرت رو در بخش دیدگاه ها برام بفرست!