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

Posted 2023-03-07

【中文标题】如何在 ES6 中嵌套模板字符串？

【英文标题】：How to nest template strings in ES6?

【发布时间】：2016-07-01 21:11:59

【问题描述】：

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

是否可以定义嵌套的模板字符串？

【参考方案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`

【讨论】：

感谢您的回复。那是我对演示的错误。但是，当我将其更改为url($require(../../assets/$edge.node.name.toLowerCase().png)) center no-repeat 时，这是一个语法错误。

@LVarayut：Worksforme。你到底遇到了什么错误？

谢谢@Bergi。是我对大括号的困惑。顺便说一句，我会采用你的第二种方法。