17370845950

go 模板中的数组在服务端渲染时即被处理，无法直接在客户端 javascript 中动态索引；必须通过模板预生成 js 数组或用 `{{range}}` 在服务端完成遍历。

在 Go Web 开发中，常通过 HTML 模板（如 html/template）将后端数据（如 []string 或 []int）传递至前端。但一个常见误区是试图在 JavaScript 中“混合” Go 模板语法与运行时逻辑，例如：

这段代码必然失败——因为 {{ index .Array " + i + "}} 是字符串拼接，而 Go 模板引擎在服务端早已完成执行，此时 i 还未定义，且模板不会对 JS 字符串内的双花括号做二次解析。

✅ 正确方案一：纯服务端渲染（推荐用于静态展示）

若只需一次性输出数组内容（如生成列表、表格），应完全交由 Go 模板处理，无需 JS：

// Go handler 示例
data := struct {
    Array []string{"Apple", "Banana", "Cherry"}
}{}
t.Execute(w, data)

{{range .Array}}
  
{{.}}
{{end}}

输出结果：

  
Apple
  
Banana
  
Cherry

你甚至可获取索引：

{{range $i, $v := .Array}}
  Index {{$i}}: {{$v}}
{{end}}

✅ 正确方案二：将 Go 数组序列化为 JS 数组（推荐用于交互逻辑）

若需在前端 JavaScript 中动态操作（如排序、搜索、响应用户事件），应先将 Go 数组安全注入为原生 JS 变量：

⚠️ 重要注意事项：

• {{.Array}} 要求 Go 类型支持 JSON 序列化（如 []string, []int, []struct{}），且字段需导出（首字母大写）；
• 若数组含特殊字符（如引号、换行），务必使用 js 函数转义，避免 XSS 或语法错误：

• 不要手动拼接 JSON 字符串（如 "[" + {{.Array}} + "]"），这极易破坏结构。

? 补充：为什么 {{index .Array i}} 在 JS 循环中无效？

因为 i 是客户端变量，而 {{index ...}} 是服务端模板动作，二者生命周期完全隔离：

• 服务端：模板引擎执行 {{index .Array 0}} → 输出 "Apple"，然后丢弃 .Array；
• 客户端：浏览器加载纯 HTML/JS，此时 .Array 已不存在，i 才刚开始变化。

✅ 最佳实践总结

通过清晰分离服务端模板渲染与客户端 JavaScript 执行，既能保障安全性，又能充分发挥两者优势。