web-dev-qa-db-ja.com

ES6でテンプレート文字列をネストする方法は？

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

ネストされたテンプレート文字列を定義することは可能ですか？

javascriptecmascript-6template-stringstemplate-literals
18
lvarayut

はい、可能ですが、何らかの理由で)})部分（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`
}
22
Bergi