JavaScriptで数値と文字列を相互変換する方法｜モダンな記述と注意点

JavaScriptというプログラミング言語において、データの型を正しく扱うことは、バグの少ない堅牢なアプリケーションを開発するための第一歩です。

特に、数値型（Number）と文字列型（String）の相互変換は、ユーザー入力を処理したり、計算結果を表示したりする際に頻繁に発生する操作です。

JavaScriptは動的型付け言語であり、暗黙的な型変換が行われることもありますが、意図しない挙動を防ぐためには明示的な変換方法をマスターしておく必要があります。

本記事では、モダンなJavaScriptにおける数値と文字列の変換手法について、それぞれの特徴と注意点を詳しく解説していきます。

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

数値を文字列に変換する方法はいくつか存在しますが、用途に応じて最適な手法を選択することが重要です。

まずは、最も基本的かつ汎用性の高い手法から見ていきましょう。

String関数による明示的な変換

String()関数を使用する方法は、値を引数に渡すだけで文字列に変換できるため、非常に直感的です。

この方法は、対象が null や undefined であってもエラーを投げずに文字列として処理してくれるため、安全性が高いというメリットがあります。

// String関数を使用した変換
const num = 123;
const str = String(num);

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

"string"
"123"

toStringメソッドによる変換

多くのJavaScriptオブジェクトが持っている toString() メソッドを使用することも一般的です。

このメソッドの特徴は、引数に基数（進数）を指定できる点にあります。

例えば、数値を2進数や16進数の文字列として出力したい場合には、このメソッドが最適です。

// toStringメソッドを使用した変換
const count = 255;
const hexString = count.toString(16);

console.log(hexString);

"ff"

ただし、変数が null や undefined の場合に toString() を呼び出すとタイプエラーが発生するため注意が必要です。

テンプレートリテラルを活用したモダンな記述

ES6以降で導入されたテンプレートリテラルを使用すると、文字列の中に数値を埋め込む形で変換を行うことができます。

バッククォート（`）で囲み、${}の中に数値を記述するだけで、自動的に文字列として結合されます。

コードの可読性が高く、モダンな開発現場では最も推奨される手法の一つです。

// テンプレートリテラルによる変換
const price = 500;
const message = `価格は${price}円です。`;

console.log(message);

"価格は500円です。"

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

Webアプリケーションにおいて、フォームから取得した値は常に文字列として扱われます。

そのため、計算を行う前には必ず数値型への変換が必要になります。

Number関数による厳格な変換

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

空文字を渡すと 0 になり、数値として解釈できない文字が含まれている場合は NaN（Not a Number）を返します。

「数値のみで構成された文字列」を確実に変換したい場合に適しています。

// Number関数を使用した変換
const input = "10.5";
const value = Number(input);

console.log(value);

10.5

parseIntとparseFloatによる解析

parseInt() は整数に、parseFloat() は浮動小数点数に変換するための関数です。

これらの関数は、文字列の先頭から数字として解釈できる部分までを取り出すという特徴があります。

例えば、”100px” という文字列から数値の 100 だけを抽出したい場合に非常に便利です。

// 単位付き文字列の変換
const width = "200px";
const numWidth = parseInt(width, 10);

console.log(numWidth);

200

parseInt() を使用する際は、第二引数に基数（10進数なら10）を必ず指定することがベストプラクティスとされています。

単項プラス演算子による簡潔な変換

文字列の前に + を置くだけで数値に変換できる「単項プラス演算子」という手法もあります。

記述が非常に短くなるため、コードを簡潔に保ちたい場合に好んで使われます。

動作自体は Number() 関数とほぼ同等ですが、初見では意図が伝わりにくいこともあるため、チーム開発では使用ルールを明確にするのが良いでしょう。

// 単項プラス演算子による変換
const strPrice = "1200";
const numPrice = +strPrice;

console.log(numPrice);

1200

型変換における注意点とトラブルシューティング

型変換は単純に見えますが、JavaScript特有の挙動によって予期せぬバグを引き起こすことがあります。

NaN（Not a Number）の判定方法

変換に失敗した場合、JavaScriptはエラーを出すのではなく NaN を返すことが多いです。

NaN は自分自身との比較（NaN === NaN）すら false になるという特殊な性質を持っています。

そのため、変換結果が正しい数値であるかを判定するには Number.isNaN() メソッドを使用する必要があります。

// NaNの判定
const result = Number("abc");

if (Number.isNaN(result)) {
    console.log("変換に失敗しました");
}

"変換に失敗しました"

暗黙的な型変換の罠

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

一方で、引き算（-）や掛け算（*）では、文字列が数値へと変換される挙動を示します。

このような暗黙的な型変換に頼ったコードは可読性を下げ、バグの温床となるため避けるべきです。

変換方法の使い分けガイドライン

状況に応じてどの方法を使うべきか迷った際は、以下の指針を参考にしてください。

まず、最も推奨されるのは明示的な変換です。

数値から文字列にする場合

• 基本的には String(value) を使用する。
• 文字列の中に変数を組み込むなら テンプレートリテラル を使用する。
• 16進数などの特殊な形式が必要な場合のみ toString(radix) を使用する。

文字列から数値にする場合

• 入力値が純粋な数字のみを想定しているなら Number(str) を使用する。
• “100px” や “10.5kg” のように単位が含まれる可能性があるなら parseInt または parseFloat を使用する。
• 極限までコードを短くしたい、かつ型変換が明確な文脈であれば +str を使用する。

BigIntと文字列の変換

通常の Number 型では扱いきれない巨大な整数を扱う BigInt についても触れておきましょう。

BigInt 型を数値型（Number）と混ぜて計算することはできませんが、文字列への変換は同様に行えます。

文字列から BigInt を生成する場合は、BigInt() コンストラクタを使用します。

// BigIntの変換
const largeNumStr = "9007199254740991";
const bigIntVal = BigInt(largeNumStr);

console.log(bigIntVal + 1n);

9007199254740992n

まとめ

JavaScriptにおける数値と文字列の相互変換は、一見シンプルですが奥が深いテーマです。

String() や Number() といったグローバル関数を用いた明示的な変換を基本としつつ、テンプレートリテラルや parseInt などの便利な手法を適切に使い分けることが大切です。

特に、変換に失敗した際の NaN の扱いや、暗黙的な型変換による意図しない挙動には常に注意を払う必要があります。

本記事で紹介したモダンな記述方法を意識することで、より安全で読みやすいJavaScriptコードを記述できるようになります。

日々のコーディングにおいて、これらの変換ルールを正確に使い分け、トラブルのない開発を目指しましょう。