【JavaScript】parseInt と Number の違いと使い分けを解説

はじめに

JavaScriptで文字列を数値に変換する際によく使われるのが parseInt() と Number() です。

一見似ていますが、動作には明確な違いがあり、目的に応じて使い分ける必要があります。

本記事では parseInt と Numberの違いや使い分けについて、例を交えて解説します。

1. parseInt() の基本

parseInt('123');     // 123
parseInt('123px');   // 123
parseInt('12.34');    // 12
parseInt('abc');      // NaN

• 文字列の 先頭から 数字として読み取れる部分だけを変換します
• 数字のあとに続く文字や記号は無視されます
  （例：'123px' → 123）
• 先頭に数字がないと NaN になります
  （例：'abc' → NaN）
• 小数点以下は切り捨てられます
• 第2引数に基数（2進数・16進数など）を指定すると、その進数として解釈されます

parseInt('1010', 2);  // 10

🔸 基数は明示するのが安全

parseInt('010');      // 10（ES5以降）
parseInt('0x10');     // 16（16進数として解釈）

// 基数を明示することが推奨
parseInt('010', 10);  // 10
parseInt('10', 16);   // 16

2. Number() の基本

Number('123');     // 123
Number('123px');   // NaN
Number('12.34');    // 12.34
Number('');         // 0
Number(null);       // 0
Number(undefined);  // NaN
Number(true);       // 1
Number(false);      // 0

• 数字だけで構成された文字列は、正しく数値に変換されます
  （例：'123' → 123、'12.34' → 12.34）
• 数字以外の文字が含まれていると、変換できず NaN（数値ではない）になります
  （例：'123px' → NaN）
• 文字列以外（null や true など）も、JavaScriptの仕様に従って数値に変換されます

3. 違いを比較

以下の表に主な違いをまとめました。

項目	parseInt()	Number()
文字の含まれた値	先頭の数字だけを取り出して変換する	文字が含まれていると変換できない（NaN）
小数点の扱い	小数点以下は切り捨てられ、整数に変換される	小数点を含む値もそのまま変換される
空文字列	'' → NaN	'' → 0
先頭・末尾の空白	' 123 ' → 123（空白を無視）	' 123 ' → 123（空白を無視）
途中の空白	'1 23' → 1（空白で変換停止）	'1 23' → NaN（変換できない）
px などの単位付き	単位の前の数字だけを変換する	単位が含まれていると変換できない（NaN）
基数指定	第2引数で指定可能	不可

4. 使い分けのポイント

• 入力フォームの値に単位（例：px, %）などが含まれていて、「数字だけを取り出したい」とき → parseInt()
• 可能な限り正確に数値を変換したいとき → Number()
• 変換結果が数値かどうか確かめたいとき → Number.isNaN() や typeof を使って確認

おわりに

parseInt は「文字列から数字部分だけを取り出す」、
Number は「数値として解釈できるものだけを変換する」と考えると、それぞれの特徴がつかみやすくなります。

それぞれの特徴を理解して、用途に応じた使い分けを意識してみてください。

本記事が参考になれば幸いです。