【JavaScript(JS)】String(x)とx.toString()はどっちを使うべき？

こんにちは！
なかむぅです。

JSのコードを見ていると、文字列変換でString(x)を使っている時とx.toString()を使っているときがあって

って感じだったので調べてみました。

String(x)とx.toString()の違い

JavaScriptで文字列に変換したい時は、String(x)とx.toString()のどちらでも変換することができます。
ではこの2つにはどのような違いがあるのでしょうか。

2つの変換方法の大きな違いはnullやundefinedのときにエラーになるかならないかです。

たとえば、画面から値を受け取った時に、値が取れずにnullが入ってきたとしましょう。
すると、そのnullが入った変数などをString()で変換すると、文字列の"null"として扱われてしまいます。

しかし、toString()とすることで、nullにはtoStringプロパティが存在しないためエラーが起きます。

const str = null;
String(str); // 文字列"null"になる
str.toString(); //　エラーが発生

エラーが起これば問題に気づくことができるので、toString()を使う方が安全ということですね♪

String(x)も結局toString()呼び出してる説

そもそもString()に引数を渡した時はどのような動作をするのでしょうか。

実は、String()に引数を渡すとtoStringを呼び出します。
そして、toStringがnullやundefinedの場合はvalueOfを呼び出します。

って感じですが、たとえば以下のようなtoStringとvalueOf、hairOffというプロパティを持つオブジェクトがあるとしましょう。

const obj = {
	toString: () => "hoge",
	valueOf: () => "piyo",
	hairOff: () => "hage"
};

このオブジェクトobjをString()の引数に渡すと次のようなことが起こります。

const obj = {
	toString: () => "hoge",
	valueOf: () => "piyo",
	hairOff: () => "hage"
};

// hoge
console.log(String(obj));

obj.toString = null;
// piyo
console.log(String(obj));

obj.valueOf = null;
// TypeError
console.log(String(obj));

toStringの順序が変わってもtoStringが呼び出されるので、上から呼び出されてるわけでもありません。
暗黙的にtoStringが呼び出されていることになります。

ちなみに、toStringプロパティ自体ががない場合はvalueOfがあるないにかかわらず[object Object]を返します。

const obj = {
	valueOf: () => "piyo",
	hairOff: () => "hage"
};

// [object Object]
console.log(String(obj));

結論、x.toString()が安全(まとめ)

String(x)かx.toString()なら、x.toString()のほうがnullやundefinedが来たときにエラーで気づけて安心という結論にいたりました。

ただ、どちらにしてもnullやundefinedのチェックは必要かなと思います。
そう考えるとどっちでもいいような気がしますね（笑）

以上、String(x)とx.toString()の違いについてでした！

と思った方はコメントいただけると嬉しいです。

最後までお読みいただきありがとうございました！