web-dev-qa-db-ja.com

JavaScriptバックティックの複数行の文字列がInternet Explorerで機能しない

varに含まれる大きなHTML文字列があります。 innerHTMLへの書き込みに使用しています。

最初の例（バックティック構文を使用）は最も簡単ですが、Internet Explorer 11では機能しません。

配列や改行文字を使用せずにInternet Explorer 11で動作する最初の例を取得する方法はありますか？

Internet Explorerでnotは機能しませんか

バックティック `

https://jsfiddle.net/qLm02vks/

<div id="display"></div>

var message = `
  <p>this</p>
  <p>is</p>
  <p>a</p>
  <p>multiline</p>
  <p>string</p>
`;

// Write Message
var display = document.getElementById('display');
display.innerHTML = message;

Internet Explorerで動作します

配列結合

https://jsfiddle.net/3aytojjf/

var message =
   ['<p>this</p>',
    '<p>is</p>',
    '<p>a</p>',
    '<p>multiline</p>',
    '<p>string</p>'
   ].join('\n');

Internet Explorerで動作します

単一引用符 '改行付き\

https://jsfiddle.net/5qzLL4j5/

var message =
'<p>this</p> \
<p>is</p> \
<p>a</p> \
<p>multiline</p> \
<p>string</p>'
 ;
javascriptjqueryhtmlinternet-explorer
20
Matt McManis

問題

文字列のバックティック構文は Template Literal です。これにより、文字列内の変数と複数行の文字列を補間できます。これらはInternet Explorer 11でサポートされていません（詳細は ECMAScript 6互換性テーブル を参照）。

溶液

  1. 常に人気のある Babel などのトランスパイラーを使用できます。これにより、テンプレートリテラルは、InternetExplorer11が理解できるECMAScript5構文に変換されます。
  2. could Internet Explorer 11のサポートをオプトアウトし、EdgeおよびネイティブECMAScript 6をサポートする他のブラウザーのサポートに固執しますが、これは通常オプションではありません。
18
Joshua Kleveter

これは最もエレガントなソリューションではありませんが、マルチラインテンプレート（Vue）文字列を縮小し、バックティックではなく一重引用符で囲むことで、自分でこれを解決しました。これはビルドステップの一部として自動化できるため、コードは開発のために読みやすいように見えます。

また、誤って文字列を終了してテンプレートエラーが発生しないように、内部文字列（classNamesなど）が二重引用符で囲まれていることを確認してください。

1
Gautham Nookala