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

new Function解决方案的正确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

您的函数刚刚返回传递给它的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 }))

<强>输出：

＆＃34;我们已将您的代码发送至123。＆＃34;

Demo

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

2 个答案: