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

How to nest template strings in ES6?

本文关键字：字符串 嵌套 ES6      更新时间：2023-09-26

我从eslint那里得到了一个prefer-template错误。对于解决方法，我将代码更改为在嵌套在url函数中的require函数中使用模板字符串，如下所示：

{
  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`
}
相关文章：