Fatal编程技术网
  • javascript/
  • Javascript 如何在ES6中嵌套模板字符串？

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

javascript ecmascript-6

Javascript 如何在ES6中嵌套模板字符串？,javascript,ecmascript-6,template-strings,template-literals,Javascript,Ecmascript 6,Template Strings,Template Literals,我从eslint得到一个首选模板错误。对于解决方法，我将代码更改为在require函数中使用模板字符串，该函数嵌套在url函数中，如下所示： { background: `url(${require(`../../assets/${edge.node.name.toLowerCase()}.png` center no-repeat`)}) } 然而，这显然是一个错误。这是我以前使用的代码，是在require函数中连接的加号，而不是模板字符串 { background: `url(${

我从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`
}



是否可以定义嵌套的模板字符串？
是的，这是可能的，但是出于某种原因，您将
）}
部分（关闭
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`
}



谢谢你的回复。这是我在演示中犯的错误。然而，当我将其更改为
url（${require（
。/../assets/${edge.node.name.toLowerCase（）}.png
）时，中心不再重复
，这是一个语法错误。@LVarayut:。你到底得到了什么错误？谢谢@Bergi。我对花括号的理解有点混乱。顺便说一句，我将使用你的第二种方法。