javascript - 如何在 ES6 中嵌套模板字符串？

Question

我prefer-template从 eslint 得到一个错误。对于解决方法，我将代码更改为在函数内部使用模板字符串，该模板字符串require嵌套在url函数内部，如下所示：

{
  background: `url(${require(`../../assets/${edge.node.name.toLowerCase()}.png` center no-repeat`)})
}

然而，这显然是一个错误。这是我之前使用的代码，在require函数内部连接一个加号而不是模板字符串。

{
  background: `url(${require('../../assets/' + edge.node.name.toLowerCase() + '.png')}) center no-repeat`
}

是否可以定义嵌套的模板字符串？

Answer 1

是的，这是可能的，但由于某种原因，您将)})部分（关闭require调用、内插值和 CSS url）放在了错误的位置：

{
  background: `url(${require(`../../assets/${edge.node.name.toLowerCase()}.png`)}) center no-repeat`
//                                                                             ^^^
}

也就是说，这可能不是一个好主意，因为它并不能完全使代码可读。更好地使用变量：

const bgurl = require(`../../assets/${edge.node.name.toLowerCase()}.png`);
… {
  background: `url(${bgurl}) center no-repeat`
}