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

Question

我从eslint得到prefer-template错误。对于解决办法，我改变了我的代码以使用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` 
}