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 模板驱动的轻量应用，上述