EJS模板编译报错Unexpected token ';' 问题求助

这个SyntaxError的根源很明确——你在EJS里写switch-case的时候，没有给每个case对应的HTML内容包裹JavaScript代码块（{}），导致EJS编译生成的JavaScript语法不合法。

问题分析 #

EJS会把<% %>标签里的内容转换成纯JavaScript代码执行。当你写case 'Hexadecimal':之后直接放HTML，编译后的代码会变成这样：

case 'Hexadecimal':
<div class="form-group col-md-4">...</div>
break;

显然，HTML标签不属于JavaScript语法，这就触发了"Unexpected token"的错误。

修正方案 #

给每个case的代码块加上{}，明确case的范围，让EJS能正确解析语法。下面是修正后的switch-case部分代码：

<% switch(values.name_variable_types) {%>
<% case 'Hexadecimal': { %>
<div class="form-group col-md-4">
<label for="<%= values.name_variable %>"><%= values.name_variable %></label>
<input type="text" class="form-control" name="<%= values.name_variable %>" value="<%= values.value_variable %>">
</div>
<% break; %>
<% } %>
<% case 'Boolean': { %>
<div class="form-group col-md-4">
<label for="<%= values.name_variable %>"><%= values.name_variable %></label>
<select class="form-control" name="<%= values.name_variable %>" id="<%= values.name_variable %>">
<option value="<%= values.value_variable %>"><%= values.value_variable %></option>
<% if(values.value_variable === "ON") {%>
<option value="<%= 'OFF' %>">OFF</option>
<% }else {%>
<option value="<%= 'ON' %>">ON</option>
<% } %>
</select>
</div>
<% break; %>
<% } %>
<% case 'Integer': { %>
<div class="form-group col-md-4">
<label for="<%= values.name_variable %>"><%= values.name_variable %></label>
<input type="number" class="form-control" name="<%= values.name_variable %>" value="<%= values.value_variable %>" min="<%= values.start_range_variable %>" max="<%= values.end_range_variable %>" step="<%= values.step_variable %>" >
</div>
<% break; %>
<% } %>
<% case 'Float': { %>
<div class="form-group col-md-4">
<label for="<%= values.name_variable %>"><%= values.name_variable %></label>
<input type="number" class="form-control" name="<%= values.name_variable %>" value="<%= values.value_variable %>" min="<%= values.start_range_variable %>" max="<%= values.end_range_variable %>" step="<%= values.step_variable %>" >
</div>
<% break; %>
<% } %>
<% default: { %>
<div class="alert alert-success">
<p>A value had no variable type</p>
</div>
<% } %>
<% } %>

完整修正后的视图代码 #

把上面的switch部分替换到你原来的代码中，完整代码如下：

<%- include("layouts/_header") %>
<div class = "container" style="padding-top: 50px">
<div class="row">
<form class="col-12" action="/create_config" method="POST">
<% categories.forEach((category) => {%>
<div class="card mb-4">
<div class="card-header">
<%= category.name_var_category %>
</div>
<% data.forEach((values) => {%>
<% if (values.id_variable_category === category.id) {%>
<% switch(values.name_variable_types) {%>
<% case 'Hexadecimal': { %>
<div class="form-group col-md-4">
<label for="<%= values.name_variable %>"><%= values.name_variable %></label>
<input type="text" class="form-control" name="<%= values.name_variable %>" value="<%= values.value_variable %>">
</div>
<% break; %>
<% } %>
<% case 'Boolean': { %>
<div class="form-group col-md-4">
<label for="<%= values.name_variable %>"><%= values.name_variable %></label>
<select class="form-control" name="<%= values.name_variable %>" id="<%= values.name_variable %>">
<option value="<%= values.value_variable %>"><%= values.value_variable %></option>
<% if(values.value_variable === "ON") {%>
<option value="<%= 'OFF' %>">OFF</option>
<% }else {%>
<option value="<%= 'ON' %>">ON</option>
<% } %>
</select>
</div>
<% break; %>
<% } %>
<% case 'Integer': { %>
<div class="form-group col-md-4">
<label for="<%= values.name_variable %>"><%= values.name_variable %></label>
<input type="number" class="form-control" name="<%= values.name_variable %>" value="<%= values.value_variable %>" min="<%= values.start_range_variable %>" max="<%= values.end_range_variable %>" step="<%= values.step_variable %>" >
</div>
<% break; %>
<% } %>
<% case 'Float': { %>
<div class="form-group col-md-4">
<label for="<%= values.name_variable %>"><%= values.name_variable %></label>
<input type="number" class="form-control" name="<%= values.name_variable %>" value="<%= values.value_variable %>" min="<%= values.start_range_variable %>" max="<%= values.end_range_variable %>" step="<%= values.step_variable %>" >
</div>
<% break; %>
<% } %>
<% default: { %>
<div class="alert alert-success">
<p>A value had no variable type</p>
</div>
<% } %>
<% } %>
<% } %>
<% }) %>
</div>
<% }) %>
<div class="form-group row">
<div class="col-sm-10 pt-3">
<button type="submit" class="btn btn-primary">Géréner Fichier Config</button>
</div>
</div>
</form>
</div>
</div>
<%- include("layouts/_footer") %>

这样修改后，EJS就能正确编译switch-case结构，根据不同的变量类型渲染对应的表单元素了。

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