🐡

【JavaScript】Number()とparseInt()

に公開
JavaScript
tech

JavaScriptで数値文字列を数値に変換したいとき、自分は基本的にはNumber()を使います。
ただこの2つの差を正確に把握出来ていないと思ったので、実際に動かしてみて2つの差異を明確にしていきます。

引数

数値文字列

console.log(Number('123')); // 123
console.log(parseInt('123')); // 123

これは当然同じ結果。

数値文字列＋スペース

console.log(Number(' 123 ')); // 123
console.log(parseInt(' 123 ')); // 123

これもスペースをトリムして数値化してくれます。

数値文字列＋文字列

console.log(Number('123abc')); // NaN
console.log(parseInt('123abc')); // 123

ここで違いが出てきました。
数値に変換できない文字列を含む場合Number()ではNaN（Not a Number）、parseInt()では文字列を除去した数値文字列を数値化してくれます。

文字列＋数値文字列

console.log(Number('abc123')); // NaN
console.log(parseInt('abc123')); // NaN

数値に変換出来ない文字列で始まる場合は、当然NaNが返されますね。

null

console.log(Number(null)); // 0
console.log(parseInt(null)); // NaN

ここも違いが出ました。
Number()はnullを0として返します。

undefined

console.log(Number(undefined)); // NaN
console.log(parseInt(undefined)); // NaN

undefinedはどちらもNaNとなります。

数値文字列（小数）

console.log(Number('123.45')); // 123.45
console.log(parseInt('123.45')); // 123
console.log(parseFloat('123.45')); // 123.45

ここも違いますね。
parseInt()は小数を切り捨て整数部のみを返します。
小数部まで返すにはparseFloat()を使う必要があります。

2進数

console.log(Number('0b101')); // 5
console.log(parseInt('0b101')); // 0
console.log(parseInt('101', 2)); // 5

Number()は"0b"始まりの文字列を2進数として認識して変換してくれますが、parseInt()は第2引数で基数を指定しないと、2進数として認識してくれません。先頭の0を数値変換し返します。

8進数

console.log(Number('0o755')); // 493
console.log(parseInt('0o755')); // 0
console.log(parseInt('755', 8)); // 493

2進数の時と同じく、parseInt()は第2引数で基数を指定しないと、8進数として認識してくれません

16進数

console.log(Number('0xab9c')); // 43932
console.log(parseInt('0xab9c')); // 43932

16進数ならどちらも正しく変換してくれます。

どちらを使うべきか

色々な引数で実行してみて、基本的にはNumber()を使うで良いかなとは思います。
ただnullがあり得る値を扱い場合は注意が必要です。
parseInt()は、例えば単位付きの文字列から数値のみを抜き出したい場合などは便利かもしれません。

console.log(parseInt('2025年')); // 2025
console.log(parseInt('1980円')); // 1980
console.log(parseInt('32px')); //  32

Discussion