ホームページ > ウェブフロントエンド > jsチュートリアル > テンプレート リテラルは再利用可能で動的にできますか?

テンプレート リテラルは再利用可能で動的にできますか?

Barbara Streisand
リリース: 2024-10-31 07:17:02
オリジナル
399 人が閲覧しました

Can Template Literals Be Reusable and Dynamic?

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

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

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

必須の触媒: 関数コンストラクター

この明らかな制限を克服するために、次のようにします。 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 ロジックを使用すると、回避策を開発できます。

結論

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

以上がテンプレート リテラルは再利用可能で動的にできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート