知名度が低いウェブ標準ひとり Advent Calendar 2021 – 12 日目

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

基本的な使い方

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

<input type="number" />
const n = elInput.valueAsNumber;

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

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

Date も

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 側の仕様で変換方法が定められています。

おしまい

便利に使いましょう。