如何在前端 JavaScript 中安全使用 Go 模板传递的数组-Golang-PHP中文网

如何在前端 JavaScript 中安全使用 Go 模板传递的数组

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 模板 -->

{{.}}

输出结果：

Apple
Banana
Cherry

你甚至可获取索引：

{{range $i, $v := .Array}}
  <div>Index {{$i}}: {{$v}}</div>
{{end}}

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

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

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

<script>
// ✅ 安全：Go 模板直接渲染为合法 JS 数组字面量
const jsArray = {{.Array}};

// 现在可在 JS 中自由操作
let html = "";
for (let i = 0; i < jsArray.length; i++) {
  html += `<span>${jsArray[i]}`;
}
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}} {{.Name}} {{end}}
需 JS 动态操作	{{.Array}} 直接序列化	const items = {{.Items}}; items.map(...)
含 HTML/用户输入内容	始终用 \| js 安全转义	const html = {{.UnsafeHTML \| js}}