JavaScript反勾选多行字符串在Internet Explorer中不起作用

我有一个很大的HTML字符串，包含在

var

中。我用它来写

innerHTML

第一个示例（使用backtick语法）是最简单的，在InternetExplorer11中不起作用

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

在InternetExplorer中不起作用 背勾`

var消息=`
这个

是

a

多行

串

`;
//写消息
var display=document.getElementById（'display'）；
display.innerHTML=消息；

在InternetExplorer工作 数组连接

var消息=
['p>这个
'，
“是
”，
“a
”，
“多行
”，
“字符串
”
].join（'\n'）；

在InternetExplorer工作 带换行符的单引号\

var消息=
“这
\
是
\
a
\
多行
\
字符串
'
;

问题 字符串的backtick语法是，它允许在字符串和多行字符串中插入变量。Internet Explorer 11不支持它们（请参阅此处的详细信息：）

解决方案

您可以使用transpiler，如Every popular。这将把模板文本转换为InternetExplorer11能够理解的ECMAScript 5语法

您可以选择不支持InternetExplorer11，继续支持Edge和其他支持本机ECMAScript 6的浏览器，尽管这通常不是一个选项

---

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

---

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

您可以使用多行注释和

函数.toString（）

…查看此答案时，请考虑将HTML块保存在HTML中不可见的

容器中，然后在JS中运行时使用它的

innerHTML

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

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

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