
jinja2 模板变量无法直接在外部 js 文件中使用,但可通过内联 `
在 Flask、Django(启用 Jinja2)等支持 Jinja2 的 Web 框架中,模板引擎仅处理 .html(或 .j2)文件中的 {{ }} 和 {% %} 语法;而外部 .js 文件由浏览器直接加载,不经过服务端渲染,因此其中的 {{ var }} 不会被解析,直接导致语法错误或空值。
✅ 正确做法:在 HTML 模板中,先用内联 ,确保变量在外部脚本执行前已挂载到全局作用域(如 window 或独立常量):
Hello, {{ user.name }}!
⚠️ 关键注意事项:
- 永远使用 | tojson 过滤器(Jinja2 内置)序列化 Python 对象,它会自动转义特殊字符、添加引号,并生成合法的 JavaScript 字面量(如字符串加双引号、None → null、True → true),防止 XSS 和语法错误;
- 避免直接写 const myVar = {{ var }}(未过滤),尤其当 var 是字符串或含 HTML 内容时,极易引发解析失败或安全漏洞;
- 不要依赖 window.myVar 隐式挂载,显式声明(const / let)更清晰可控;若需跨模块访问,可统一挂载至 window.APP_DATA;
- 外部 JS 中应校验变量存在性:
// externalJs.js if (typeof APP_CONFIG !== 'undefined') { console.log('User ID:', APP_CONFIG.userId); } else { console.error('APP_CONFIG not provided by template'); }
? 进阶建议:对复杂场景(如多页面共享配置),可封装为自定义 Jinja 宏或使用 data-* 属性 + document.currentScript 动态提取,但上述
立即学习“Java免费学习笔记(深入)”;










