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