如何在 ejs 中包含 JavaScript

在 ejs 中包含 JavaScript 代码可以让程序员在模板中实现动态的逻辑操作和数据处理。ejs 是一种模板引擎，它允许开发者在 HTML 中嵌入 JavaScript 代码，并通过模板引擎的渲染机制将代码和数据动态地渲染为最终的 HTML。

下面是一些在 ejs 中包含 JavaScript 的常用方法和技巧:

1. 插值处理

ejs 使用 <% %> 标签来包含 JavaScript 代码，此标签内的代码将会在渲染过程中执行。通过插值处理，我们可以在模板中插入数据或者进行简单的逻辑处理。

<% let name = 'John'; %>
<h1>Hello <%= name %>!</h1>

在上面的例子中，我们定义了一个变量 name，然后通过 <%= %> 标签将变量的值插入到 HTML 中。最终渲染的结果是 <h1>Hello John!</h1>。

2. 循环和条件语句

ejs 支持使用 JavaScript 的循环和条件语句来动态生成 HTML。可以使用 <% %> 标签来包含 JavaScript 代码块，然后使用 <%= %> 标签插入需要显示的数据。

<% for(let i = 0; i < fruits.length; i++) { %>
  <% if(fruits[i].ripe) { %>
    <p><%= fruits[i].name %> is ripe!</p>
  <% } else { %>
    <p><%= fruits[i].name %> is not ripe.</p>
  <% } %>
<% } %>

在上面的例子中，我们使用循环语句遍历一个名为 fruits 的数组，然后使用条件语句判断每个水果是否成熟。最终渲染的结果将根据数组的内容动态生成。

3. 自定义函数

在 ejs 中，我们可以定义和使用自定义的 JavaScript 函数来实现更复杂的逻辑操作。

<% function capitalize(str) { %>
  <% return str.charAt(0).toUpperCase() + str.slice(1); %>
<% } %>

<h1><%= capitalize(name) %></h1>

在上面的例子中，我们定义了一个名为 capitalize 的函数，该函数用于将传入的字符串首字母大写。然后，我们在模板中调用这个函数，并将 name 变量作为参数传递进去。

以上就是在 ejs 中包含 JavaScript 的一些常用方法和技巧。通过这些方法，程序员可以在模板中实现丰富的动态操作和数据处理。

代码片段：

```ejs
<% let name = 'John'; %>
<h1>Hello <%= name %>!</h1>

<% for(let i = 0; i < fruits.length; i++) { %>
  <% if(fruits[i].ripe) { %>
    <p><%= fruits[i].name %> is ripe!</p>
  <% } else { %>
    <p><%= fruits[i].name %> is not ripe.</p>
  <% } %>
<% } %>

<% function capitalize(str) { %>
  <% return str.charAt(0).toUpperCase() + str.slice(1); %>
<% } %>

<h1><%= capitalize(name) %></h1>