在 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

这个works.But我不想用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 }))

输出：

"We've sent your code to 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 字符串。

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

Setting context for ES6 template literal within a Function constructor?

javascript

ecmascript-6

template-literals