ホームページ  >  記事  >  ウェブフロントエンド  >  ES6 テンプレート リテラルの評価を延期するにはどうすればよいですか?

ES6 テンプレート リテラルの評価を延期するにはどうすればよいですか?

Susan Sarandon
Susan Sarandonオリジナル
2024-11-06 20:42:03428ブラウズ

How to Defer Evaluation of ES6 Template Literals?

ES6 テンプレート リテラルの実行の遅延

ES6 テンプレート リテラルは文字列補間のための強力な構文糖衣を提供しますが、評価を遅延したい場合はどうすればよいですか動的要素の作成後まで?

問題

従来、String.prototype.format を使用すると、遅延評価が可能でした。ただし、テンプレート リテラルは解析時に評価されるため、このアプローチは妨げられます。

解決策 1: タグ付きテンプレート リテラルを使用する

タグ付きテンプレート リテラルを使用すると、テンプレートをインターセプトして処理できます。評価前のリテラル:

function formatter(literals, ...substitutions) {
    return {
        format: function() {
            // ... code here ...
        }
    };
}
console.log(formatter`Hello, <pre class="brush:php;toolbar:false">String.prototype.format = function() {
    var args = arguments;
    return this.replace(/$\{p(\d)\}/g, function(match, id) {
        return args[id];
    });
};
console.log("Hello, ${p0}. This is a ${p1}".format("world", "test"));
. This is a `.format("world", "test"));

解決策 2: プレーンな文字列リテラルを使用する

代わりに、プレーンな文字列リテラルを使用して置換を手動で解析することもできます:

const welcome = (p0, p1) => `Hello, ${p0}. This is a ${p1}`;
console.log(welcome("world", "test"));

解決策 3: テンプレート リテラルを回避し、関数パラメーターを使用する

最後に、テンプレート リテラルを完全に回避して関数パラメーターを使用できます:

考慮事項

  • 解決策 1 は最も柔軟性が高くなりますが、単純な使用例では複雑すぎる可能性があります。
  • 解決策 2 はより単純ですが、手動による解析が必要です。
  • ソリューション 3 では、テンプレート リテラルを使用しない従来のアプローチを使用します。

以上がES6 テンプレート リテラルの評価を延期するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。