ES6 - Template strings hack for IE 11

Question

I'm using a long HTML Template script in JS file, like:

var TEMPLATE = `
<div>
  <ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
  </ul>
</div>`;

It works in all browsers(including Chrome, Safari, Firefox & EDGE) but not in Internet Explorer 11, 10.

Can you suggest how I can fix this?

It's because you're using [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) which [aren't supported in IE](https://caniuse.com/#feat=template-literals), you can change it to a _normal_ string or as @Michelangelo has said, use Babel — George, Oct 02 '18 at 10:35
Yes, I got it that "template literals aren't supported in IE". @Michelangelo, Can you describe how can I use Babel? I'm using AngularJS. — om_jaipur, Oct 02 '18 at 10:51
Possible duplicate of [Template literals not working in IE11 when "use strict" directive is used](https://stackoverflow.com/questions/40871705/template-literals-not-working-in-ie11-when-use-strict-directive-is-used) — Stuart, Oct 02 '18 at 11:04
@om. No, this is not a programming class and I am not a teacher. The docs are clear. You have to figure this one out on your own. — Michelangelo, Oct 02 '18 at 11:13
Got it @Michelangelo, I have converted my code with https://babeljs.io/repl and now it is working. Thanks!! — om_jaipur, Oct 02 '18 at 11:21

score 13 · Accepted Answer · answered Feb 02 '19 at 08:51

If you don't need any of the advanced features available in template literals (such as ${foo}), you might also consider using regular quotes and just escape the new lines to prevent syntax errors, like so:

var list = '\
    <div>\
        <ul>\
            <li>first</li>\
            <li>second</li>\
            <li>third</li>\
        </ul>\
   </div>\
';

ES6 - Template strings hack for IE 11

1 Answers1