如何将JS函数嵌入EJS文件？尝试独立EJS引入方法无效

EJS分服务器端渲染逻辑和客户端浏览器执行逻辑，两种场景的函数处理方式完全不同，你之前的方法行不通是因为搞混了这两个场景：

一、服务器端渲染时调用的函数（比如处理数据、格式化内容） #

这类函数在Node.js服务器上运行，不能直接写在EJS里给客户端用，正确做法有两种：

1. 直接在渲染模板的Node.js代码中传入函数 #

先在Node.js里定义或导入函数，渲染EJS时把它作为模板变量传进去：

// Node.js（比如Express路由里）
function formatPrice(price) {
  return `$${price.toFixed(2)}`;
}

// 渲染EJS模板时传入函数
res.render('product', { formatPrice: formatPrice });

然后在EJS文件里直接调用：

<!-- product.ejs -->
<div class="price">
  <%= formatPrice(product.price) %>
</div>

2. 抽离成独立工具文件，导入后传给模板 #

如果函数很多，可以单独写个utils.js文件：

// utils.js
module.exports = {
  formatPrice: (price) => `$${price.toFixed(2)}`,
  formatDate: (date) => new Date(date).toLocaleDateString()
};

然后在Node.js里导入并传入模板：

const utils = require('./utils');
res.render('product', { utils: utils });

EJS里调用：

<%= utils.formatDate(product.createdAt) %>

二、客户端浏览器中运行的函数（比如DOM操作、交互逻辑） #

这类函数要在用户浏览器里执行，不能放在EJS的<% %>标签里（<% %>里的代码只在服务器端跑，不会输出到客户端页面），正确做法：

1. 直接在EJS里用<script>标签写函数 #

把函数写在EJS的<script>里，和普通HTML页面的写法一样：

<!-- 页面底部或合适位置 -->
<script>
function showToast(message) {
  const toast = document.createElement('div');
  toast.className = 'toast';
  toast.textContent = message;
  document.body.appendChild(toast);
  setTimeout(() => toast.remove(), 2000);
}

// 绑定到按钮点击
document.getElementById('notify-btn').addEventListener('click', () => {
  showToast('操作成功！');
});
</script>

2. 引入外部JS文件 #

把函数写在单独的JS文件里（比如public/js/app.js），然后在EJS里用<script>标签引入：

<script src="/js/app.js"></script>

注意：要确保你的Node.js服务器配置了静态资源服务（比如Express里用app.use(express.static('public'))），这样客户端才能访问到/js/app.js路径。

你之前方法无效的原因 #

你把函数放在独立EJS文件的<% %>里，然后想引入到JS文件——这逻辑不通：

• EJS文件是服务器端渲染用的，不能直接作为模块引入到客户端JS里
• <% %>里的代码只会在服务器执行，不会被输出到客户端页面，所以客户端JS根本拿不到这个函数

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