
jinja2 模板变量无法直接在外部 js 文件中解析,但可通过内联 `
在 Flask、Django(配合 jinja2 后端)等基于 Jinja2 的 Web 框架中,开发者常需将服务端生成的数据(如用户 ID、配置项、API 路径)传递给前端逻辑。虽然 {{ var }} 在 HTML 内联
✅ 正确做法:在 HTML 模板中,先用内联 :
Welcome, {{ user.name }}!
? 关键注意事项:
- 永远使用 |tojson 过滤器(Jinja2 内置)序列化 Python 对象,它会自动转义特殊字符并输出合法 JSON,避免 XSS 和语法错误。例如:{{ {'name': 'Alice & Bob'} | tojson }} → {"name": "Alice & Bob"}。
- 避免直接写 {{ var }}(尤其当 var 是字符串或含引号时),否则易导致 JS 语法错误或 XSS 漏洞。
- 变量声明应置于
- 如需模块化,可在外部 JS 中封装初始化函数,例如:
// externalJs.js
function initApp(config, userId) {
console.log('Config loaded:', config);
fetch(`/api/users/${userId}`)
.then(r => r.json())
.then(data => console.log('User data:', data));
}
// 页面加载后调用(确保 APP_CONFIG 已存在)
if (typeof APP_CONFIG !== 'undefined' && typeof CURRENT_USER_ID !== 'undefined') {
initApp(APP_CONFIG, CURRENT_USER_ID);
}? 进阶建议:对复杂场景,可考虑通过 data-* 属性或自定义事件传递数据;若项目已用构建工具(如 Vite/Webpack),也可通过环境变量 + 构建时注入方式替代运行时模板注入。但对大多数 Jinja2 模板驱动的轻量应用,上述
立即学习“Java免费学习笔记(深入)”;










