Wie verschachtelt man Zeichenketten in ES6?

Question

Ich habe einen prefer-template Fehler von eslint. Für die Problemumgehung, änderte ich meinen Code eine Vorlage Zeichenfolge innerhalb der require Funktion zu verwenden, die in der url Funktion wie folgt verschachtelt ist:

{ 
    background: `url(${require(`../../assets/${edge.node.name.toLowerCase()}.png` center no-repeat`)}) 
} 

jedoch, die einen Fehler gab, offensichtlich. Hier ist der Code, den ich zuvor verwendet habe, ein Pluszeichen, das innerhalb der require-Funktion anstelle der Vorlagenzeichenfolge verkettet ist.

{ 
    background: `url(${require('../../assets/' + edge.node.name.toLowerCase() + '.png')}) center no-repeat` 
} 

Wäre es möglich, verschachtelte Template-Strings zu definieren?

Answer 1

Ja, es ist möglich, aber Sie aus irgendeinem Grund hatte gab )}) Teil (das schließt die require Aufruf, den interpolierten Wert, und die CSS url) an der falschen Stelle:

{ 
    background: `url(${require(`../../assets/${edge.node.name.toLowerCase()}.png`)}) center no-repeat` 
//                    ^^^ 
} 

Das heißt, es ist wahrscheinlich eine schlechte Idee, da es den Code nicht gerade lesbar macht. Bessere Verwendung einer Variablen:

const bgurl = require(`../../assets/${edge.node.name.toLowerCase()}.png`); 
… { 
    background: `url(${bgurl}) center no-repeat` 
}