jinja2 模板变量无法直接在外部 js 文件中解析，但可通过内联 `<script>` 标签将变量注入全局作用域，再由外部 js 文件引用，实现安全、简洁的数据传递。</script>
在 Flask、Django（配合 jinja2 后端）等基于 Jinja2 的 Web 框架中，开发者常需将服务端生成的数据（如用户 ID、配置项、API 路径）传递给前端逻辑。虽然 {{ var }} 在 HTML 内联 <script> 中可直接渲染，但一旦 JS 代码移至 .js 外部文件，Jinja 就不再处理该文件——它被浏览器作为静态资源加载，不经过模板引擎。</script>
✅ 正确做法：在 HTML 模板中，先用内联 <script> 定义全局变量，再引入外部 JS 文件</script>：
<body>
<h1>Welcome, {{ user.name }}!</h1>
<!-- ✅ 安全注入：确保 JSON 序列化，防 XSS -->
<script>
const APP_CONFIG = {{ config | tojson | safe }};
const CURRENT_USER_ID = {{ user.id | int }};
</script>
<!-- ⚠️ 必须放在变量定义之后 -->
<script src="{{ url_for('static', filename='js/externalJs.js') }}"></script>
</body>? 关键注意事项：
- 永远使用 |tojson 过滤器（Jinja2 内置）序列化 Python 对象，它会自动转义特殊字符并输出合法 JSON，避免 XSS 和语法错误。例如：{{ {'name': 'Alice & Bob'} | tojson }} → {"name": "Alice & Bob"}。
- 避免直接写 {{ var }}（尤其当 var 是字符串或含引号时），否则易导致 JS 语法错误或 XSS 漏洞。
- 变量声明应置于 <script> 标签内，且<strong>必须在外部 JS 引入之前，确保执行顺序。</script>
- 如需模块化，可在外部 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 模板驱动的轻量应用，上述 <script> 注入法是最直接、可靠、无需额外依赖的解决方案。</script>
立即学习“Java免费学习笔记（深入）”；
