Nodejs 前台script里面怎么引用ejs变量

Nodejs 前台script里面怎么引用ejs变量

<script>
var ss= <%= param.username %>;
var aa = param.username;
console.log(ss);
console.log(aa);
</script>

我试了两种： ss的结果:Unexpected token ILLEGAL aa的结果:param未定义

5 回复

在使用 EJS 模板引擎时，你可能需要在前端 JavaScript 中引用后端传递的变量。然而，直接在 <script> 标签中插入 EJS 变量可能会遇到一些问题。下面是一个正确的示例，展示了如何在前端 JavaScript 中正确地引用 EJS 变量。

示例代码

假设你在后端通过 EJS 渲染页面时传递了一个 username 变量：

// 后端代码示例 (Express.js)
res.render('your-template', { username: 'JohnDoe' });

然后在你的 EJS 模板文件中，你可以这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS Example</title>
</head>
<body>
    <h1>Welcome, <%= username %>!</h1>

    <script>
        // 正确引用 EJS 变量的方式
        var ss = '<%= username %>';
        
        // 或者使用 JSON.stringify 如果你需要传递更复杂的对象
        var user = {
            name: '<%= username %>',
            email: '<%- email %>'
        };
        
        console.log(ss); // 输出: JohnDoe
        console.log(user.name); // 输出: JohnDoe
    </script>
</body>
</html>

解释

  1. 正确引用 EJS 变量：

    • 使用 <%= ... %> 语法来输出变量的值。
    • 在 <script> 标签内部，你需要确保 EJS 变量被正确地转义和插入到 JavaScript 代码中。

  2. 避免非法字符：

    • 直接将 EJS 表达式插入到 JavaScript 变量中（如 var aa = param.username;）会导致错误，因为 param 并不存在于客户端的 JavaScript 环境中。
    • 使用 <%= ... %> 语法可以确保变量被正确地插入并转义。

  3. JSON 对象传递：

    • 如果你需要传递一个包含多个属性的对象，可以使用 JSON.stringify 方法来确保数据正确地转换为 JavaScript 对象。

通过这种方式，你可以在前端 JavaScript 代码中安全地引用后端传递的 EJS 变量。


放在一个标签，然后再取标签。

var ss= “<%= param.username %>”;

增加引号，如果param.username为空的话，打印出来的脚本是 var ss = ; 这样肯定会报错的。

加了引号就变成了 var ss = “”;

这样就ok了。

aa的结果显而易见。

搞定，谢谢

要在EJS模板中将后端的变量传递到前端的JavaScript脚本中，你需要确保正确地嵌入EJS变量。在你的例子中，<%= param.username %> 是正确的语法用于嵌入EJS变量，但你需要确保 param.username 在服务器端已经被正确设置。

以下是修正后的示例代码：

示例代码

假设你有一个Express应用，并且你在路由中设置了 param 对象：

// server.js 或 app.js
const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  const param = { username: 'JohnDoe' };
  res.render('index', { param });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

然后在 views/index.ejs 文件中，你可以这样使用变量：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>EJS Example</title>
</head>
<body>
  <script>
    // 正确的方式
    var ss = '<%= param.username %>';
    console.log(ss);  // 输出 "JohnDoe"

    // 如果你想在JavaScript对象中使用这个变量
    var user = {
      name: '<%= param.username %>'
    };
    console.log(user.name);  // 输出 "JohnDoe"
  </script>
</body>
</html>

解释

  1. 嵌入EJS变量：使用 <%= param.username %> 的方式将EJS变量插入到HTML中。
  2. 确保变量已设置：确保在服务器端渲染页面之前已经设置了 param 对象。
  3. JavaScript对象中的使用：如果你需要在JavaScript对象中使用这个变量，可以像示例中的 user 对象那样做。

通过这种方式，你可以正确地在前端JavaScript中引用后端的EJS变量。

回到顶部