如何在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`
}