「eval」または「new Function」を使用せずに、ES6 JavaScript で通常の文字列をテンプレート リテラルに変換するにはどうすればよいですか?

ES6 で文字列をテンプレート文字列に変換する

JavaScript では、テンプレート文字列を使用して式や変数を文字列に直接埋め込むことができます。簡潔で読みやすい構文。しかし、既存の非テンプレート文字列からテンプレート文字列を作成したい場合はどうすればよいでしょうか?この質問では、eval や new Function などの動的コード生成手法を使用せずにこの変換を実現できる可能性を検討します。

提供されるソリューションは、カスタム補間関数を使用した ES6 の文字列補間機能を利用します。この関数は、テンプレート パラメーターを含むオブジェクトを受け取り、JavaScript テンプレート リテラルを使用してテンプレート文字列を動的に生成します。

ソリューションの仕組みは次のとおりです。

String.prototype.interpolate = function(params) {
  const names = Object.keys(params);
  const vals = Object.values(params);
  return new Function(...names, `return \`${this}\`;`)(...vals);
}

補間関数はカスタムとして追加されます。プロトタイプメソッドを String オブジェクトに追加します。テンプレート パラメーターを表すキーと値のペアのオブジェクトを受け入れます。

const template = 'Example text: ${text}';
const result = template.interpolate({
  text: 'Foo Boo'
});

ここでは、補間関数をテンプレート文字列に適用し、パラメーター テキストが「Foo Boo」に設定されたオブジェクトを渡します。この関数は、パラメーター値のプレースホルダーを持つ JavaScript テンプレート リテラルを利用して、テンプレート文字列を作成します。

console.log(result);

最後に、結果をコンソールに記録します。出力は次のとおりです。

Example text: Foo Boo

このソリューションを使用すると、通常の文字列をテンプレート文字列に動的に変換でき、JavaScript でテンプレート文字列によってもたらされる表現力と読みやすさを活用できるようになります。コード。

以上が「eval」または「new Function」を使用せずに、ES6 JavaScript で通常の文字列をテンプレート リテラルに変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。