再利用可能なテンプレート リテラル: 隠された可能性を明らかにする

ES6 のテンプレート リテラルは広範囲に利用されていますが、それらは永遠にバインドされているという認識が根強く残っています。再利用したり動的に更新したりする柔軟性に欠けています。この記事では、テンプレート リテラルを再利用可能な動的なドキュメントに変換する可能性を探り、その概念に疑問を投げかけます。

従来のテンプレートの本質は、実行時にトークンを注入し、必要なときにいつでも評価できる機能にあります。ただし、ES6 テンプレート リテラルは宣言時に置換を評価しているようで、実用性が制限されています。

The Essential Catalyst: The Function Constructor

この明らかな制限を克服するために、次のようにします。 Function コンストラクターを仲介者として使用します。この構造を利用すると、関数が呼び出されるまで補間プロセスを延期できます。

const templateString = "Hello ${this.name}!";
const templateVars = {
  name: "world",
};

const fillTemplate = function (templateString, templateVars) {
  return new Function(
    "return `"   templateString   "`;"
  ).call(templateVars);
};

console.log(fillTemplate(templateString, templateVars));

この例では、fillTemplate 関数はテンプレート文字列と補間される変数のセットを受け入れます。関数内で、実行時に実行時に挿入された templateVars の値を含むテンプレート文字列を返す関数を構築します。

再利用可能なテンプレート リテラルの利点

結果として得られる再利用可能なテンプレート リテラルには、多くの利点があります。

• 動的補間: 値は次のとおりです。実行時にテンプレートに挿入されるため、柔軟性が高まります。
• 外部補間: テンプレートを外部ファイルから取得できるため、メンテナンスやコラボレーションが容易になります。
• 拡張機能: テンプレート タグなどの追加機能を使用できます。

このソリューションでは、インライン JavaScript ロジックが使用できないなど、特定の制限が導入されていますが、回避策は次のとおりです。

結論

関数コンストラクターを採用することで、ES6 テンプレート リテラルの真の可能性を解き放ちます。これらを静的な文字列から再利用可能な動的なテンプレートに変換し、コードの編成と柔軟性の新たな可能性を開きます。従来のテンプレート エンジンの機能を完全に再作成する旅は続いていますが、この手法はテンプレート リテラルの機能を拡張するための堅牢な基盤を提供します。