ES6模板文字可以在运行时替换（或重用）吗？

Question

TL；dr:有可能制作一个可重复使用的模板文字吗？

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

我看到的所有示例（甚至标记的模板）都要求在声明时而不是运行时进行“替换”，这对我来说对模板来说是完全无用的。也许我疯了，但对我来说，“模板”是一个文档，它包含在使用时被替换的标记，而不是在创建时被替换，否则它只是一个文档（即字符串）。模板与标记一起存储为标记

每个人都举了一个可怕的例子，类似于：

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

这很好，但如果我已经知道a，我只需要返回“无价值的asd”或返回“有价值的”a。这有什么意义？认真地好吧，重点是懒惰；更少的优点，更容易阅读。太棒了但这不是模板！不是IMHO。MHO才是最重要的！问题是，IMHO在声明模板时会对其进行求值，因此，如果你这样做了，IMHO:

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

由于未声明咒骂，因此它会输出类似于“我的未定义模板”的内容。超。实际上，至少在 Chrome 中，我什至无法声明模板;它抛出错误，因为未定义咒骂。我需要的是能够在声明模板后进行替换：

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...

这一切都让我相信模板文字被严重错误地命名，应该被称为它们真正的样子： herdocs。我想“文字”部分应该给我提供了线索（比如，不可变的）？

我错过了什么吗？有没有一种（好的）方法可以使可重用模板文字化？

我给你，可重用的模板文字：

> 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

可能最干净的方法是使用箭头函数(因为在这一点上，我们已经在使用ES6)

var reusable = () => `This ${object} was created by ${creator}`;

var object = "template string", creator = "a function";
console.log (reusable()); // "This template string was created by a function"

object = "example", creator = "me";
console.log (reusable()); // "This example was created by me"

...对于标记的模板文字：

reusable = () => myTag`The ${noun} go ${verb} and `;

var noun = "wheels on the bus", verb = "round";
var myTag = function (strings, noun, verb) {
    return strings[0] + noun + strings[1] + verb + strings[2] + verb;
};
console.log (reusable()); // "The wheels on the bus go round and round"

noun = "racecars", verb = "fast";
myTag = function (strings, noun, verb) {
    return strings[0] + noun + strings[1] + verb;
};
console.log (reusable()); // "The racecars go fast"

这还避免了使用eval（）或Function（），这可能会导致编译器出现问题并导致大量速度减慢。

Answer 2

您可以将模板字符串放在函数中：

function reusable(a, b) {
  return `a is ${a} and b is ${b}`;
}

您可以使用标记模板做同样的事情：

function reusable(strings) {
  return function(... vals) {
    return strings.map(function(s, i) {
      return `${s}${vals[i] || ""}`;
    }).join("");
  };
}

var tagged = reusable`a is ${0} and b is ${1}`; // dummy "parameters"
console.log(tagged("hello", "world"));
// prints "a is hello b is world"
console.log(tagged("mars", "jupiter"));
// prints "a is mars b is jupiter"

这个想法是让模板解析器从变量“槽”中拆分出常量字符串，然后返回一个函数，每次都根据一组新值将其重新修补在一起。

Answer 3

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

执行此操作的最佳方法是使用函数构造函数。

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逻辑。这也可以通过一些思考来弥补。