Tipp: Elegant HTML in JavaScript einbinden

Post cover image

Manchmal kommt es vor, dass HTML-Markup innerhalb von JavaScript eingebunden werden soll. Etwa so:

var htmlCode = "

Hello World
";

Ich nutze als doppelte Anführungszeichen, um den Code festzulegen. Der Nachteil: Ich kann innerhalb des HTML-Codes keine doppelte Anführungszeichen mehr verwenden (außer vielleicht wenn ich stattdessen \" benutze).

Außerdem habe ich ein Problem, wenn mein HTML-Code mehrere Zeilen haben soll. Sowas hier ist zum Beispiel nicht erlaubt:

var htmlCode = "

Hello World

";

Die Lösung

Statt Anführungszeichen können Backquotes (`) benutzt werden:

var htmlCode = `

Hello World, it's a me!
\`;

Damit kann ich mehrere Zeilen nutzen, sowie innerhalb meines Codes einfache ('), als auch doppelte (") Anführungszeichen nutzen.

Viele Editoren unterstützen außerdem Quellcode-Highlighting für HTML, wenn der Code in Backquotes geschrieben ist.