elInput.valueAsNumberで最初から数値（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 13日目）

今日は elInput.valueAsNumber です。数値変換を省略できます。

基本的な使い方

Number(elInput.value) の代わりに elInput.valueAsNumber です。

<input type="number" />

const n = elInput.valueAsNumber;

console.log(typeof n); // => "number"

入力が不正な書式の場合や type="text" 等の場合は NaN になります。

new Date(elInput.value) の代わりに elInput.valueAsDate です。Date オブジェクトを得られます。

<input type="date" />

const date = elInput.valueAsDate;

console.log(date.toUTCString()); // => "Tue, 13 Dec 2021 00:01:23 GMT"

駄目なときは null になります。

単純な Number(value) とかではなく、というか JavaScript (ECMAScript) ではなく HTML 側の仕様で変換方法が定められています。

便利に使いましょう。