`` Template Syntax - Graceful Degredation

Question

The new javascript template syntax is great. Super readable and powerful. I\'d like to start using it.

I tried this template:

function addGalleryItem(ima         


        

Answer 1

You can't use try...catch statement to catch syntax errors, because they are thrown even before the code is executed.

You either have to drop support for browsers which doesn't support template literals or use Babel.

Answer 2

Generally you can use eval to assert if the browser supports certain syntax changes:

var isTemplateSupported = true;
try {
    eval("``");
}
catch(e) {
    isTemplateSupported = false;
}
console.log("Supports Template Literals", isTemplateSupported);

So for your implementation:

var template;
try {
    template = eval("`<section class=\"imageGalleryItem\">`".....);
}
catch(e) {
    if(e instanceof SyntaxError) {
        template = '<section class="imageGalleryItem">' + ...
    }
}

But it's much easier to use a transpiler because it would be tedious to support two implementations every time you need a literal.