それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

Number と parseInt()の挙動の違い / 数字に変換するとひと言でいうが奥深い

parseInt と Number の挙動の違い。

parseInt と Number という2つがある。文字列 → 数値の型変換の関数を使おうとしてみんな一度くらいこの違いが気になるんじゃない?

違いをパパッと確認しよう

parseInt と Number の差異が如実に顕出するのは、次の例ではないでしょうか。

// 文字列が含まれる
parseInt("64GB")   //  64
Number("64GB")  // NaN
// 少数
parseInt("0.1")  //  0
Number("0.1")   // 0.1

IntがほしいならparseInt が便利。

parseInt の結果を見てほしい

parseInt("1")      //  1
parseInt("10")     //  10
parseInt("0.1")    //  0
parseInt("010101") //  10101
parseInt("64GB")   //  64
parseInt("¥64")   // NaN
parseInt("64円")   // 64
parseInt("第64回") // NaN
parseInt("2e1")    // 2
parseInt("0xFF") // 255
parseInt("0xFF times")// 255

少数が処理できないという、parseInt の名前の通りの仕様を除けば、概ね楽ちんに変換できる。

事前に文字列を処理して、必要なフォーマットに変換する手間がない。

parseInt は関数の名前( parseInt =Int に解釈する )の通りの動作だったり。

Number は本当の意味で型変換

Number は JS の Number 型であり、Number型の変数を返すので、本当の意味で型変換だと思うの

Number("1")    // 1
Number("10")   // 10
Number("0.1")   // 0.1
Number("010101") // 10101
Number("64GB")  // NaN
Number("¥64")  // NaN
Number("64円")  // NaN
Number("第64回") // NaN
Number("2e1")  // 20
Number("0xFF") // 255
Number("0xFF times") // NaN

個人的な結論

parseIntは、単位が含まれたりする入力値してぱぱっと数字へ変換したいとき → 10px とか 100円とか、CSSの値を数値にしたいときに便利

Numberは厳密に文字列事前処理し、その結果を数字に正確に変換するときに使う。

基本はNumberを使う、事前処理などを無精するときはparseIntもまだまだ許容されると思う。

少数にならないCSSの文字列 element.style.width とか処理をするなら重宝する。