HTML5, ES6 template string polyfill

Question

For our application we need to use new feature template string.

var verLongKey= `834r845784576485
y84ery5845y485yu843
483y53485684576845
jhu87843647356756745==457485,mh
ererthe8t0998785==ery8`;

But old browsers(like android default browsers) don't support template string.

How can I get polyfill for this feature? Tried babel. We got this polyfill working for all features but template string. Currently using modernizr to detect support and show alert to use other browser. This approach is annoying for users. How can i get some polyfill to make this work on the non supporting browsers?

What made us this template strings. The problem is i can't use these tools(trceur,babel) as this file is generated on the production from puppet. There is no way we will run these transpilers there. want to add some polyfill on the browser side. the key contains some \n characters in it need to preserve those. I want some polyfill so, i can include before the configs js file.

Lynsey

What makes you "need" template strings? You can do everything pretty easily without them too, you know... – Gazelle

@MadaraUchiha agree, same result can be achieved with ES5: https://mcmap.net/q/10182/-html5-es6-template-string-polyfill – Person

@MadaraUchiha Having to backport a lot of code which uses template strings extensively is not fun, considering that the use of templates allows dynamically templated code embedded in strings (Javascript, SQL, etc.) to actually be readable and maintainable. – Dislocate

@Dislocate But he isn't backporting, he's looking for a polyfill, meaning he currently isn't using it, but wants to. Also, Using template strings for SQL is a really bad idea – Gazelle

Answer 1

There are 3 main ES6 polyfills that can give you template string support but none of them have full support as you can see at kangax's ECMAScript support table.

• Traceur - This is Google's ECMAScript polyfill that support some ECMAScript 6 and ECMAScript next features, it have 4/5 support for template strings, there is no toString conversion.

• Babel - Another ECMAScript polyfill, have more support in general but also have only 4/5 support for template strings, also no toString conversion.

• es6-shim - I'm not sure if it's even developed anymore, but it doesn't have template strings anyway.

But you might want to think twice before using template string, it just a syntactic sugar for string with + to add variables and \ to have multi lines.

Terbia

The problem is i can't use these tools as this file is generated on the production from puppet. There is no way we will run these transpilers there. want to add some polyfill on the browser side. the key contains some \n characters in it need to preserve those. I want some polyfill so, i can include before the configs js file. – Lynsey

I know this is syntactic sugar. But the way unix read file and the pupper replace the keys, needed some way to preserve \n characters. template string was the solution. – Lynsey

Traceur and Babel are transpilers, not polyfills. Running them clientside might be possible but is not recommended. – Karyosome

The "syntactic sugar" of template strings looks much nicer than escaping every newline with \ , or mass concatenation with +. Especially when you need to insert variables inside said string. – Karyolymph

I would also note it's not really "sugar" if you have no control over the strings or how many newlines they will contain, in which case escaping is not possible... – Impendent