ES6 模板文字中的可重用性难题

本次讨论中提出的主要问题围绕着 ES6 模板文字中假定缺乏可重用性的问题。传统的演示强调声明时的替换，不允许运行时修改。

解决方案：利用函数构造函数

为了解决这个问题，一个可行的解决方案以以下形式出现：函数构造函数。这种方法涉及将模板字符串转换为函数。

考虑以下代码片段：

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));

通过调用该函数，您可以生成所需的字符串，同时拥有运行时修改变量的灵活性。

的好处这种方法：

• 启用模板值的运行时替换
• 有利于来自外部源的插值，例如文件
• 允许动态字符串操作

潜在缺点：

• 模板标签可能需要额外的实现工作
• 由于延迟，不支持模板内的内联 JavaScript 逻辑插值
• 与每个模板使用的函数创建相关的内存开销

总之，虽然 ES6 模板文字本质上缺乏真正的可重用性，但使用 Function 构造函数提供了一种模拟所需行为的解决方法在运行时创建和修改模板。