IE11 throwing "SCRIPT1014: invalid character" where all other browsers work

Question

Here's a new one, IE11 is throwing errors on code that works in every other browser.

Anyway, after a few hours of "fixing" code so that IE11 doesn't fall on its own face I have come across an error I just cannot seem to find a solution to. Here is the code in question:

$('input[name="messageAccount"]').change(function () {
    $aButton.show();
    var addedIds = $("#hdnfield").val();
    if (addedIds == null || addedIds === "") {
        $("#hdnfield").val(this.value);
    } else {
        $("#hdnfield").val(`${addedIds}${this.value}`);
    };
});

This is nested on the inside of the success call in an Ajax request. IE's debugger is saying the error is coming from the content of the else statement but it's also reading all the brackets wrong. For example the opening parenthesis on this function is being "closed" after the closing bracket for the Ajax request... (hopefully that made sense).

Has anyone else had a similar issue with IE before? I've got a number of other bugs to fix so if there are any replies I will post back as soon as I can. Thanks in advance.

EDIT: just for reference I am currently running this locally and is part of what will become an internally hosted web app.

Answer 1

It's because "`" (template strings) is not supported by IE : http://caniuse.com/#search=string

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

See https://stackoverflow.com/a/27678299/2195875

To avoid this error you can either use a ES6 to ES5 transpiler, or just directly write valid ES5 javascript:

instead of

`string text ${expression} string text`

write

"string text "+expression+" string text"

Answer 2

You can also add polyfill to your html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"/>