javascript - ES6 模板文字能否在运行时被替换(或重用)？

Question

tl;dr:是否可以制作可重用的模板文字？

我一直在尝试使用模板字面量，但我想我只是不明白，现在我感到很沮丧。我的意思是，我想我明白了，但“它”不应该是它的工作方式，或者它应该如何得到。它应该有所不同。

我看到的所有示例(甚至是标记模板)都要求“替换”在声明时而不是运行时完成，这对我来说对于模板来说似乎毫无用处。也许我疯了，但对我来说，"template"是一个包含标记的文档，在您使用它时会被替换，而不是在您创建它时替换，否则它只是一个文档(即字符串)。模板与标记一起存储，作为标记，当您...评估它时，这些标记会被评估。

每个人都举了一个类似这样的可怕例子:

var a = 'asd';
return `Worthless ${a}!`

这很好，但如果我已经知道 a，我只会返回 'Worthless asd' 或 return 'Worthless '+a。重点是什么？严重地。好吧，关键是懒惰；更少的加号，更多的可读性。伟大的。但这不是模板!不是恕我直言。 MHO 才是最重要的!问题是，恕我直言，模板是在声明时评估的，所以，如果你这样做，恕我直言:

var tpl = `My ${expletive} template`;
function go() { return tpl; }
go(); // SPACE-TIME ENDS!

由于未声明 expletive，因此它输出类似 My undefined template 的内容。极好的。实际上，至少在 Chrome 中，我什至不能声明模板；它会抛出错误，因为 expletive 未定义。我需要的是能够在声明模板后进行替换:

var tpl = `My ${expletive} template`;
function go() { return tpl; }
var expletive = 'great';
go(); // My great template

但是我不明白这是怎么可能的，因为这些并不是真正的模板。即使你说我应该使用标签，不，它们不起作用:

> explete = function(a,b) { console.log(a); console.log(b); }
< function (a,b) { console.log(a); console.log(b); }
> var tpl = explete`My ${expletive} template`
< VM2323:2 Uncaught ReferenceError: expletive is not defined...

这一切让我相信模板字面量被严重错误地命名，应该被称为它们真正的名字:heredocs。我想“字面”部分应该让我失望(比如，不可变的)？

我错过了什么吗？是否有一种(好的)方法来制作可重用的模板文字？

---

我给你，可重复使用的模板文字:

> function out(t) { console.log(eval(t)); }
  var template = `\`This is
  my \${expletive} reusable
  template!\``;
  out(template);
  var expletive = 'curious';
  out(template);
  var expletive = 'AMAZING';
  out(template);
< This is
  my undefined reusable
  template!
  This is
  my curious reusable
  template!
  This is
  my AMAZING reusable
  template!

这是一个简单的“帮助”函数...

function t(t) { return '`'+t.replace('{','${')+'`'; }
var template = t(`This is
my {expletive} reusable
template!`);

...让它变得“更好”。

我倾向于称它们为模板肠道，因为它们会产生曲折的感觉。

Answer 1

为了使这些文字像其他模板引擎一样工作，需要有一个中间形式。

最好的方法是使用 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));

与其他模板引擎一样，您可以从文件等其他地方获取该字符串。

使用此方法可能会出现一些问题(例如，模板标签将更难添加)。由于后期插值，您也不能拥有内联 JavaScript 逻辑。这也可以通过一些想法来补救。