Template literals working on other browser except IE

Question

I am working on javascript and using \"Template literals\", which is working on the Chrome and Firefox, but it is not working on the Internet Explorer(IE).

相关标签:

Answer 1

Template literals are ES6, and IE supports very few ES6 features. It doesn't support template literals.

For what you're doing, simply do console.log(a) instead:

var a = 10;
console.log(a)

But if your real code is more complicated than that, you'll either have to concatenate manually, eg:

`foo${somevar}bar${somevar2}baz`

change to

'foo' + somevar + 'bar' + somevar2 + 'baz'

Or, a better option, if you like the syntax of template literals and don't like plain string concatenation, would be to integrate Babel into your build process to transpile ES6+ syntax (including template literals) to ES5 automatically:

https://babeljs.io/repl/

(Babel will not only transpile template literals, it'll transpile pretty much all of the newer syntax to ES5, like destructuring, arrow functions, async/await, etc - for larger codebases, it's pretty much essential, allowing the programmers to write in the latest and greatest version of the language while remaining compatible with ancient browsers like IE)

Answer 2

Another option is if you already are using lodash to switch to its _.template function which allows a lot more than just templating literal functionality and has wide browser support.

var compiled = _.template('hello ${ user }!');
console.log(compiled({ 'user': 'pebbles' }));   // => 'hello pebbles!'

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>