12pxを数にすると何になる？NumberとparseIntの読み取り範囲を比べよう

文字列の"12px"から数を取り出したい。NumberとparseIntを同じ変換だと思うと、片方ではNaN、もう片方では12になって驚くかもしれない。何を有効な入力とするかに合わせて選ぼう。

今回は文字列だけを対象に、Number(value)とparseInt(value, 10)を比べる。記事下の作例では五つの文字列を選択できる。任意のコード実行や、外部への送信は行わないよ。

Numberは文字列全体を数として変換する

console.log(Number("12px")); // NaN
console.log(Number("12.5")); // 12.5
console.log(Number("1e3"));  // 1000

NaNは、数として変換できなかった場合などの特別な値。12pxのように単位が付いた文字列全体は、今回のNumberでは数にならないよ。

一方、1e3は指数表記として解釈される。Numberが「半角の数字だけ」を受け入れる入力検証になっているわけではない点にも注意しよう。

parseIntは先頭から整数として読める部分を読む

console.log(parseInt("12px", 10)); // 12
console.log(parseInt("12.5", 10)); // 12
console.log(parseInt("1e3", 10));  // 1

二つ目の引数10は、10進数として読む指定。今回の例では、先頭から整数として読める部分を読み、そこで止まる。小数を四捨五入する処理ではないので、12.5が13になるわけではないよ。

12pxから12が取れたことは、文字列全体が正しい数だったことを意味しない。単位や余計な文字を認めたくないフォームで、変換できたから合格としてしまうと条件が広がる。

空文字と前後の空白も比べる

空文字列をNumberへ渡すと0になる。未入力と数値の0を区別する必要がある場合は、変換する前にも確認が必要だね。

この表は文字列に絞った結果。null、真偽値、配列など別の種類の値まで、同じ説明で扱うことはできないよ。

作例を操作してみよう

値を一つずつ選ぶと、元の文字列を引用符付きで表示し、両方の結果が変わる。NaNはJSONへそのまま渡してnullへ変わる表示を避け、作例では文字のNaNとして明示している。

空文字列と空白付きの12を見比べたら、「最初から試す」で12pxへ戻そう。編集部ではNode.jsとChromiumで、五つの組み合わせとリセットを確認した。

変換した後も、範囲や種類を確認する

数として使えるかを見るならNumber.isFiniteなどを検討できるが、数値として有限であることだけで業務上の条件が満たされるわけではない。個数なら整数か、負の値を認めるかなども別の確認になる。

datasetの文字列と型と0を残す代替値の選び方も合わせて見ると、入力・変換・表示を分けて考えやすいよ。