JavaScriptのparseInt()とNumber()の違いを徹底解説！文字列を数値に変換する正しい方法

parseInt()とNumber()の違いとは？

JavaScriptで文字列を数値に変換する際によく使われるのが「parseInt()」と「Number()」です。どちらも文字列から数値を取得する関数ですが、内部の動作は大きく異なります。それぞれの特徴と挙動の違いを見ていきましょう。

parseInt(string)：先頭から数字だけを読み取る

parseInt()メソッドは、文字列の先頭から順に解析し、最初に数字以外の文字が現れた時点で解析を中止し、それまでに読み取った値を返します。

例えば、次のコードは 765 を返します。

parseInt("765world")

もう一つの例です。次のコードは 50 を返します。

parseInt("50px");

このように、単位（px など）が付いた値や、数値の後に文字が続く文字列でも、先頭の数値部分だけを抜き出せるのがparseInt()の大きな特徴です。

また、parseInt()は第2引数に基数（radix）を指定できます。例えば16進数の文字列を変換する場合は次のように記述します。

parseInt("ff", 16); // 255 を返す

なお、先頭が数字として解釈できない場合（例：parseInt("abc")）は NaN を返します。また、小数を渡した場合は小数点以下が切り捨てられる点にも注意してください。

Number(string)：文字列全体を厳密に数値へ変換する

Number()関数は、文字列全体を数値へ変換します。変換対象には小数（float）も含まれます。

例えば、次のコードは NaN を返します。

Number("765world")

次のコードも同様に NaN を返します。

Number("50px");

このように、文字列の中に1つでも数値として解釈できない文字が含まれていると、Number()は NaN（Not a Number） を返します。「文字列が完全に数値として有効であること」を前提とする場面に適しています。

もちろん、小数点を含む文字列もそのまま変換できます。

Number("3.14"); // 3.14 を返す

さらに、空文字の扱いにも違いがあります。Number("") は 0 を返しますが、parseInt("") は NaN を返します。

使い分けのポイント

• 単位付きの数値（"50px" など）から数値部分だけを取り出したい → parseInt()
• 文字列が完全に数値として有効か検証しながら変換したい → Number()
• 小数をそのまま扱いたい → Number()（parseInt()は小数点以下を切り捨てます）
• 16進数などの基数を指定して変換したい → parseInt()

まとめ

parseInt()は「先頭から数字を読み取り、数字以外の文字が出た時点で解析を止める」のに対し、Number()は「文字列全体を厳密に数値へ変換し、無効な文字が1つでもあればNaNを返す」という違いがあります。用途に応じて適切な方を選択することで、意図しないバグを防ぎ、より安全なコードを書くことができます。