巧用 EJS 条件语句：处理字符和连字符数组的妙招

javascript

2024-03-14 08:45:25

巧用 EJS 条件语句，轻松应对循环中字符和连字符

问题引述

在 EJS 模板中，需要在一个由字符和连字符组成的数组中区分两类元素。通过 if 语句，根据条件输出不同的 HTML 元素，达到区分显示的目的。

解决方案

步骤指南

使用 forEach 方法遍历数组。
在每次迭代中，使用 if 语句检查当前项是否为连字符（"-"）。
根据条件输出不同的 HTML 元素。
输出当前项的值。
关闭 HTML 元素。

代码示例

<% quote.forEach(letter => { %>
    <% if (letter == "-") { %>
        <span class="quote-letter hyphen">-</span>
    <% } else { %>
        <span class="quote-letter"><%= letter %></span>
    <% } %>
<% }) %>

解释

在 EJS 中，"==" 运算符用于比较变量。它比直接比较变量更安全，因为它可以自动将变量转换为适当的数据类型。

完整示例

<% quote.forEach(letter => { %>
    <% if (letter == "-") { %>
        <span class="quote-letter hyphen">-</span>
    <% } else { %>
        <span class="quote-letter"><%= letter %></span>
    <% } %>
<% }) %>

输出

<span class="quote-letter">H</span>
<span class="quote-letter">e</span>
<span class="quote-letter">l</span>
<span class="quote-letter">l</span>
<span class="quote-letter">o</span>
<span class="quote-letter hyphen">-</span>
<span class="quote-letter">w</span>
<span class="quote-letter">o</span>
<span class="quote-letter">r</span>
<span class="quote-letter">l</span>
<span class="quote-letter">d</span>