【JavaScript】文字列を数値に変換する方法を初心者向けにわかりやすく解説
はじめに
JavaScriptを学び始めたばかりの方が意外とつまずきやすいのが、文字列と数値の変換ではないでしょうか。
たとえば、ユーザーがフォームに入力した値は通常文字列として扱われます。しかし、計算が必要なシーンでは数値に変換しないと意図した動作になりません。
このような「文字列を数値に変換する」処理は、ちょっとした計算から高度な数値解析まで幅広く活用されます。
そこでこの記事では、JavaScriptで文字列を数値へ変換する方法を整理し、それぞれの特徴や注意点、実務での利用シーンまでわかりやすく紹介します。
気になる方は、まず全体像を押さえてから実務にどう生かせるかを見ていくと、理解が深まりやすいでしょう。
この記事を読むとわかること
- JavaScriptにおける型の基本的な考え方
- parseIntやparseFloatの使いどころと注意点
- Numberコンストラクタや単項プラス演算子による変換方法
- 実務で文字列を数値に変換する場面での具体的な例
- BigIntを用いた大きな数値の扱い方
- NaNをはじめとしたエラーや想定外の挙動の対処法
JavaScriptにおける数値化の基本
JavaScriptの世界では、変数の型が動的に変化することが特徴の一つです。
文字列から数値へ、数値から文字列へといった変換は柔軟に行えますが、使いどころを間違えるとエラーや意図しない計算結果につながるおそれがあります。
初心者の方はまず「なぜ文字列から数値に変換する必要があるのか」を具体的な事例とともに理解しておくとよいでしょう。たとえば、フォームで入力されたテキストを足し算したつもりが、文字列の結合になってしまうことがよくあります。このような混乱を避けるためにも、数値化の方法を押さえておくことは大切です。
JavaScriptにおける型の概念
JavaScriptでは大きく分けて、プリミティブ型とオブジェクトに分かれます。
プリミティブ型には以下のようなものがあります。
- string
- number
- boolean
- undefined
- null
- symbol
- bigint
ここで注目すべきは、numberとstringです。
文字列と数値は別々の型でありながら、JavaScriptの動的な型付け特性により意図せず混在してしまうことがあるため、明示的な変換を習慣にしておくとバグを減らせます。
とはいえ、初心者のうちは変換方法が複数あって混乱しがちです。
このあと解説するそれぞれの変換手段をしっかり区別し、使いどころを覚えておくとスムーズにコードが書けるでしょう。
文字列を数値に変換するシーン
文字列を数値に変換する具体的なシーンとしては、たとえば以下のような例が挙げられます。
- フォームに入力された値を数値として扱って計算したい
- APIレスポンスやJSONデータから取得した文字列を利用して、合計や平均を求めたい
- URLパラメータやクエリ文字列に含まれた数値情報を解析して、条件分岐を行いたい
これらのシーンでは文字列のまま演算すると、思わぬ結果を招くことが多いです。
余計な型変換バグを避けるためにも、文字列から数値への正しい変換方法を学んでおきましょう。
文字列を数値に変換する方法
文字列を数値に変換するための方法は主に以下の4種類です。
- parseInt
- parseFloat
- Numberコンストラクタ
- 単項プラス (+演算子)
それぞれ結果が微妙に異なるので、順番に特徴や活用例を見ていきます。
parseIntによる変換
parseInt は文字列を整数に変換します。
もし小数点を含む場合、小数点以下は切り捨てられることに注意してください。
const value1 = parseInt("123", 10); console.log(value1); // 123 const value2 = parseInt("123.45", 10); console.log(value2); // 123 (小数部分は切り捨て)
ここで示しているように、"123.45"を parseInt すると小数部分は無視されます。
「確実に整数として取り扱いたい」という場合には便利ですが、小数点を正しく扱いたいときは parseFloat を使うなど目的によって切り替えが必要です。
実践例：整数変換
実務ではフォームから電話番号などを受け取るケースで、整数として扱うために parseInt を利用することがあります。
たとえば、ユーザーが入力した文字列が「08012345678」のように数字しか含まれない場合は問題ありませんが、もし半角スペースやハイフンなどが間に混入していると変換に失敗する可能性があります。
const phoneInput = "080-1234-5678"; const phoneNumber = parseInt(phoneInput, 10); console.log(phoneNumber); // 080までの数字をパースできる一方、ハイフン以降は無視されるので期待通りでないケースがある
見てのとおり、ハイフン以降はパースされず無視されるため、実際に電話番号として正確な数値になるとは限りません。
このような場合は、正規表現などで不要な文字を取り除いてから parseInt を適用するなどの工夫が必要になります。
パラメータに関する注意点
parseInt は第二引数に 基数 (radix)を指定できます。
省略した場合、文字列の先頭が "0x" で始まると16進数とみなされるなど、想定外の結果を招くことがあります。
通常、10進数として扱いたい場合は必ず10を指定するのが無難です。
const num1 = parseInt("010"); // 場合によっては8進数とみなす実装もある const num2 = parseInt("010", 10); console.log(num1, num2); // 実装によっては結果が異なるケースがあるため、明示的に10を指定しておくことが推奨される
もし取り扱う値が常に10進数であるとわかっているなら、第二引数に10を指定しましょう。
意図せず8進数や16進数として解釈されるリスクを減らせます。
parseFloatによる変換
parseFloat は小数点を含む数値を正しく扱いたいときに使います。
特に商品価格や測定データのように、小数部を無視できないケースに向いています。
const value1 = parseFloat("123.45"); console.log(value1); // 123.45 const value2 = parseFloat("99.9abc"); console.log(value2); // 99.9 (途中の文字列は無視される)
parseFloat も parseInt 同様、途中で数値でない文字が出現した場合は、そこまでを数値として読み込みます。
そのため、アルファベットや記号が混ざっていると「部分的に正しい数値」として解釈されることがある点には注意です。
実践例：小数変換
たとえば、ECサイトの金額計算やウェブアプリでグラフ描画用に浮動小数点数を扱う場合は parseFloat が役に立ちます。
体積や価格などを計算する際、整数として処理すると小数点以下が切り捨てられてしまうため、誤差が出る可能性が高いです。
実際のコード例としては、
const priceString = "2500.75"; const priceNumber = parseFloat(priceString); console.log(priceNumber + 100); // 2600.75
上記のように算術演算に組み込むときは、小数点の扱いを細かく確認しておくと安心です。
parseFloatの扱いの注意点
parseFloat にもいくつか落とし穴があります。
文字列の先頭にスペースやタブなどの空白がある場合、数値を正しく解析できないことがあります。
const sample = " 45.67"; const result = parseFloat(sample); console.log(result); // 多くの実装では先頭の空白は無視されることが多いが、環境によって動作が異なる可能性もある
また、parseFloat("123.45.67") のように小数点が複数含まれる文字列は途中でパースが停止し、予期せぬ値になってしまうかもしれません。
そのため、入力データの形式を確認しながら使うのが基本です。
Numberコンストラクタによる変換
次に、Numberコンストラクタ を使った方法を紹介します。
これは Number(文字列) の形で呼び出し、数値へ明示的に変換してくれます。
const value1 = Number("123"); console.log(value1); // 123 const value2 = Number("123.45"); console.log(value2); // 123.45 const value3 = Number("abc"); console.log(value3); // NaN (変換できない場合はNaN)
parseInt や parseFloat と異なり、部分的な数値化は行われません。
文字列全体が有効な数値でない場合は、返り値が NaN となります。
Numberを使うメリットと注意
メリットとしては「不正な文字が混在している場合は必ずNaNを返す」という点です。
parseInt や parseFloat のように、途中まで数値変換を続行しないので、データ検証をしやすいという利点があります。
一方で、完全な数値形式でなければ変換結果がNaNになるため、そこをきちんとハンドリングする必要があります。
もしフォーム入力などで数値以外の文字が混じりやすい場合は、ユーザーの入力段階でバリデーションを行ったほうが安全でしょう。
サンプルコード
以下のサンプルコードでは、配列内に数値として扱いたい文字列をまとめておき、map 関数でNumber変換を一括で行っています。
const items = ["100", "200.5", "Hello", "300.0"]; const numbers = items.map(item => Number(item)); console.log(numbers); // [100, 200.5, NaN, 300]
こうすることで、数値として有効なものとそうでないものを簡単に識別できます。
ただし、NaNを含むかどうかをチェックしないと、後の計算処理でエラーを招く可能性があるので注意してください。
単項プラス演算子による変換
もう一つの方法として、 単項プラス演算子 (+) を用いた変換があります。
文字列の前に + をつけるだけで、内部的には数値へ型変換が行われます。
const value1 = +"123"; console.log(value1); // 123 const value2 = +"123.45"; console.log(value2); // 123.45 const value3 = +"abc"; console.log(value3); // NaN
動作的には Number(文字列) とほぼ同じ結果となります。
一見するとシンプルですが、可読性の面でコードを読み慣れていない人には少しわかりにくいかもしれません。
サンプルコード
たとえば以下の例のように、テキスト入力から取得した文字列を一括で数値に変換するときに使うことがあります。
const inputs = ["10", "20", "xyz"]; const converted = inputs.map(str => +str); console.log(converted); // [10, 20, NaN]
同じく、不正な文字列の場合はNaNとなる点に注意してください。
複数の変換方法の中でも記号が1文字加わるだけのため、短く書きたいときには便利ですが、チーム開発などではコードの意図が伝わりにくいこともあるでしょう。
注意すべき挙動
単項プラス演算子は、演算の種類や文脈によっては単なるプラス演算と混同される可能性があります。
特に文字列の前にスペースを入れずに書いたりすると、見落としてバグにつながるリスクがあるかもしれません。
// 例: let str = "150"; let total = 100 + +str; console.log(total); // 100 + 150 = 250
ここでは意図的に数値化して足し算をしていますが、一瞬「足し算が二つ？」と誤読されそうですよね。
慣れてくればスッキリ書けますが、チーム方針やコーディング規約で明示的に Number() を使うほうが望ましい場合もあるでしょう。
文字列を数値変換する際によくある注意点
ここまでで、代表的な変換方法の違いがわかったと思います。
ただし、実際に開発で使う場合は、NaNの扱いや数値変換の失敗といったトラブルがつきものです。
NaNの扱い
NaN (Not a Number) はJavaScript特有の「数値でないこと」を示す値です。
文字列の中身が数値として解釈できない場合に発生しますが、このNaNは条件分岐などで少しクセがあります。
console.log(NaN === NaN); // false console.log(isNaN(NaN)); // true console.log(Number.isNaN(NaN)); // true
NaN === NaN が false になるのはよく知られたトラップで、数値でないもの同士を比較しても常にfalseとなります。
そこで、NaNを判定するときは isNaN() あるいは Number.isNaN() のような専用の関数を使いましょう。
NaNのまま計算処理を進めると、さらに計算結果がNaNになるなど混乱を引き起こします。
入力データのバリデーションを行い、NaNが含まれた場合は早めにユーザーにエラーメッセージを返すなどの対応が必要です。
数値変換に失敗するケース
特に初学者が意識しておくべきは、次のようなケースです。
- 半角英字や記号が混じっている
- 先頭に空白があるが環境依存でパースできない
- 小数点が複数あるなど不正フォーマット
こうしたケースでは、parseInt や parseFloat だと一部の文字列がパースされ、残りは無視される可能性があります。
逆に、Number や +演算子 だとすべてを数値として認識できない場合にNaNが返されます。
数値変換で想定通りに動作しないときは、文字列が本当に適切な形式を満たしているかどうか、改めてチェックしてみるとよいでしょう。
実務における活用例
実務では、どのようなタイミングで「文字列を数値に変換する」処理が必要になるのでしょうか。
ここでは代表的なシチュエーションをいくつか挙げてみます。
フォームから取得した文字列
たとえばECサイトのカート処理で、商品数量やクーポン割引額などをユーザーに入力してもらう場合、値は文字列として受け取ります。
数量は整数として、割引額は小数点を含む可能性がある数値として処理するかもしれません。
// 商品数量: parseInt const quantityInput = document.getElementById("quantity").value; const quantity = parseInt(quantityInput, 10); // 割引額: parseFloat const discountInput = document.getElementById("discount").value; const discount = parseFloat(discountInput); // 合計金額 const pricePerItem = 500; const total = (pricePerItem * quantity) - discount;
入力値をそのまま計算に利用すると文字列結合が起きてしまい、全く異なる結果を返すことがあります。
このように、値の性質に合わせて変換方法を選ぶと混乱が少なくなるでしょう。
JSONデータからの取り出し
多くのWeb APIはJSON形式でデータを返しますが、数値を文字列として扱う場合も少なくありません。
そのため、取得後に数値が必要であれば明示的な変換を行う必要があります。
fetch("https://example.com/api/data") .then(response => response.json()) .then(data => { // data 内に数値を文字列として返すプロパティが含まれているとする const value = Number(data.valueString); if (Number.isNaN(value)) { console.log("数値変換に失敗しました"); } else { console.log("有効な数値です:", value); } });
APIの仕様が変更され、文字列だったプロパティが突然数値に変わるケースもあるかもしれません。
実務では、こうした型の変化に対する耐性を持たせるために、ひと手間かけた検証を行うことが求められます。
APIレスポンスからの変換
上記のJSON取り出しと似ていますが、外部のAPI連携では大きな数値を使う可能性もあります。
大きな数値であっても文字列のまま扱うと計算できませんし、そのまま Number() に通すとオーバーフローになる恐れがあります。
必要に応じてBigIntや文字列のまま比較演算をするなど、ケースバイケースで慎重に選択することが大事です。
文字列と数値を行き来するユースケース
文字列を数値に変換する場面があれば、その逆に数値を文字列に変換するケースも多々あります。
ユーザーインターフェースで表示するときや、データベースに保存するときなどに必要になるかもしれません。
UI操作との連携
ボタンやスライダーで数値をインクリメントするとき、内部では数値を文字列に戻す処理が走ることがあります。
また、エラーメッセージやラベルで数値を表示するとき、文字列化が必要です。
let count = 0; function increment() { count++; document.getElementById("counterValue").textContent = String(count); }
ここでは String() で数値を文字列化していますが、実際のところ "" + count のように連結しても文字列になるため、複数の方法が存在します。
ただし、文字列の結合が意図しないときはバグを生みやすいので、あらかじめ変換を明示する習慣をつけると安全です。
計算結果のフォーマット
数値の計算結果をユーザーに見せるとき、カンマ区切りにしたり小数点の桁数を調整したりすることが多いです。
その際に一旦数値で計算し終わったら、再び文字列として整形を行います。
const rawValue = 1234567.89; const formatted = rawValue.toLocaleString(); console.log(formatted); // "1,234,567.89" など、実行環境のロケールに応じて表示される
たとえば数値を表示したいのに、誤って文字列のまま計算を続けるとバグの原因になります。
こうした場面でも「数値化→計算→必要に応じて文字列化」のステップをきちんと踏むのが理想的です。
大きな数値を扱う方法（BigIntの紹介）
JavaScriptでは標準仕様として、BigInt 型が追加されています。
非常に大きな整数を扱う必要がある場合に活用できるため、金融計算や暗号分野などで注目されています。
BigIntの概要
BigIntは通常のnumber型が扱える範囲（約1.8×10^308）を超える整数を表現可能です。
ただし、小数点を含む浮動小数点数には対応していません。
const bigNumber = 123456789012345678901234567890n; console.log(bigNumber); // 123456789012345678901234567890n
末尾に n をつけることでBigIntとして扱うことができます。
BigInt同士なら算術演算が可能ですが、number型との混在計算は許されないので注意が必要です。
BigIntと文字列変換
BigIntを文字列に変換したい場合や、逆に文字列からBigIntを生成したい場合もあります。
const bigString = "999999999999999999999999999999"; const bigValue = BigInt(bigString); console.log(bigValue + 1n); // 1000000000000000000000000000000n
ここでは BigInt(文字列) というコンストラクタのような形式を利用し、文字列を直接大きな整数に変換しています。
通常の Number() では扱えない巨大な値を手軽に扱えるのが利点ですが、parseIntやparseFloatでは精度を失う可能性が高いので注意が必要です。
もし大きな値を扱う予定があるなら、BigIntを検討するとよいでしょう。
ただし、BigIntは一般的なnumber型とは互換性がない場合があり、混在計算もエラーになるので、使いどころを見極める必要があります。
まとめ
ここまで、JavaScriptで文字列を数値に変換する方法を一通り見てきました。
parseInt や parseFloat は部分的にパースをしてくれる反面、入力フォーマットが不正でもある程度変換を続行するために想定外の結果になることがあります。
Number や 単項プラス演算子（+）は、文字列全体が数値として正しいかどうかを厳密にチェックし、少しでも不正があればNaNを返すという特徴があります。
また、実務のさまざまなシーンで文字列の数値変換は活躍します。
フォーム入力やAPIレスポンスから得た文字列を正しく数値に変換することで、後の処理でバグを起こしにくくなるでしょう。
特にエラー処理やNaNの判定はつい見落としがちなので、データを受け取った時点でバリデーションを行うなどの工夫をしてみてください。
さらに、大きな整数を扱う場面ではBigIntも選択肢に入るようになりました。
number型では表現しきれない巨大な値を扱う場合には、BigIntによる変換手順もぜひ覚えておくと役立ちます。
いろいろなシチュエーションで、必要に応じて適切な変換方法を選択するのがポイントです。
最終的には、文字列と数値をスムーズに行き来できるスキルが身につけば、さらに高度なアプリケーション開発へと進む下地が整います。
ぜひ、今後のJavaScript学習やプロジェクト実装で活用してみてください。