Ungültiges oder unerwartetes Token mit mehrzeiliger Zeichenfolge

Question

Ich versuche, eine HTML-Zeichenfolge aus einer Funktion in meinem JavaScript-Code zurückzugeben, aber auf der Konsole erhalte ich den Fehler "Uncaught syntax error: ungültiges oder unerwartetes Token" mit dem folgenden Code

function formatPrize (prize) { 
    return (
    /*Unexpected token here*/ '<div class = "wrapper"> 
      <div class = "card radius shadowDepth1"> 
       <div class ="card__image border-tlr-radius"> 
        <img src = "admin/"'+prize.sponsorLogo+'"> alt = "image" class = "border-tlr-radius"> 
       </div> 

       <div class = "card_content card_padding"> 
        <div class = "card_meta"> 
         <h3>"'+prize.name+'"</h3> 
        </div> 

        <article class = "card__article"> 
         Test message 
        </article> 
       </div> 
      </div> 
     </div>' 
    ); 
} 

I ersetzt im Grunde ein anderes Stück Code, das hier vorher war und gearbeitet:

"<tr>" + 
    "<td>" + prize.name + "</td>" + 
    "<td>$" + prize.value + "</td>" + 
    "<td>" + prize.description + "</td>" + 
"</tr>" 

habe ich etwas falsch gemacht haben, wenn diese zu ersetzen? Wie kann ich es reparieren?

Answer 1

Sie müssen das Zeilenumbruchzeichen (mit \) ausschließen oder mehrere Zeilen verketten (beide unten gezeigt).

Answer 2

Das Problem besteht darin, dass einfache Anführungszeichen und doppelte Anführungszeichen keine mehrzeiligen Zeichenfolgen in JavaScript erstellen können.

---

Als Alternative entweder machen jede Zeile eine separate Zeichenfolge und verketten sie, oder wie folgt vorgehen:

eine mehrzeilige Zeichenfolge zu haben, müssen Sie die einfachen Anführungszeichen (') mit einem Graviszeichen ersetzen (`) in JavaScript — kann dies den Fehler verursachen.

^{Wie @noazark darauf hingewiesen, kann diese begrenzte Kompatibilität haben, weil es mit ES6 kam, die noch relativ neu ist.}

Sie können den Zeilenumbruch auch mit einem umgekehrten Schrägstrich am Ende jeder Zeile umgehen.

Weitere Informationen zu den beiden vorherigen Methoden finden Sie unter this SO answer.

Answer 3

Leider unterstützen die meisten Browser keine mehrzeiligen Zeichenketten in Javascript. Sie können so etwas wie dies zwar tun:

[ 
    "<tr>", 
     "<td>" + prize.name + "</td>", 
     "<td>$" + prize.value + "</td>", 
     "<td>" + prize.description + "</td>", 
    "</tr>" 
].join('') 

bearbeiten Die ursprüngliche Version Werke zur Verfügung gestellt, weil der + Operator für die nächste Saite sieht, und da JavaScript nicht Leerzeichen empfindlich ist, können Sie es auf dem nächsten Platz Zeile ohne Probleme. Ihre Änderung ersetzt also das Additionszeichen (String-Verkettung) durch eine mehrzeilige Zeichenfolge (die nicht unterstützt wird).