Question

新的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做什么。

有没有办法直接将新模板语法用于生产用途？还是我们陷入困境？

Answer 1

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

您必须放弃对不支持模板文字或使用Babel的浏览器的支持。

Answer 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">' + ...
    }
}

但是使用转换器要容易得多，因为在每个时间内支持两个实现是一件非常繁琐的事情。

``模板语法 - 优雅的降级

2 个答案: