JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのSymbol.toStringTagシンボルとは？オブジェクトの型説明をカスタマイズする方法

Symbol.toStringTagは、JavaScriptにおける「ウェルノウンシンボル（Well-known Symbols）」の一つで、最もよく知られているシンボルです。これは文字列値を持つプロパティであり、オブジェクトが生成される際に、そのオブジェクトの型に関する説明（description）を付与するために使用されます。

通常、Object.prototype.toString()メソッドを呼び出すと「[object Object]」のような文字列が返されますが、Symbol.toStringTagを独自に定義することで、この表示内容を自由にカスタマイズできます。

Symbol.toStringTagの基本的な特徴

  • 組み込みオブジェクト（Array、Map、Promiseなど）にも内部的に設定されており、toString()の結果に反映されます。
  • クラス内でgetterとして定義すれば、独自の型名を返すことができます。
  • Object.prototype.toString.call()による型判定処理にも影響を与えます。

コード例

以下は、Symbol.toStringTagを使用して、独自クラスのオブジェクトに対して文字列の説明を返すサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Symbol.toStringTag</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   div {
      font-size: 20px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>JavaScript Symbol.toStringTag シンボル</h1>
<div class="sample"></div>
<button class="Btn">クリックしてください</button>
<h3>
上のボタンをクリックすると、各オブジェクトの文字列による説明が表示されます
</h3>
<script>
   let fillEle = document.querySelector(".sample");
   class testClass {
      get [Symbol.toStringTag]() {
         return 'Testing';
      }
   }
   class helloClass {
      get [Symbol.toStringTag]() {
         return 'Hello World';
      }
   }
   let test = new testClass();
   let hello = new helloClass();
   document.querySelector(".Btn").addEventListener("click", () => {
      fillEle.innerHTML += 'testClass = ' + test.toString() + "<br>";
      fillEle.innerHTML += 'helloClass = ' + hello.toString() + "<br>";
   });
</script>
</body>
</html>

実行結果

ページを開いた直後の初期状態：

JavaScriptのSymbol.toStringTagシンボルとは？オブジェクトの型説明をカスタマイズする方法

「クリックしてください」ボタンを押すと、以下のように各オブジェクトに定義した文字列の説明が表示されます：

JavaScriptのSymbol.toStringTagシンボルとは？オブジェクトの型説明をカスタマイズする方法

この結果から分かるように、testClassのインスタンスは「[object Testing]」、「helloClass」のインスタンスは「[object Hello World]」という形式で出力されます。つまり、toString()のデフォルトの挙動がSymbol.toStringTagによって上書きされていることが確認できます。

まとめ

Symbol.toStringTagを活用することで、独自クラスのインスタンスでも組み込みオブジェクトと同様に、分かりやすい型情報を提供できるようになります。デバッグ時のログ出力や、Object.prototype.toString.call()を使った厳密な型判定を行うライブラリ開発などにおいて特に役立つ機能です。

  1. JavaScriptのWeakSetとは？特徴と主要メソッド、サンプルコードをわかりやすく解説

    JavaScriptのWeakSet（ウィークセット）は、オブジェクトを格納するためのコレクションです。Setと同様に、同じオブジェクトを重複して保存することはできません。WeakSetの主な特徴弱い参照で保持する：WeakSet内のオブジェクトへの参照が他に存在しなくなると、ガベージコレクションによって自動的にメモリから解放されます。そのため、メモリリークを防ぎたい場面で役立ちます。オブジェクトのみ格納可能：数値や文字列などのプリミティブ値は追加できません。列挙できない：Setのようなsizeプロパティや反復処理の仕組みを持たず、格納されている要素の一覧を取得することはできません。WeakS

  2. JavaScriptのSymbol（シンボル）とは？特徴と基本的な使い方を解説

    JavaScriptにおけるSymbol（シンボル）は、ES6（ECMAScript 2015）で新たに導入されたプリミティブデータ型の一つです。シンボルは呼び出されるたびに必ず完全に一意（ユニーク）な値を返し、組み込みのSymbol()ファクトリ関数を使って生成します。Symbolの主な特徴文字列や数値と同じくプリミティブ型として扱われるSymbol()を呼び出すたびに、たとえ同じ引数（説明用の文字列）を渡しても、必ず異なる新しいシンボルが生成されるオブジェクトのプロパティキーとして利用でき、名前の衝突を防ぐことができるJavaScriptシンボルのサンプルコード以下のコードでは、同じ文字列