input要素で入力された値をvalueAsNumber、valueAsDateで取得する

input要素で入力されたものをinput#valueで取得すると、すべて文字列になってしまう。

ただ<input type="number">や<input type="date">の場合は、文字列ではなく数値や日付オブジェクトとして取得したい。そのときにvalueAsNumberやvalueAsDateを使うことで、数値や日付オブジェクトとして取得できる。

<input type="number" value="123" >

<input type="date" value="2022-04-04">

const num = document.querySelector('input[type="number"]')
console.log(
  num.value, // "123"
  typeof num.value, // "string"
  num.valueAsNumber, // 123
  typeof num.valueAsNumber // "number"
)

const date = document.querySelector('input[type="date"]')
console.log(
  date.value, // "2022-04-04"
  typeof date.value, // "string"
  date.valueAsDate, // "2022-04-04T00:00:00.000Z"
  typeof date.valueAsDate // "object"
)