Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

jquery - JavaScript backtick multiline string not working in Internet Explorer

I have a large HTML string contained in a var. I'm using it to write to innerHTML.

The first example (with backtick syntax), which is the simplest, does not work in 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?

Does not work in 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;

Works in 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('
');

Works in Internet Explorer

Single quote ' with linebreak

https://jsfiddle.net/5qzLL4j5/

var message =
'<p>this</p> 
<p>is</p> 
<p>a</p> 
<p>multiline</p> 
<p>string</p>'
 ;
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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).

Solution

  1. 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.
  2. You could opt-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.

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...