JavaScript 反引号多行字符串在 Internet Explorer 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42493557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript backtick multiline string not working in Internet Explorer
提问by Matt McManis
I have a large HTML string contained in a var. I'm using it to write to innerHTML.
我有一个包含在var. 我用它写信给innerHTML.
The first example (with backtick syntax), which is the simplest, does not work in Internet Explorer 11.
第一个示例（使用反引号语法）是最简单的，在 Internet Explorer 11 中不起作用。
Is there a way to get the first example to work in Internet Explorer 11 without having to use an array or newline characters?
有没有办法让第一个示例在 Internet Explorer 11 中工作而无需使用数组或换行符？
Does notwork in Internet Explorer
难道不是在Internet Explorer中运行
Backtick `
反引号`
https://jsfiddle.net/qLm02vks/
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;
Works in Internet Explorer
在 Internet Explorer 中工作
Array Join
数组连接
https://jsfiddle.net/3aytojjf/
https://jsfiddle.net/3aytojjf/
var message =
['<p>this</p>',
'<p>is</p>',
'<p>a</p>',
'<p>multiline</p>',
'<p>string</p>'
].join('\n');
Works in Internet Explorer
在 Internet Explorer 中工作
Single quote ' with linebreak \
单引号 ' 带换行符 \
https://jsfiddle.net/5qzLL4j5/
https://jsfiddle.net/5qzLL4j5/
var message =
'<p>this</p> \
<p>is</p> \
<p>a</p> \
<p>multiline</p> \
<p>string</p>'
;
采纳答案by Joshua Kleveter
Problem
问题
The backtick syntax for a string is a Template Literal, which allows for interpolation of variables within a string and multiline strings. They are not supported by Internet Explorer 11 (see more here: ECMAScript 6 compatibility table).
字符串的反引号语法是Template Literal，它允许在字符串和多行字符串中插入变量。Internet Explorer 11 不支持它们（在此处查看更多信息：ECMAScript 6 兼容性表）。
Solution
解决方案
- You can use a transpiler, such as the ever-popular Babel. This will convert the template literal into the ECMAScript 5 syntax that Internet Explorer 11 understands.
- You couldopt-out of supporting Internet Explorer 11, and stick with support for Edge and other browsers that have native ECMAScript 6 support, though this is usually not an option.
- 您可以使用转译器，例如广受欢迎的Babel。这会将模板文字转换为 Internet Explorer 11 能够理解的 ECMAScript 5 语法。
- 您可以选择不支持 Internet Explorer 11，并坚持支持 Edge 和其他具有原生 ECMAScript 6 支持的浏览器，尽管这通常不是一个选项。
回答by Gautham Nookala
It is not the most elegant solution, but I solved this myself by minifying my multiline template (Vue) string, and encompassing it within single quotes instead of back ticks. This can be automated as part of the build step, so your code still looks legible for development.
这不是最优雅的解决方案，但我自己通过缩小我的多行模板 (Vue) 字符串解决了这个问题，并将其包含在单引号中而不是反引号中。这可以作为构建步骤的一部分自动化，因此您的代码在开发时看起来仍然清晰易读。
Also ensure that any inner strings (like classNames, etc.) are double quoted so you don't accidentally terminate the string, thereby causing template errors.
还要确保任何内部字符串（如 classNames 等）都用双引号引起来，这样您就不会意外终止字符串，从而导致模板错误。
