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

Question

我的应用程序获取资源字符串占位符令牌列表，它应该使用给定值更改令牌。

这种资源的一个例子是：“http://example.com/?name=${name}

（我在数组中得到了许多这样的，但这无关紧要）。

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

当然我可以使用 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

这个管用。但是我不想使用< code>eval。

所以我切换到新函数（）（）的其他方法：

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模板字符串的格式

在线演示

Answer 1

eval解决方案的正确新函数替换是

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

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

Answer 2

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

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。

演示