Template literals syntax is not working in IE11

Question

The back-tick character is not recognized as a Valid Character in IE11 when using the "use strict" directive while it works in other browsers, such as Chrome.

What is the interpretation of this behavior taking into consideration that IE11 is still widely used even among Windows 10 users??

        "use strict";

        function doIt() {
          let tt;
          tt = 50;
          alert(`${tt}`);
          alert("test");
        }
       doIt();

Error: { "message": "Invalid character", "filename": "http://stacksnippets.net/js", "lineno": 18, "colno": 17 }

What about Babel ? I think it's still not safe to use ES2015 without transpiler. — Belmin Bedak, Nov 29 '16 at 17:10
@Belmin, I was just following a simple tutorial and came across this problem but will consider transpilers — usefulBee, Nov 29 '16 at 17:15
Why focus on the use strict directive? Are you saying that it works in IE11 sloppy mode? — Bergi, Nov 29 '16 at 17:16
@Bergi, not sure what you mean by sloppy mode; it is simply not working in the Edge (Default) mode of IE11. And regarding the "focus on the use strict directive," I was just recording an observation. — usefulBee, Nov 29 '16 at 17:21
@usefulBee sloppy=non-strict. So it just doesn't work in IE11 at all, because it doesn't support (this) ES6 feature, regardless whether in strict mode or not. — Bergi, Nov 29 '16 at 17:24

score 61 · Accepted Answer · answered Nov 29 '16 at 17:40

If you look at the ECMAScript 6 compatibility table, you'll see that template literals are not supported by IE11. The "use strict"; statement doesn't really change anything, because before it is determined whether a code is in strict mode, it has to be parsed first, but it can't be parsed, because you're using syntax that the parser doesn't recognize.

If you want your code to work in IE11, you should transpile it with Babel.

score 2 · Answer 2 · answered Apr 26 '21 at 09:17

If you want to code just a short code snippet in modern Javascript, say ES6, but need a vanilla Javascript version of the code that works in an old browser, e.g. IE11, you could use the Babel REPL for transpilation.

Example:

let person = {
  name: "John Doe",
  city: "Doeville"
};

const markup = `
 <div class="person">
    <h2>
        ${person.name}
    </h2>
    <p class="city">This person lives in ${person.city}.</p>
 </div>
`;
document.body.innerHTML = markup;

gets transpiled into:

"use strict";

var person = {
  name: "John Doe",
  city: "Doeville"
};
var markup = "\n <div class=\"person\">\n    <h2>\n        ".concat(person.name, "\n    </h2>\n    <p class=\"city\">This person lives in ").concat(person.city, ".</p>\n </div>\n");
document.body.innerHTML = markup;

Template literals syntax is not working in IE11

2 Answers2

Linked

Related