複数の文字列で無効または予期しないトークン

Question

JavaScriptコード内の関数からHTML文字列を返そうとしていますが、コンソール上で次のコードで "Uncaught syntax error：無効または予期しないトークン"というエラーが表示されます

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>' 
    ); 
} 

私は基本的に前にここにあったと働いていたコードのいくつかの他の部分を置き換える：それを交換する際

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

は私が何か間違ったことをしたしましたか？どうすれば修正できますか？

Answer 1

改行文字（\）をエスケープしたり、複数の行（いずれも下に示す）を連結する必要があります。

function formatPrize (prize) { 
return '<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">\n' + 
       '<div class = "card_meta">\n' + 
        '<h3>"'+prize.name+'"</h3>\n' + 
       '</div>\n' + 
       ' \n' + 
       '<article class = "card__article"> \ 
        Test message \ 
       </article> \ 
      </div> \ 
     </div> \ 
    </div>'; 
} 

Answer 2

JavaScriptでは、一重引用符と二重引用符で複数行の文字列を作成できないという問題があります。代替案として

---

、いずれかの各行別の文字列を作成し、それらを連結、または次の操作を行います。

は、複数行の文字列を持つことは、あなたがバッククォートで単一引用符（'）を交換する必要があります（`）JavaScriptで—これは、このエラーの原因となっている可能性があります。

^{@noazarkが指摘しているように、これはまだ比較的新しいES6に付属しているため、互換性に制限があるかもしれません。}

各行の最後にバックスラッシュを付けて改行をエスケープすることもできます。

上記2つの方法の詳細については、this SO answerを参照してください。

Answer 3

残念ながら、ほとんどのブラウザはJavaScriptで複数行の文字列をサポートしていません。

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

編集 +オペレータは次の文字列を探し、JavaScriptは敏感空白ではないので、あなたが次の上に置くことができますので、あなたが作品を提供元のバージョン：あなたはこのかかわらような何かを行うことができます問題なしに行することができます。具体的には、追加記号（文字列連結）を複数行の文字列（サポートされていない）で置き換えていました。