从 JSON 生成变量以在字符串模板 (Javascript) 中使用

Question

我有一些 JSON 看起来有点像这样:

component.json

[
  { "template": "<div class="${layout} ${border}"></div>" },
  {
    "layout": "grid",
    "border": "primary"
  }
]

我正在使用这个 JSON 通过 JS 生成一些 HTML，但我不知道如何将“布局”和“边框”变成我可以添加的变量进入我的模板字符串。

对于上下文，我不能只是对变量进行硬编码，在我的 JSON 中，我无法预测会有多少变量或它们是什么。

我正在尝试这样的事情：

const template = componentJSON[0].template
const classes = componentJSON[1]

for (const [key, value] of Object.entries(classes)) {
    eval('var ' + `${key}` + ' = ' + '"' + `${value}` + '"')
}

let html = eval('`' + template + '`')

我知道 eval 的 EVIL，所以我很高兴听到其他解决方案，但也很高兴听到 eval 的选项，因为它永远不会受到攻击。

我不确定为什么应该使用 eval 创建变量的 for 循环不起作用？也许 eval 是专门为不创建变量而构建的？我可以改用 new Function() 吗？

作为参考，我希望得到的结果应该是：

<div class="grid primary"></div>

Answer 1

不需要为此使用 eval()。将 replace() 方法与匹配 ${...} 的正则表达式一起使用并替换为相应的对象属性.

let componentJSON = [
  { "template": "<div class='${layout} ${border}'></div>" },
  {
    "layout": "grid",
    "border": "primary"
  }
];

const template = componentJSON[0].template
const classes = componentJSON[1]

let html = template.replace(/$\{(.*?)\}/g, (match, key) => classes[key]);

console.log(html);

从 JSON 生成变量以在字符串模板 (Javascript) 中使用

Generate variables from JSON to use in string template (Javascript)

javascript

eval

template-strings