先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで数字を文字として扱いたいときはどうすればいいですか？」

先生

「良い質問ですね。JavaScriptでは、数値を文字列に変換する方法がいくつかあります。特によく使われるのがtoString()メソッドとString()関数です。」

生徒

「どちらを使っても同じ結果になるんですか？」

先生

「似ていますが、少し違いがあります。それぞれの使い方を順番に見ていきましょう。」

1. 数値を文字列に変換するとは？

まず、「数値を文字列に変換する」とは何かを理解しましょう。
たとえば、数字の123は「計算できる数値」ですが、これを「文字」として扱うと、「123」という文字列になります。

これは、画面に表示したり、文字を結合したりするときに必要です。たとえば次のような場面です。


const num = 100;
console.log("合計は" + num + "円です");

このとき、JavaScriptは自動的にnumを文字列に変換してくれますが、自分で変換したいときもあります。そのときに使うのがtoString()メソッドとString()関数です。

2. toString()メソッドを使う方法

toString()メソッドは、数値を文字列に変えるための代表的な方法です。数値の後にドット（.）をつけて使います。


const num = 123;
const str = num.toString();
console.log(str);
console.log(typeof str);

実行結果は次のようになります。


123
string

typeofは、値のデータ型を調べる演算子です。この結果から、numは「数値」でしたが、strは「文字列」に変換されたことが分かります。

このように、toString()は「数値オブジェクトのメソッド」として動作します。

もう一つの方法は、String()関数を使うやり方です。こちらは数値を()の中に入れるだけで文字列に変換してくれます。


const num = 456;
const str = String(num);
console.log(str);
console.log(typeof str);

実行結果は先ほどと同じです。


456
string

String()関数は、数値以外にも、真偽値（trueやfalse）、日付なども文字列に変換できます。


console.log(String(true));  // "true"
console.log(String(false)); // "false"
console.log(String(789));   // "789"

両方とも似たように使えますが、違いをしっかり理解しておきましょう。

次の例を見てみましょう。


let value = null;
console.log(String(value)); // "null"

// console.log(value.toString()); // エラーになる！

このように、toString()は「値が存在すること」が前提なので、値がない（nullやundefined）場合にはエラーになります。安全に変換したいときは、String()を使うのが安心です。

実際のプログラムでは、数値と文字列を組み合わせて表示したい場面がよくあります。例えば、商品の価格を画面に表示するときなどです。


const price = 1200;
const message = "商品の価格は " + price.toString() + " 円です。";
console.log(message);

実行結果は次のとおりです。


商品の価格は 1200 円です。

このように、数値を文字列に変換して結合することで、読みやすい文章を作ることができます。

toString()には、実は「進数（しんすう）」を指定できる便利な機能もあります。進数とは、数を表すときの基準のことです。たとえば、10進数（ふつうの数字）、2進数（コンピュータが使う数字）、16進数（色の指定などによく使う）などがあります。


const num = 255;
console.log(num.toString(2));  // 2進数（0と1）
console.log(num.toString(16)); // 16進数（0〜f）

実行結果は次のようになります。


11111111
ff

このように、toString()はただ文字列に変換するだけでなく、進数変換もできる便利なメソッドなのです。

基本的にはどちらを使っても問題ありませんが、次のように使い分けると良いです。

このように理解しておくと、バグを減らし、より安全なJavaScriptコードを書くことができます。