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