DimSum DimSum - 3 months ago 16
jQuery Question

older browsers won't recognize ` in javascript

I'm building a calculator with Foundation range slider. It's working fine in Safari 9, latest Chrome and Firefox for both Mac and Windows, Edge 14. But it doesn't work in Safari 8 or IE 11. In Safari 8, I see an error SyntaxError: Invalid character: '`'
The javascript code looks like this:

Foundation.Move(moveTime, $hndl, function() {
//adjusting the left/top property of the handle, based on the percentage calculated above
$hndl.css(lOrT, `${movement}%`);

if (!_this.options.doubleSided) {
//if single-handled, a simple method to expand the fill bar
_this.$fill.css(hOrW, `${pctOfBar * 100}%`);
} else {
//otherwise, use the css object we created above
_this.$fill.css(css);
}
});


If I change ` to ', it doesn't work in any browser. Anyone has any idea? Thanks!

Answer

If you have to support older browsers, your only real choice is to not use template literals. It is a relatively new feature in JavaScript, and so older browsers will not understand how to interpret it.

Here it the link to the documentation which shows it's support:

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

You can always to back to the "old fashioned way":

this

 `${movement}%`

becomes this:

 movement + "%"
Comments