Nodejs中jade用#{}参数如何进行代码运算

Nodejs中jade用#{}参数如何进行代码运算

比如-var test = #{test} 这样都会报错 有什么办法用参数进行代码处理呢

3 回复

Node.js 中 Jade 使用 #{} 参数进行代码运算

在使用 Jade（现更名为 Pug）模板引擎时，你可能会遇到需要在模板中执行一些简单的 JavaScript 代码运算的情况。#{} 是用于插入变量值的语法，但如果你希望在模板中直接进行代码运算，则需要采取一些不同的方法。

示例场景

假设你有一个变量 test，你希望在模板中根据它的值进行一些运算并显示结果。

// server.js
const express = require('express');
const app = express();

app.set('view engine', 'pug');

app.get('/', (req, res) => {
    const test = 10;
    res.render('index', { test });
});

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

在这个例子中，我们使用 Express 框架来渲染一个 Pug 模板，并传递了一个名为 test 的变量。

在 Pug 模板中进行运算

在 Pug 模板中，你可以通过以下方式来实现变量的运算：

// views/index.pug
doctype html
html
  head
    title Jade Template Example
  body
    h1= "计算结果: " + (test + 5)

这里我们直接在 h1 标签中进行了简单的算术运算 (test + 5) 并将其结果显示出来。需要注意的是，Pug 模板中的表达式不能直接包含复杂的逻辑，它们主要用于简单的数据操作。

使用 block 和 extends

如果你有更复杂的逻辑需求，可以考虑使用 Pug 的 block 和 extends 功能来组织模板文件，从而在子模板中插入计算结果。

例如，定义一个基础模板 layout.pug：

// views/layout.pug
doctype html
html
  head
    title Jade Template Example
  body
    block content

然后，在具体的页面模板 index.pug 中扩展这个布局并插入计算结果：

// views/index.pug
extends layout

block content
  h1= "计算结果: " + (test + 5)

这种方式可以帮助你更好地组织和维护模板文件，特别是在大型项目中。

总结

在 Pug 模板中，虽然不能直接使用复杂的 JavaScript 代码，但可以通过简单的表达式进行基本的运算。对于更复杂的逻辑，建议使用 block 和 extends 来组织模板文件，以保持代码的整洁和可维护性。


= =吼吼 又知道了 在代码里面直接test就可以引用了 传入的参数相当于全局变量

在Node.js中使用Jade（现在称为Pug）模板引擎时，如果你想在模板中进行代码运算，并且希望将结果输出到HTML中，可以使用#{}语法来插入JavaScript表达式的计算结果。#{}语法会在渲染模板时自动转义内容，以防止XSS攻击。

示例

假设你有一个变量test，你想对其进行一些运算并将其结果显示在页面上。你可以这样做：

// 在服务器端设置变量
res.render('index', {
    test: 5
});

在你的Pug模板中：

// 直接输出运算后的值
p= 'Result: ' + (test + 10)

或者如果你想直接在#{}中进行运算并输出结果：

p Result: #{test + 10}

解释

  • #{}语法用于插入一个JavaScript表达式的结果。
  • p= 'Result: ' + (test + 10) 这种写法直接在模板中进行字符串拼接，并通过= key语法直接输出结果，不进行HTML转义。
  • p Result: #{test + 10} 这种写法直接在#{}中进行运算，并且会进行HTML转义。

注意事项

  • 如果你需要进行复杂的逻辑运算或条件判断，可以考虑在服务器端完成这些运算，然后将结果传递给模板。
  • 使用#{}语法时，确保表达式的输出是安全的，避免潜在的安全问题。

希望这能帮助你解决遇到的问题！

回到顶部