JavaScriptで数値と文字列を相互変換する方法：手法別の使い分けと注意点

JavaScriptを扱う開発において、データの型を正しく管理することは、プログラムの安定性を確保するための極めて重要な要素です。

JavaScriptは動的型付け言語であり、変数の型が実行時に決定されるため、数値と文字列の変換が頻繁に発生します。

Webアプリケーションのフォーム入力から得られる値は通常文字列として扱われますが、計算を行うためには数値へと変換しなければなりません。

逆に、計算結果を画面に表示したり、URLのクエリパラメータに含めたりする際には、数値を文字列に変換する必要があります。

2026年現在の開発環境においても、これらの変換処理における細かな仕様の違いがバグの原因となるケースは少なくありません。

本記事では、JavaScriptにおける数値と文字列の相互変換について、各手法の特徴、パフォーマンス、および実務で役立つ注意点を詳しく解説します。

数値から文字列へ変換する主要な手法

数値を文字列に変換する方法は複数存在しますが、用途に応じて最適なものを選ぶことが推奨されます。

一般的に使用されるのは、String()関数、toString()メソッド、およびテンプレートリテラルです。

String()関数による変換

String()関数は、引数に渡された値を文字列に変換する最も汎用的な方法です。

この関数の最大の特徴は、nullやundefinedを引数に渡してもエラーにならず、そのまま文字列として返してくれる点にあります。

const num = 123;
const str = String(num); // "123"

const nullValue = null;
const nullStr = String(nullValue); // "null"

console.log(typeof str);
console.log(nullStr);

string
"null"

toString()メソッドによる変換

多くのJavaScriptオブジェクトは、自分自身を文字列として表現するためのtoString()メソッドを持っています。

数値型のリテラルに対して直接呼び出す場合は、ドットが小数点と誤認されないよう、(123).toString()のように記述するか、変数を経由させる必要があります。

ただし、変数の中身がnullやundefinedである場合にこのメソッドを呼び出すと、TypeErrorが発生するため注意が必要です。

const count = 100;
const countStr = count.toString();

// 基数を指定して変換することも可能（2進数、16進数など）
const hexStr = (255).toString(16); // "ff"

console.log(countStr);
console.log(hexStr);

"100"
"ff"

テンプレートリテラルによる変換

モダンな開発で非常によく使われるのが、バッククォートを用いたテンプレートリテラルです。

`${value}`という形式で記述することで、変数の値を直感的に文字列内に埋め込むことができます。

可読性が高く、他の文字列と結合しながら変換したい場合に最も適した手法と言えます。

const price = 500;
const message = `価格は${price}円です。`;

console.log(message);
console.log(typeof message);

価格は500円です。
string

文字列から数値へ変換する主要な手法

ユーザーからの入力値やAPIからのレスポンスを計算に使用する場合、文字列を数値に変換する処理が不可欠です。

変換方法によって、小数の扱い、不正な文字が含まれる場合の挙動が異なります。

Number()関数による厳格な変換

Number()関数は、文字列全体を一つの数値として評価しようと試みます。

もし文字列の中に数値として解釈できない文字が一つでも含まれている場合、結果はNaN（Not a Number）となります。

「100px」のような単位付きの文字列を数値化することはできないため、厳格なバリデーションが必要な場面に適しています。

const val1 = Number("123");   // 123
const val2 = Number("12.3");  // 12.3
const val3 = Number("123px"); // NaN

console.log(val1);
console.log(val3);

123
NaN

parseInt()とparseFloat()による解析

parseInt()は整数への変換、parseFloat()は浮動小数点数への変換に使用されます。

これらの関数は、文字列の先頭から数値をスキャンし、数値として解釈できなくなった時点で処理を終了してそれまでの値を返します。

そのため、「100px」のような文字列から「100」だけを取り出すことが可能です。

const size = "100px";
const intSize = parseInt(size, 10); // 第2引数には必ず基数（10進数なら10）を指定する

const price = "19.80 dollars";
const floatPrice = parseFloat(price);

console.log(intSize);
console.log(floatPrice);

100
19.8

単項プラス演算子（+）による高速な変換

最も簡潔に記述できるのが、文字列の前にプラス記号を置く「単項プラス演算子」です。

内部的な挙動はNumber()関数とほぼ同じですが、記述が短いため、パフォーマンスを重視するループ内などで好んで使用される傾向があります。

しかし、コードの意図が初学者に伝わりにくいというデメリットもあるため、チーム開発では使用の是非を検討すべきです。

const input = "42";
const result = +input;

console.log(result);
console.log(typeof result);

42
number

手法別の動作比較表

入力される値によって、各変換手法の結果がどのように異なるかを整理しました。

以下の表を参考に、予期せぬNaNや0の発生を防いでください。

変換時における注意点とベストプラクティス

JavaScriptの型変換には、初学者が陥りやすい落とし穴がいくつか存在します。

安全なプログラムを書くためには、変換後の値が妥当であるかを常に検証する必要があります。

NaNのチェックにはNumber.isNaN()を使用する

文字列を数値に変換しようとして失敗した場合、JavaScriptはNaNを返します。

NaNは自分自身と等しくないという特殊な性質を持っているため、if (result === NaN)という条件式は常にfalseになります。

値がNaNであるかを判定するには、必ずNumber.isNaN()メソッドを使用してください。

const score = Number("invalid");

if (Number.isNaN(score)) {
    console.log("変換に失敗しました。数値を入力してください。");
}

変換に失敗しました。数値を入力してください。

暗黙的な型変換を避ける

JavaScriptでは、数値と文字列を足し算すると、数値が自動的に文字列へ変換されて結合されます。

一方で、引き算や掛け算を行うと、文字列が数値へ変換されて計算されます。

このような「暗黙的な型変換」に頼ったコードは、バグの温床となりやすいため避けるべきです。

const a = "10";
const b = 5;

console.log(a + b); // "105" (文字列結合)
console.log(a - b); // 5 (数値計算)

"105"
5

BigIntと数値の混在に注意

2026年現在のモダンな開発では、非常に大きな整数を扱うためにBigIntが使われる場面も増えています。

通常の数値（Number型）とBigIntを直接演算することはできず、変換が必要になります。

文字列からBigIntへの変換はBigInt("100")のように行いますが、小数を含む文字列を渡すとエラーになる点に留意してください。

const bigNum = BigInt("9007199254740991");
const normalNum = 100;

// console.log(bigNum + normalNum); // TypeErrorが発生する

const result = bigNum + BigInt(normalNum);
console.log(result.toString());

"9007199254741091"

実務での使い分け指針

どの手法を使うべきか迷った際は、以下のガイドラインを参考にしてください。

数値を文字列にする場合

1. 基本： String(value)を使用しましょう。安全で明示的です。
2. 文章の組み立て： テンプレートリテラル `${value}` を使用しましょう。
3. 特定のフォーマット（通貨など）： Intl.NumberFormatオブジェクトを活用すると、国別の通貨表示や桁区切りを簡単に実現できます。

文字列を数値にする場合

1. 基本： Number(value)を使用し、入力全体が数値であることを保証しましょう。
2. 単位付き文字列： parseInt(value, 10)を使用して、数値部分だけを抽出しましょう。
3. 非常に大きな整数： BigInt(value)を検討しましょう。

特にWebフォームのバリデーションにおいては、変換前の値が空文字やスペースでないかを確認する処理を組み合わせるのが定石です。

Number("")が0を返す挙動は、多くの場合、未入力（nullとして扱いたい）を0として誤認させるため、事前のトリム処理や空チェックが欠かせません。

まとめ

JavaScriptにおける数値と文字列の変換は、一見単純ですが、その裏には多くの仕様上の挙動が隠されています。

String()やNumber()といったグローバル関数による明示的な変換を基本とすることで、コードの可読性は向上し、予期せぬバグを未然に防ぐことができます。

特にparseInt()を使用する際の基数指定や、NaN判定におけるNumber.isNaN()の徹底は、プロフェッショナルな開発において必須の知識です。

2026年の開発環境においても、これらの基本を忠実に守ることが、堅牢なフロントエンドおよびバックエンド（Node.js等）アプリケーションを構築するための第一歩となります。

まずは、今回紹介した各手法のメリット・デメリットを整理し、自身のプロジェクトに最適な変換ルールを適用してみてください。