JavaScript backtick multiligne chaîne ne fonctionne pas dans Internet Explorer

J'ai une grande chaîne HTML contenu dans un var. Je l'utilise pour écrire à innerHTML.

Le premier exemple (avec backtick syntaxe), qui est le plus simple, ne fonctionne pas dans InternetExplorer11.

Est-il un moyen pour obtenir le premier exemple de travailler dans InternetExplorer11 sans avoir à utiliser un tableau ou des caractères de saut de ligne?

Ne pas travail dans InternetExplorer

Backtick `

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;

Fonctionne dans InternetExplorer

Tableau De Rejoindre

https://jsfiddle.net/3aytojjf/

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

Fonctionne dans InternetExplorer

Guillemet simple ' avec saut de ligne \

https://jsfiddle.net/5qzLL4j5/

var message =
'<p>this</p> \
<p>is</p> \
<p>a</p> \
<p>multiline</p> \
<p>string</p>'
 ;
soutien
vous pouvez utiliser les commentaires multi-lignes et Function.toString()...
voir cette réponse avec l'idée de garder le bloc HTML dans un invisible <script> conteneur en HTML, puis utiliser ses innerHTML au moment de l'exécution en JS stackoverflow.com/a/16270807/961631

OriginalL'auteur Matt McManis | 2017-02-27

  1. 16

    Problème

    Le backtick syntaxe pour une chaîne de caractères est un Modèle Littérale, ce qui permet pour l'interpolation de variables au sein d'une chaîne et multi-chaînes. Ils ne sont pas pris en charge par Internet Explorer 11 (voir plus ici: ECMAScript 6 tableau de compatibilité).

    Solution

    1. Vous pouvez utiliser un transpiler, tels que le très populaire Babel. Cela vous permettra de transformer le modèle littérale dans le ECMAScript 5 syntaxe Internet Explorer 11 comprend.
    2. Vous pourrait opt-out de soutenir Internet Explorer 11, et le bâton avec le soutien de Bord et les autres navigateurs qui ont natif ECMAScript 6 prise en charge, mais ce n'est généralement pas une option.

    OriginalL'auteur Joshua Kleveter

  2. 1

    Ce n'est pas la solution la plus élégante, mais j'ai résolu moi-même par minifying mon multiligne modèle (Vue) de la chaîne, et en englobant dans des guillemets simples au lieu de tiques. Cette opération peut être automatisée dans le cadre de l'étape de génération, de sorte que votre code a toujours l'air lisible pour le développement.

    Également veiller à ce que toute intérieure cordes (comme les noms de classe, etc.) sont entre guillemets doubles si vous ne l'avez pas accidentellement mettre fin à la chaîne, provoquant ainsi le modèle des erreurs.

    OriginalL'auteur Gautham Nookala