JavaScriptでオブジェクトを文字列に変換する3つの方法:Object.toString、JSON.stringify、手動での連結


Object.toString メソッドは、JavaScriptオブジェクトを文字列に変換するために使用されます。オブジェクト型を含むあらゆる種類の値に適用できます。デフォルトでは、メソッドはオブジェクトの型を表す文字列を返します。たとえば、数値オブジェクトの場合、"[object Number]" を返します。

使用方法

Object.toString メソッドは、オブジェクトに直接ドット記法で呼び出すことができます。

const obj = { name: "John", age: 30 };
console.log(obj.toString()); // "[object Object]"

カスタマイズ

オブジェクトの toString メソッドの動作は、Symbol.toStringTag プロパティを定義することでカスタマイズできます。このプロパティには、オブジェクトを表す文字列を割り当てることができます。

const obj = { name: "John", age: 30 };
obj[Symbol.toStringTag] = "MyCustomObject";
console.log(obj.toString()); // "MyCustomObject"

注意点

ほとんどの場合、Object.toString メソッドを明示的に呼び出す必要はありません。JavaScript エンジンは、オブジェクトを文字列に変換する必要がある場合に自動的に呼び出します。

代替手段

オブジェクトを文字列に変換するには、JSON.stringify メソッドを使用することもできます。このメソッドは、オブジェクトとそのプロパティをより詳細な JSON 形式に変換します。

const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // "{\"name\":\"John\",\"age\":30}"


const num = 123;
const str = "Hello";
const bool = true;
const obj = { name: "John", age: 30 };
const arr = [1, 2, 3];

console.log(num.toString()); // "123"
console.log(str.toString()); // "Hello"
console.log(bool.toString()); // "true"
console.log(obj.toString()); // "[object Object]"
console.log(arr.toString()); // "1,2,3"

例 2: Symbol.toStringTag を使用してカスタマイズ

この例では、Symbol.toStringTag プロパティを使用して、オブジェクトの toString メソッドの動作をカスタマイズします。

const obj = { name: "John", age: 30 };
obj[Symbol.toStringTag] = "MyCustomObject";

console.log(obj.toString()); // "MyCustomObject"

例 3: JSON.stringify メソッドを使用

この例では、JSON.stringify メソッドを使用して、オブジェクトをより詳細な JSON 形式に変換します。

const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // "{\"name\":\"John\",\"age\":30}"


JSON.stringify

利点

  • 多くのライブラリやAPIでJSON形式がサポートされている
  • ネストされたオブジェクトや配列も処理できる
  • オブジェクトをより詳細なJSON形式で表現できる

欠点

  • プレーンな文字列に変換したい場合は、余分な情報が含まれてしまう
  • Object.toStringよりも処理速度が遅い場合がある


const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // "{\"name\":\"John\",\"age\":30}"

手動での文字列連結

利点

  • 出力される文字列を完全に制御できる
  • 最も軽量で高速な方法

欠点

  • ネストされたオブジェクトや配列を処理するには、自分で再帰処理を実装する必要がある
  • 複雑なオブジェクトの場合は、コードが煩雑になる


const obj = { name: "John", age: 30 };
const str = "Name: " + obj.name + ", Age: " + obj.age;
console.log(str); // "Name: John, Age: 30"

toStringメソッドの再定義

利点

  • オブジェクトごとに文字列表現をカスタマイズできる

欠点

  • コードが読みづらくなる可能性がある
  • 他のオブジェクトと互換性がなくなる可能性がある


class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  toString() {
    return `[Person: ${this.name}, ${this.age}]`;
  }
}

const person = new Person("John", 30);
console.log(person.toString()); // "[Person: John, 30]"

ライブラリの利用

利点

  • さまざまな機能を利用できる
  • コードを簡潔に記述できる

欠点

  • すべての環境で利用できるわけではない
  • ライブラリの追加読み込みが必要


const lodash = require('lodash');
const obj = { name: "John", age: 30 };
const str = lodash.toString(obj);
console.log(str); // "[object Object]"

どの代替方法が最適かは、状況によって異なります。シンプルな文字列表現が必要な場合は、JSON.stringifyよりも手動での文字列連結の方が高速で効率的です。複雑なオブジェクトを表現する場合は、JSON.stringifyの方が適切かもしれません。オブジェクトごとに文字列表現をカスタマイズする必要がある場合は、toStringメソッドの再定義を検討してください。ライブラリを使用すると、コードを簡潔に記述できますが、追加の読み込みが必要になります。

  • 互換性
  • コードの簡潔性と保守性
  • パフォーマンス要件
  • 出力される文字列の形式要件