Zenn
🔖

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

に公開
JavaScript
初心者向け
備忘録
tech

はじめに

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 は「数値として解釈できるものだけを変換する」と考えると、それぞれの特徴がつかみやすくなります。

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

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

Discussion