【JavaScript】String と toString の違い

文字列の変換は基本的に toString を使うようにしましょう。

String は想定外の値を返すことがあります。

今の現場において、以下のようなコードを見つけました。

const hoge: number | undefined = 0;
const fuga = String(hoge);

console.log(fuga);

ぱっと見めちゃめちゃ微妙なコードですが、JavaScript 的にも TypeScript 的にも何も問題ありません。

今回のケースでは hoge に 0 が格納されているため fuga には "0" が格納されます。

が、例えば以下のようなケースを考えてみると。

const hoge: number | undefined = undefined;
const fuga = String(hoge);

console.log(fuga);

こちらも JavaScript 的にも TypeScript 的にも何も問題ありません。

この場合 fuga には "undefined" が、つまり undefined という文字列が格納されてしまします。

で、この実装をした方は fuga に "undefined" という文字列を格納したかったわけではなかったようです。

恐らく hoge に undefined が格納されているケースに対応しきれず String を使って実装したようでした。

そのため、以下のように書けばひとまず問題は回避できるのですが。

const hoge: number | undefined = undefined;

if (typeof hoge === "number") {
  const fuga = String(hoge);

  console.log(fuga);
} else {
  // hoge に undefined が格納されている場合の処理を書く
}

そもそもなぜ元のような記述が可能でかつ通ってしまうのかと言いますと、String クラスのコンストラクターの引数の型が any なのが色々とアレです。

そのためそもそも String を使用せず toString を使用したほうが安全ということですね。

const hoge: number | undefined = undefined;
// hoge が undefined を許容しているため、型エラーが発生する
const fuga = hoge.toString();

console.log(fuga);

ということで、以下のように書くのがベターかなーと思います。

const hoge: number | undefined = undefined;

if (typeof hoge === "number") {
  const fuga = hoge.toString();

  console.log(fuga);
} else {
  // hoge に undefined が格納されている場合の処理を書く
}