go 模板中的数组在服务端渲染时即被处理，无法直接在客户端 javascript 中动态索引；必须通过模板预生成 js 数组或用 `{{range}}` 在服务端完成遍历。
在 Go Web 开发中，常通过 HTML 模板（如 html/template）将后端数据（如 []string 或 []int）传递至前端。但一个常见误区是试图在 JavaScript 中“混合” Go 模板语法与运行时逻辑，例如：
<script>
for (var i = 0; i < 5; i++) {
html += "{{ index .Array " + i + "}}"; // ❌ 错误！i 是 JS 变量，模板引擎无法在运行时解析
}
</script>这段代码必然失败——因为 {{ index .Array " + i + "}} 是字符串拼接，而 Go 模板引擎在服务端早已完成执行，此时 i 还未定义，且模板不会对 JS 字符串内的双花括号做二次解析。
✅ 正确方案一：纯服务端渲染（推荐用于静态展示）
若只需一次性输出数组内容（如生成列表、表格），应完全交由 Go 模板处理，无需 JS：
// Go handler 示例
data := struct {
Array []string{"Apple", "Banana", "Cherry"}
}{}
t.Execute(w, data)<!-- HTML 模板 -->
<ul>
{{range .Array}}
<li>{{.}}</li>
{{end}}
</ul>输出结果：
立即学习“Java免费学习笔记（深入）”；
<ul> <li>Apple</li> <li>Banana</li> <li>Cherry</li> </ul>
你甚至可获取索引：
{{range $i, $v := .Array}}
<div>Index {{$i}}: {{$v}}</div>
{{end}}✅ 正确方案二：将 Go 数组序列化为 JS 数组（推荐用于交互逻辑）
若需在前端 JavaScript 中动态操作（如排序、搜索、响应用户事件），应先将 Go 数组安全注入为原生 JS 变量：
<script>
// ✅ 安全：Go 模板直接渲染为合法 JS 数组字面量
const jsArray = {{.Array}};
// 现在可在 JS 中自由操作
let html = "";
for (let i = 0; i < jsArray.length; i++) {
html += `<span>${jsArray[i]}</span>`;
}
document.getElementById("output").innerHTML = html;
</script>
<div id="output"></div>⚠️ 重要注意事项：
- {{.Array}} 要求 Go 类型支持 JSON 序列化（如 []string, []int, []struct{}），且字段需导出（首字母大写）；
- 若数组含特殊字符（如引号、换行），务必使用 js 函数转义，避免 XSS 或语法错误：
<script> const safeArray = {{.Array | js}}; </script> - 不要手动拼接 JSON 字符串（如 "[" + {{.Array}} + "]"），这极易破坏结构。
? 补充：为什么 {{index .Array i}} 在 JS 循环中无效？
因为 i 是客户端变量，而 {{index ...}} 是服务端模板动作，二者生命周期完全隔离：
- 服务端：模板引擎执行 {{index .Array 0}} → 输出 "Apple"，然后丢弃 .Array；
- 客户端：浏览器加载纯 HTML/JS，此时 .Array 已不存在，i 才刚开始变化。
✅ 最佳实践总结
| 场景 | 推荐方式 | 示例 |
|---|---|---|
| 仅渲染静态内容 | {{range}} 模板循环 | {{range .Items}}<p>{{.Name}}</p>{{end}} |
| 需 JS 动态操作 | {{.Array}} 直接序列化 | const items = {{.Items}}; items.map(...) |
| 含 HTML/用户输入内容 | 始终用 | js 安全转义 | const html = {{.UnsafeHTML | js}} |
通过清晰分离服务端模板渲染与客户端 JavaScript 执行，既能保障安全性，又能充分发挥两者优势。
