本文介绍如何在 Pug 模板中将服务端定义的数组（如 projectTemplate）直接、安全地序列化并注入到客户端 JavaScript 变量中，避免手动拼接字符串或在 <script> 标签内使用 each 循环。

本文介绍如何在 pug 模板中将服务端定义的数组（如 `projecttemplate`）直接、安全地序列化并注入到客户端 javascript 变量中，避免手动拼接字符串或在 `<script>` 标签内使用 `each` 循环。</script>

在 Pug 中，模板逻辑与客户端脚本是分离的：each 迭代仅适用于 HTML 输出阶段，不能直接在 script. 块内使用 Pug 的迭代语法（如 each photo in projectTemplate），因为 script. 是纯文本块，Pug 不会解析其中的模板指令。

但你完全无需手动循环拼接 JSON 字符串——Pug 提供了更简洁、更安全的方案：使用 !{...} 非转义插值，配合 JSON.stringify() 将服务端对象直接序列化为合法的 JavaScript 字面量。

✅ 正确做法如下：

-
  var projectTemplate = [
    { full: full250, tiny: tiny250, class: classPhotoset },
    { full: full249, tiny: tiny249, class: classPhotoset },
    { full: full248, tiny: tiny248, class: classPhotoset },
    { full: full247, tiny: tiny247, class: classPhotoset }
  ]

script.
  const availableImgs = !{JSON.stringify(projectTemplate)};

这段代码会在渲染时生成标准、格式正确且已转义的 JavaScript 数组，例如：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

立即学习“Java免费学习笔记（深入）”；

const availableImgs = [
  {"full":"path/to/full250.jpg","tiny":"path/to/tiny250.jpg","class":"photoset"},
  {"full":"path/to/full249.jpg","tiny":"path/to/tiny249.jpg","class":"photoset"},
  // ...
];

⚠️ 注意事项：

• !{...} 是非转义输出，必须确保传入 JSON.stringify() 的数据是可信的（即由服务端可控，不含恶意脚本）。对用户输入的数据务必先清洗或使用 #{...} 转义（但 #{JSON.stringify(...)} 会导致引号被双重编码，不可用）。
• 不要写成 #{JSON.stringify(...)} —— 它会将双引号转义为 "，破坏 JS 语法。
• 若需在浏览器中进一步处理，建议声明为 const 或 let，并确保该 <script> 块位于 DOM 准备就绪之后，或包裹在 DOMContentLoaded 中。

? 扩展提示：若需兼容旧版浏览器（如不支持 const），可改用 var availableImgs = ...；若数据量极大，也可考虑通过 fetch('/api/images') 异步加载，以解耦服务端模板与前端逻辑。

总之，借助 !{JSON.stringify(...)}，一行代码即可完成服务端数据到客户端 JS 的无缝桥接——简洁、安全、符合 Pug 最佳实践。