在EJS( Embedded JavaScript)模板中,我们可以非常方便地将JavaScript代码嵌入到HTML模板中,以实现动态的页面渲染。以下是五种巧妙嵌入JavaScript代码的方法,让你在EJS模板中游刃有余:
1. 使用 <%= %> 标签
EJS模板中最常见的嵌入JavaScript代码的方式是使用 <%= %> 标签。这种方式可以将JavaScript代码输出到HTML页面中。
<%
// JavaScript代码
var name = "Alice";
var greeting = "Hello, " + name + "!";
%>
<p><%= greeting %></p>
2. 使用 <% %> 标签
与 <%= %> 标签不同,<% %> 标签用于执行JavaScript代码,但不会将结果输出到HTML页面中。
<%
// JavaScript代码
var numbers = [1, 2, 3, 4, 5];
var sum = numbers.reduce(function(a, b) { return a + b; }, 0);
// ...
%>
3. 使用 <%- %> 标签
<%- %> 标签结合了 <%= %> 和 <% %> 的功能,可以执行JavaScript代码并输出结果到HTML页面中。
<%-
// JavaScript代码
var user = { name: "Bob", age: 25 };
// ...
-%>
<div>
<h1>User Information:</h1>
<p>Name: <%= user.name %></p>
<p>Age: <%= user.age %></p>
</div>
4. 使用 JavaScript 对象属性
在EJS模板中,你可以将JavaScript对象属性直接嵌入到HTML标签中,实现动态内容渲染。
<div data-user-id="<%= user.id %>" data-user-name="<%= user.name %>"></div>
5. 使用 JavaScript 函数
在EJS模板中,你可以定义JavaScript函数,并在HTML标签中使用这些函数。
<%
// JavaScript函数
function formatDate(date) {
return date.toISOString().split('T')[0];
}
%>
<p>Date: <%= formatDate(new Date()) %></p>
以上就是EJS模板中巧妙嵌入JavaScript代码的五种方法。希望这些方法能够帮助你更好地在EJS模板中实现动态内容渲染。
