`` 模板语法 - 优雅降级答案

【问题标题】：`` Template Syntax - Graceful Degredation`` 模板语法 - 优雅降级
【发布时间】：2018-05-16 20:30:01
【问题描述】：

新的 javascript 模板语法很棒。超级可读且功能强大。我想开始使用它。

我试过这个模板：

function addGalleryItem(imageData, file) { 
    try {
        var template = `
            <section class="imageGalleryItem">
                <img src="${imageData}"/>
                <div class="itemTools" id="${file.name}">
                    <input type="text" class="description" name="description" placeholder="Description"/> <br />
                    <input type="button" name="mainImage" value="Main Image" onclick="makeMain(this)"/>
                    <input type="button" name="remove" value="Remove" onclick="removeImage(this)"/>
                </div>
            </section>
        `;
    } catch { 
        var template = '<section class="imageGalleryItem">' +
            '   <img src="' + imageData + '" />' +
            '   <div class="itemTools" id="' + file.name + '">' +
            '       <input type="text" class="description" name="description" placeholder="Description"/>'+
            '       <br />' +
            '       <input type="button" name="mainImage" value="Main Image" onclick="makeMain(this)"/>' +
            '       <input type="button" name="remove" value="Remove" onclick="removeImage(this)"/>' +
            '   </div>' +
            '</section> ';
    }

    $('#imageGallery').append(template);

}

但亲爱的 IE 会因为反引号 (`) 而抱怨语法错误。 MSDN's article on the subject 推销 Edge 的强大功能，并没有提到要为 IE 做什么。

现在有没有办法直接将新模板语法用于生产用途？还是我们被困在转译中？

【问题讨论】：

使用 try...catch -.- 无法捕获语法错误
@Gothdo 是的，我知道。虽然习惯上会展示我们尝试过的东西，但我想不出还有什么可以尝试的。
如果没有中间步骤，您如何使用浏览器不支持的功能？
像这样的东西正是 Babel 解决的问题。

标签： javascript ecmascript-6

【解决方案1】：

您不能使用 try...catch 语句来捕获语法错误，因为它们甚至在代码执行之前就被抛出。

你要么必须放弃对不支持模板文字的浏览器的支持，要么使用 Babel。

【讨论】：

【解决方案2】：

一般你可以使用eval来断言浏览器是否支持某些语法变化：

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

所以对于您的实施：

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

但是使用转译器要容易得多，因为每次需要文字时支持两种实现会很乏味。

【讨论】：

感谢您的解决方法，我同意，这很麻烦。但至少存在一些东西。