JavaScriptで文字列を数値に変換する方法は複数あります。Number()・parseInt()・parseFloat()・単項プラス演算子（+）の4つです。「どれも似たようなもの」と思っていると、入力する文字列によって結果が食い違い、思わぬバグにつながることがあります（以前扱った||と??の話は演算子のデフォルト値処理の違いでしたが、今回は文字列から数値への変換メソッドそのものの違いです）。実際にNode.jsで検証しながら、5つの挙動差を紹介します。
検証結果一覧
いくつかの文字列を、4つの方法でそれぞれ変換してみました。
const tests = ["42", "42px", "3.14", "", " 42 ", "0x1A", "42abc"];
for (const t of tests) {
console.log(`"${t}" →`, Number(t), parseInt(t), parseFloat(t), +t);
}
結果は次のようになりました（左からNumber() / parseInt() / parseFloat() / +）。
"42" → 42 / 42 / 42 / 42
"42px" → NaN / 42 / 42 / NaN
"3.14" → 3.14 / 3 / 3.14 / 3.14
"" → 0 / NaN / NaN / 0
" 42 " → 42 / 42 / 42 / 42
"0x1A" → 26 / 26 / 0 / 26
"42abc" → NaN / 42 / 42 / NaN
挙動差5選
①末尾に余計な文字がついていると、Number()と+はNaNになる
"42px"や"42abc"のように、数字の後ろに文字が続いていると、Number()と単項+は変換をあきらめてNaNを返します。一方parseInt()とparseFloat()は「読める部分まで」を読み取って42を返します。CSSの"42px"のような値をそのまま数値に変換しようとしてNaNに遭遇するのは、この挙動の典型例です。
②空文字はNumber()と+だと0になる
""（空文字）を渡すと、Number()と単項+は0を返しますが、parseInt()とparseFloat()はNaNを返します。「入力が空だったらエラーにしたい」という場面でNumber()を使うと、空文字が静かに0として処理されてしまい、バリデーション漏れの原因になります。
③前後の空白は自動的に無視される
" 42 "のように前後に空白があっても、4つの方法すべてで正しく42として変換されます。空白の扱いについては、この4つで差はありません。
④小数点以下の扱いがparseInt()だけ違う
"3.14"を渡すと、Number()・parseFloat()・+はそのまま3.14を返しますが、parseInt()だけは小数点以下を切り捨てて3を返します。parseInt()は名前の通り「整数（integer）」に変換する関数なので、小数点以下を保持したい場面では不向きです。
⑤16進数表記はparseFloat()だけ認識しない
"0x1A"（16進数で26を表す文字列）を渡すと、Number()・parseInt()・+は正しく26に変換しますが、parseFloat()だけは0を返します。parseFloat()は「小数点を含む数値」の解析に特化しているため、0xという16進数プレフィックスを認識できず、0の直後で読み取りを止めてしまいます。
使い分けの目安
| 方法 | 向いている場面 |
|---|---|
Number() |
文字列全体が完全に数値である前提で、余計な文字が混ざっていたらNaNを検知してエラー扱いにしたい時 |
parseInt() |
"42px"のように単位付きの文字列から整数部分だけ取り出したい時 |
parseFloat() |
単位付きの文字列から小数を含む数値部分を取り出したい時（16進数は扱わない） |
+（単項プラス） |
Number()とほぼ同じ挙動。短く書きたい時に使われる |
AIが生成したコードで、ユーザー入力を数値に変換する処理を見かけたら、Number()系（厳密判定）とparseInt()系（緩い抽出）のどちらが使われているかを確認してみてください。特に空文字や単位付き文字列が入力される可能性がある場面では、選び方次第でバリデーションの穴になり得ます。
未経験者向けの講座を運営しています
未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を、全24セッションで体系化した教材です。Claude Code を学習パートナーにする CLAUDE.md と学習モード（learner / developer）の設計までセットで含みます。
- ▶ ライブデモ（インストール不要・無料で今すぐ見られます）→ https://trial-web-ayies128s-projects.vercel.app/?ref=qiita
- 教材完全版＋月5,500円のメンタリング（全24セッション＋チャット質問し放題）→ https://menta.work/plan/20251?ref=qiita
- 無料体験版（git clone して自分の手元で動かす・最初の数セッション分・⭐ Star もよろしくお願いします）→ https://github.com/ayies128/next-ai-camp-trial
- YouTube『AIエンジニア情報局』（AI×開発ニュースを1本5分でキャッチアップできる別運営チャンネル・無料）→ https://www.youtube.com/channel/UC1rXVD9WYsQPQEWZyd-A1KA/?ref=qiita
※ 中上級者には易しすぎる内容なので、初心者の知り合いへの紹介や社内研修の参考としてどうぞ。