jinja2 模板变量无法直接在外部 js 文件中使用，但可通过内联 `<script>` 标签将变量注入全局作用域，再由外部 js 文件读取，实现安全、简洁的跨文件数据传递。</script>
在 Flask、Django（启用 Jinja2）等支持 Jinja2 的 Web 框架中，模板引擎仅处理 .html（或 .j2）文件中的 {{ }} 和 {% %} 语法；而外部 .js 文件由浏览器直接加载，不经过服务端渲染，因此其中的 {{ var }} 不会被解析，直接导致语法错误或空值。
✅ 正确做法：在 HTML 模板中，先用内联 <script> 定义变量，再引入外部 JS 文件</script>，确保变量在外部脚本执行前已挂载到全局作用域（如 window 或独立常量）：
<body>
<h1>Hello, {{ user.name }}!</h1>
<!-- ✅ 在 externalJs.js 之前定义 Jinja 变量 -->
<script>
// 推荐：使用 const 声明 + JSON 序列化，避免 XSS 风险
const APP_CONFIG = {
userId: {{ user.id | tojson }},
userName: {{ user.name | tojson }},
isAdmin: {{ user.is_admin | tojson }}
};
</script>
<!-- ✅ 外部 JS 在变量定义后加载 -->
<script type="text/javascript" src="{{ url_for('static', filename='js/externalJs.js') }}"></script>
</body>⚠️ 关键注意事项：
- 永远使用 | 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 动态提取，但上述 <script> 注入法仍是兼容性最好、调试最直观的标准方案。</script>
立即学习“Java免费学习笔记（深入）”；
