const value = 12345;
// Concat Empty String
value + '';
// Template Strings
`${value}`;
// JSON.stringify
JSON.stringify(value);
// toString()
value.toString();
// String()
String(value);
// RESULT
// '12345'

5つの方法を比較する

さて、5つの方法を異なる値でテストしてみましょう。ここでは、これらをテストするための変数を紹介します。

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

空の文字列を連結する

string + ''; // 'hello'
number + ''; // '123'
boolean + ''; // 'true'
array + ''; // '1,2,3'
object + ''; // '[object Object]'
undefinedValue + ''; // 'undefined'
nullValue + ''; // 'null'
symbolValue + ''; //TypeError

ここから、このメソッドは、値が Symbol の場合に TypeError を投げることがわかります。それ以外の場合は、すべて良好です。

テンプレート文字列

`${string}`; // 'hello'
`${number}`; // '123'
`${boolean}`; // 'true'
`${array}`; // '1,2,3'
`${object}`; // '[object Object]'
`${undefinedValue}`; // 'undefined'
`${nullValue}`; // 'null'
`${symbolValue}`; //TypeError

Template String を使用した結果は、基本的に Concat Empty String と同じです。繰り返しになりますが、

TypeError が発生するため、Symbol を扱う場合には理想的な方法ではありません。

JSON.stringify()

JSON.stringify(string); // '"hello"'
JSON.stringify(number); // '123'
JSON.stringify(boolean); // 'true'
JSON.stringify(array); // '[1,"2",3]'
JSON.stringify(object); // '{"one":1}'
JSON.stringify(nullValue); // 'null'
JSON.stringify(symbolValue); // undefined
JSON.stringify(undefinedValue); // undefined

値を文字列に変換するためにJSON.stringifyを使用することは通常ありませんが、

一応、書いておきますが、利用可能なすべてのツールを知っているというのは良いことだと思います。

一つだけ、気づかないかもしれないので指摘しておきますが、実際の文字をの値に使うと、引用符付きの文字列に変わってしまいます。

これはJSONの文字列化の基本を知ることの重要性についての補足です。

toString()

string.toString(); // 'hello'
number.toString(); // '123'
boolean.toString(); // 'true'
array.toString(); // '1,2,3'
object.toString(); // '[object Object]'
symbolValue.toString(); // 'Symbol(123)'
//
undefinedValue.toString(); //TypeError
nullValue.toString(); //TypeError

そのため、値を文字列に変換したいときには、toString()とString()の戦いになります。

ただし、undefinedやnullの場合はエラーになります。だから、これには注意してください。

String()

String(string); // 'hello'
String(number); // '123'
String(boolean); // 'true'
String(array); // '1,2,3'
String(object); // '[object Object]'
String(symbolValue); // 'Symbol(123)'
String(undefinedValue); // 'undefined'
String(nullValue); // 'null'

さて、私たちは最良の方法を見つけたと思います🏆。

ご覧の通り、String()はnullとundefinedをうまく処理しています。エラーは発生しません。

結論 String() 🏆

今回は、それぞれのメソッドがどのように異なるタイプの値を扱うのかをご紹介しました。

願わくば、あなたがその違いを理解し、次にコードに取り組むときにどのツールを選ぶべきかを知っていただきたいと思います。

もし迷ったら、String()を使うのが良いでしょう。

リファレンス : 5 Ways to Convert a Value to String in JavaScript