JavaScript backtick multiline string not working in Internet Explorer

Question

I have a large HTML string contained in a var. I\'m using it to write to innerHTML.

The first example (with backtick syntax), which is the

Answer 1

It is not the most elegant solution, but I solved this myself by minifying my multiline template (Vue) string, and encompassing it within single quotes instead of back ticks. This can be automated as part of the build step, so your code still looks legible for development.

Also ensure that any inner strings (like classNames, etc.) are double quoted so you don't accidentally terminate the string, thereby causing template errors.

Answer 2

Problem

The backtick syntax for a string is a Template Literal, which allows for interpolation of variables within a string and multiline strings. They are not supported by Internet Explorer 11 (see more here: ECMAScript 6 compatibility table).

Solution

1. You can use a transpiler, such as the ever-popular Babel. This will convert the template literal into the ECMAScript 5 syntax that Internet Explorer 11 understands.
2. You could opt-out of supporting Internet Explorer 11, and stick with support for Edge and other browsers that have native ECMAScript 6 support, though this is usually not an option.