可重用模板文字：暴露隐藏的潜力

虽然 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 函数接受模板字符串和一组要插值的变量。在该函数中，我们构造一个函数，该函数在执行时返回模板字符串，其中包含运行时注入的 templateVar 的值。

可重用模板文字的好处

The生成的可重用模板文字具有许多优点：

• 动态插值：可以在运行时将值插值到模板中，从而提供更大的灵活性。
• 外部插值：模板可以来自外部文件，方便维护和协作。
• 扩展功能：可以通过一些独创性集成模板标签等附加功能。

虽然此解决方案引入了某些限制，例如无法内联 JavaScript 逻辑，可以开发变通方法。

结论

通过使用 Function 构造函数，我们释放了 ES6 模板文字的真正潜力。我们将它们从静态字符串转换为可重用的动态模板，为代码组织和灵活性开辟了新的可能性。虽然完全重新创建传统模板引擎功能的旅程仍在继续，但该技术为扩展模板文字的功能提供了坚实的基础。