run - La cadena multilínea de retroceso de JavaScript no funciona en Internet Explorer

instalar javascript

Question

Tengo una cadena HTML grande contenida en una var . Lo estoy usando para escribir en innerHTML .

El primer ejemplo (con sintaxis de comillas invertidas), que es el más simple, no funciona en Internet Explorer 11.

¿Hay alguna manera de que el primer ejemplo funcione en Internet Explorer 11 sin tener que usar una matriz o caracteres de nueva línea?

No funciona en 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;

Funciona en 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'');

Funciona en Internet Explorer

Comilla simple ''con linebreak /

https://jsfiddle.net/5qzLL4j5/

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

Answer 1

Problema

La sintaxis de retroceso para una cadena es una Literal de plantilla , que permite la interpolación de variables dentro de una cadena y cadenas multilínea. Internet Explorer 11 no los admite (consulte más información aquí: tabla de compatibilidad ECMAScript 6 ).

Solución

1. Puedes usar un transpiler, como el siempre popular Babel . Esto convertirá la plantilla literal en la sintaxis de ECMAScript 5 que Internet Explorer 11 entiende.
2. Puede optar por dejar de ser compatible con Internet Explorer 11 y seguir con la compatibilidad con Edge y otros navegadores que tienen compatibilidad nativa con ECMAScript 6, aunque esto generalmente no es una opción.

Answer 2

No es la solución más elegante, pero lo resolví yo mismo al minimizar la cadena de varias líneas de plantilla (Vue) y al incluirla entre comillas simples en lugar de marcas atrás. Esto se puede automatizar como parte del paso de compilación, de modo que su código aún parezca legible para el desarrollo.

También asegúrese de que todas las cadenas internas (como los nombres de clase, etc.) tengan una doble cita para que no termine accidentalmente la cadena, lo que provoca errores en la plantilla.