JavaScript 反引号多行字符串在 Internet Explorer 中不起作用答案

【问题标题】：JavaScript backtick multiline string not working in Internet ExplorerJavaScript 反引号多行字符串在 Internet Explorer 中不起作用
【发布时间】：2017-07-18 12:39:09
【问题描述】：

var 中包含一个大的 HTML 字符串。我用它写信给innerHTML。

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

有没有办法让第一个示例在 Internet Explorer 11 中运行，而无需使用数组或换行符？

不能在 Internet Explorer 中工作

反引号`

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>'
 ;

【问题讨论】：

No support
可以使用多行cmets和Function.toString()...
查看这个答案的想法是将 HTML 块保留在 HTML 中不可见的 <script> 容器中，然后在运行时在 JS stackoverflow.com/a/16270807/961631 中使用其 innerHTML

标签： javascript jquery html internet-explorer

【解决方案1】：

这不是最优雅的解决方案，但我自己解决了这个问题，方法是缩小我的多行模板 (Vue) 字符串，并将其包含在单引号中而不是反引号中。这可以作为构建步骤的一部分自动执行，因此您的代码在开发时看起来仍然清晰易读。

还要确保任何内部字符串（如类名等）都用双引号引起来，以免意外终止字符串，从而导致模板错误。

【讨论】：

【解决方案2】：

问题

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

解决方案

您可以使用转译器，例如广受欢迎的Babel。这会将模板文字转换为 Internet Explorer 11 可以理解的 ECMAScript 5 语法。
您可以选择不支持 Internet Explorer 11，并坚持支持 Edge 和其他支持原生 ECMAScript 6 的浏览器，尽管这通常不是一个选项。

【讨论】：