web-dev-qa-db-fra.com

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

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

Le premier exemple (avec la syntaxe backtick), qui est le plus simple, ne fonctionne pas dans Internet Explorer 11.

Existe-t-il un moyen d'obtenir que le premier exemple fonctionne dans Internet Explorer 11 sans avoir à utiliser un tableau ou des caractères de nouvelle ligne?

Not ne fonctionne-t-il pas dans Internet Explorer?

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 Internet Explorer

Array Join

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 Internet Explorer

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>'
 ;
javascriptjqueryhtmlinternet-explorer
16
Matt McManis

Problème

La syntaxe du backtick pour une chaîne est un Template Literal , qui permet l’interpolation des variables dans une chaîne et des chaînes multilignes. Ils ne sont pas pris en charge par Internet Explorer 11 (voir plus ici: Tableau de compatibilité ECMAScript 6 ).

Solution

  1. Vous pouvez utiliser un transpiler, tel que le très populaire Babel . Cela convertira le littéral de modèle en syntaxe ECMAScript 5 comprise par Internet Explorer 11.
  2. Vous pouvez choisir de ne pas prendre en charge Internet Explorer 11 et vous en tenir à Edge et aux autres navigateurs prenant en charge nativement ECMAScript 6, bien que ce ne soit généralement pas une option.
16
Joshua Kleveter

Ce n’est pas la solution la plus élégante, mais j’ai moi-même résolu ce problème en réduisant au minimum la chaîne de mon modèle multiligne (Vue) et en l’enveloppant entre guillemets simples au lieu de ticks en arrière. Cela peut être automatisé dans le cadre de l'étape de génération, de sorte que votre code reste lisible pour le développement.

Assurez-vous également que les chaînes internes (telles que classNames, etc.) sont entre guillemets afin d'éviter de les terminer par inadvertance, ce qui provoquerait des erreurs de modèle.

1
Gautham Nookala