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

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

1 个答案: