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

生徒

「先生、JavaScriptで数字や他の値を文字列に変換するとき、toStringとStringって何が違うんですか？」

先生

「いい質問ですね。toStringは値の持つメソッドで、StringはJavaScriptの関数です。両方とも文字列に変換しますが、使い方や挙動に違いがありますよ。」

生徒

「なるほど！具体的にどう違うのか教えてください。」

先生

「では、基本から詳しく説明しましょう！」

1. toStringメソッドとは？

toStringは、JavaScriptの「オブジェクト」や「値」にもともと備わっているメソッド（特別な関数）です。このメソッドを使うと、その値を文字列に変換できます。

例えば、数字を文字列に変えたいときに使います。


const num = 123;
console.log(num.toString());  // "123"

このように、toStringは「値.toString()」と書いて使います。

ただし注意点があります。nullやundefinedという「値がない状態」のものにはtoStringメソッドがないため、使うとエラーになります。

2. String関数とは？

StringはJavaScriptの組み込み関数で、引数として渡した値を文字列に変換して返します。使い方は関数のようにString(値)と書きます。


console.log(String(123));      // "123"
console.log(String(null));     // "null"
console.log(String(undefined));// "undefined"

toStringと違い、nullやundefinedでもエラーにならず、文字列として変換できます。

3. toStringとStringの違いを簡単にまとめると？

toStringは値のメソッド。値が持っていないと使えない。
StringはJavaScriptの関数。どんな値でも文字列に変換できる。
toStringはnullやundefinedでエラーになるが、Stringは安全に文字列に変換できる。

4. 具体的な違いの例を見てみよう


// toStringの場合
try {
  console.log(null.toString());   // エラーになる
} catch(e) {
  console.log("エラー: toStringはnullでは使えません");
}

// String関数の場合
console.log(String(null));        // "null"
console.log(String(undefined));   // "undefined"

このように、String関数はより安全に使えます。

5. どちらを使うのが良い？

基本的には、何が渡ってくるか分からない場合や安全に文字列に変換したいときはString()関数を使うのがおすすめです。

逆に、特定のオブジェクトの文字列の形を取得したいときや、自分で定義したオブジェクトのtoStringを活用したい場合はtoStringメソッドを使います。

6. まとめると

toStringは値に付属しているメソッド。値がないと使えない。
StringはJavaScriptの関数。どんな値でも文字列に変換可能。
安全に文字列変換したいならString()関数が便利。
オブジェクトごとに文字列の見せ方を変えたい場合はtoStringメソッドをカスタマイズできる。

7. 実践例：数字を文字列に変換して連結する


const number = 100;
const text1 = number.toString() + "円";   // "100円"
const text2 = String(number) + "円";      // "100円"

console.log(text1);
console.log(text2);

どちらも数字を文字列にして「円」という文字をつなげています。

まとめ

JavaScriptで値を文字列に変換する方法にはいくつかありますが、なかでもとくに使われるのがtoStringとStringの二つです。どちらも結果としては似ていますが、それぞれの性質や使い道を丁寧に理解しておくと、予期しないエラーを防げたり、安心して処理を組み立てられたりと、多くの場面で役立ってくれます。今回の記事で取り上げた内容を振り返りながら、実践でもよく使う場面を想定して、もう一度ゆっくり整理していきましょう。特に、値が必ず存在するとは限らない処理や、ユーザー入力を扱うコードでは、変換時の細かな違いが思わぬトラブルにつながることもあります。だからこそ、nullやundefinedでどう挙動が変わるのか、どんなときにどちらを選べばよいのか、基礎をしっかり押さえておくことはとても大切です。ここでは、実際の場面でも使えるよう、例を交えながら理解を深められるようにまとめを構成しています。実務でも学習でも、自然に使い分けられるようになると、文字列変換に伴う戸惑いが少なくなり、より落ち着いてプログラムを書くことができるはずです。

toStringで変換するときの考え方

toStringは値が持っているメソッドであり、数値や配列、オブジェクトなど、多くのデータ型が独自の形で文字列化される仕組みを備えています。そのため、特定のデータ型に応じた形式で文字列を得たい場合にとても便利です。特に、数値から基数変換を使って異なる形式の文字列にしたいときには、とてもよく使われる方法です。しかし、nullやundefinedのような「値が存在しない状態」ではこのメソッドが存在しないため、呼び出すとエラーになります。この特性を理解しておくと、安全にコードを書き進めることができます。

    
const number = 255;
console.log(number.toString(16)); // "ff"  （十六進数）

String関数が安心して使える理由

一方でString()は、どんな値でも必ず文字列に変換して返すという特徴を持っています。たとえnullやundefinedであっても、新しい文字列として変換してくれるため、予期しないエラーが出にくく、安全に処理を進められるという利点があります。入力値が必ずしも明示されない状況や、予測しづらいデータを扱う処理では、String()を使うことで想定外のエラーを防ぎやすくなります。

    
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String(500));       // "500"

両者の違いを見極めるコツ

コードを書く中で、toStringとStringを自然に使い分けできるようになるためには、それぞれがどんな場面で適しているのか理解しておくことが重要です。例えば、データ型に合わせた形で文字列化したい、あるいは基数変換を行いたい場合にはtoStringが優秀です。一方で、どんな値が来てもひとまず安全に文字列に変換したい場合には、String()が向いています。このように両者の特性を理解しておくことで、コード全体の安定性が増し、トラブルに強い実装ができるようになります。

    
let x = undefined;
let safeText = String(x);  // "undefined" として安全に扱える
console.log(safeText);

実務で役立つ組み合わせ例

実際の開発では、文字列変換後にさらに文字列同士をつなげたり、メッセージとして整形してユーザーに表示したりする場面がよくあります。特にAPIレスポンスやフォーム入力を取り扱う場合には、値を確認しながら適切な変換処理を行うことが求められます。以下は、さまざまな値を安全に文字列化しつつ、メッセージとして組み立てる例です。

    
function createMessage(value) {
  const safe = String(value);
  return `入力された値は「${safe}」です。`;
}

console.log(createMessage(123));
console.log(createMessage(null));
console.log(createMessage(undefined));

このように、文字列変換の基本を理解しておくと、より自然にプログラムを組むことができるようになります。細かい挙動も知っておくことで、自信を持って安全なコードを書けるようになります。

先生と生徒の振り返り会話

生徒

「今回の内容で、同じように見えるのに使い方や挙動が違う理由がよくわかりました。とくに、nullやundefinedでエラーになるかどうかの違いが大きいですね。」

先生

「そうですね。実際の開発では予期しない値が渡ってくる場面が多く、そういったときに安全に変換できるかどうかがとても重要になります。」

生徒

「たしかに、エラーで止まってしまうよりも、文字列化できるほうが安心です。値に応じて使い分けられるようになった気がします。」

先生

「その調子です。今回の違いを理解しておけば、いろいろな値を扱う処理でも落ち着いて対応できるようになりますよ。」