在 Function 构造函数中为 ES6 模板文字设置上下文？

Question

我的应用获取资源字符串 + 占位符标记的列表，它应该使用给定值更改标记。

此类资源的一个示例是："http://example.com/?name=${name}&age=${age}";

（我在一个数组中有很多这样的东西，但这不相关）。

所以现在我有了这个^ 字符串并且我有了值。所以我需要生成消化后的字符串。

当然我可以使用eval：

var template = "http://example.com/?name=${name}&age=${age}";
var name = "John";
var age = "30";
var url = eval(`\`${template}\``);
console.log(url); //http://example.com/?name=John&age=30

这可行。但我不想使用eval。

所以我改用new Function()() 的其他方法：

var url = new Function ('tmpl','obj','return `${tmpl}`')

这产生了函数：

ƒ anonymous(tmpl,obj ) {
return `${tmpl}`
}

所以现在我可以做：

new Function ('tmpl','obj','return `${tmpl}`')(template ,{name, age})

但现在我需要在内部函数中拆分 obj 以便模板字面量知道值

顺便说一句 - 我试过了 - 没有成功：

(new Function ('tmpl','obj','return `${tmpl}`').bind({name,age})) (template)

问题

如何在内部函数中展平obj，以便${} 具有已知的本地值？

铌 我不喜欢使用正则表达式解决方案，因为模板文字中有换行符。此外，这些资源故意采用 es6 模板字符串的格式

Online-demo

Answer 1

我已经设法用我想要的模板字符串解决了这个问题。

setString(resource: string, obj: {}) {
    const names = Object.keys(obj);
    const vals = Object.keys(obj).map(key => obj[key]);
    return new Function(...names, `return \`${resource}\`;`)(...vals);
  }

var str = "We've sent your code to ${phone}.";
console.log(this.setString(str, { phone: 123 }))

输出：

“我们已将您的代码发送到 123。”

Demo

Answer 2

您的eval 解决方案的正确new Function 替代品是

var template = "http://example.com/?name=${name}&age=${age}";
var makeUrl = new Function("{name, age}", "return `" + template + "`;");
var url = makeUrl({name: "John", age: 30});
console.log(url); //http://example.com/?name=John&age=30

您的函数刚刚返回传递给它的 tmpl 字符串。