EJS语法疑问：为何分开的if/else语句编译报错？

问题本质 #

EJS的模板编译规则结合JavaScript的自动分号插入（ASI）机制，导致了这个看似奇怪的语法错误。虽然两种写法在纯JavaScript中都合法，但EJS拆分代码块的方式破坏了if-else语句的语法连续性。

错误写法的编译逻辑 #

当你把if的闭合}和else拆分成两个独立的<% %>标签时：

<% if(firstp==="Welcome"){%>
    <%-include('./partials/nav2.ejs')%>
<%}%>
<%else%>
<%{ %>
    <%-include('./partials/nav.ejs')%>
<%  } %>

EJS会将每个<% %>内的代码单独提取，标签之间的位置会被插入隐式换行，最终生成的JavaScript代码类似：

if(firstp==="Welcome"){
    // 渲染nav2的逻辑
}
; // JavaScript自动分号插入机制在这里添加分号
else
; // 再次插入分号
{
    // 渲染nav的逻辑
}

ASI会在}后自动插入分号，直接结束if语句。此时后面的else没有对应的if语句，自然触发"Unexpected token 'else'"的语法错误。

正确写法的原理 #

而将}else{放在同一个<% %>标签内时：

<% if(firstp==="Welcome"){%>
    <%-include('./partials/nav2.ejs')%>
<%}else{ %>
    <%-include('./partials/nav.ejs')%>
<%  } %>

编译后的JavaScript是连续的if-else结构：

if(firstp==="Welcome"){
    // 渲染nav2的逻辑
}else{
    // 渲染nav的逻辑
}

这种写法没有被拆分，ASI不会插入多余的分号，else能正确和前面的if配对，语法完全合法，因此可以正常运行。

总结 #

EJS要求if的闭合}和对应的else必须处于同一个<% %>代码块中，不能拆分到不同标签里，否则会破坏JavaScript语句的连续性，触发语法错误。

内容的提问来源于stack exchange，提问作者Phillip Feldman