1

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

这种资源的一个例子是："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 模板字符串的格式。

在线演示

4

2 回答 2

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。”

演示

于 2018-03-01T07:59:09.737 回答
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传递给它的字符串。

于 2018-03-01T10:05:28.227 回答