JavaScript反引号多行字符串无法在Internet Explorer中运行

Question

我有一个包含在var中的大型HTML字符串。我用它来写innerHTML。

第一个示例（使用反引号语法），这是最简单的，在Internet Explorer 11中不起作用。

有没有办法让第一个示例在Internet Explorer 11中工作而不必使用数组或换行符？

不在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;

在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中工作

单引号'与linebreak \

https://jsfiddle.net/5qzLL4j5/

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

Answer 1

问题

字符串的反引号语法是Template Literal，它允许在字符串和多行字符串中插入变量。 Internet Explorer 11不支持它们（请参阅此处：ECMAScript 6 compatibility table）。

解决方案

1. 您可以使用转发器，例如广受欢迎的Babel。这会将模板文字转换为Internet Explorer 11可以理解的ECMAScript 5语法。
2. 您可以选择退出支持Internet Explorer 11，并坚持支持Edge和其他具有本机ECMAScript 6支持的浏览器，但这通常不是一种选择。

Answer 2

这不是最优雅的解决方案，但我通过缩小我的多行模板（Vue）字符串并将其包含在单引号而不是后面的刻度中来解决这个问题。这可以作为构建步骤的一部分自动执行，因此您的代码仍然看起来易于开发。

还要确保任何内部字符串（如classNames等）都是双引号，这样就不会意外终止字符串，从而导致模板错误。