JavaScript backtick multiline string not working in IE

Question

I have a large HTML string contained in var . I use it to write to innerHTML .

The first example (with backtick syntax), which is the simplest, does not work in IE11.

Is there a way to get the first example to work in IE11 without using array or newline characters?

Not working in IE

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 IE

Array join

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 IE

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

Answer 1

Problem

The return line syntax for a string is Template Literal , which allows you to interpolate variables in string and multiline strings. They are not supported by IE11 (see here: ES6 mapping table ).

Decision

• You can use a transporter, for example, the ever-popular Babel . This converts the template literal to ES5 syntax that IE11 understands.
• You can opt out of supporting IE11 and supporting support for Edge and other browsers that have built-in support for ES6, although this is usually not an option.