在Go语言的Web开发场景中，html/template是官方提供的模板渲染工具，当我们需要在前端页面展示列表类数据时，经常需要迭代切片并同时获取每个元素的索引，用来实现序号展示、条件样式切换等需求。
正确的迭代切片并获取索引的方法
html/template的range语法支持同时返回索引和元素值，语法格式和Go原生的for range逻辑类似，具体写法如下：
<!-- 模板文件内容 -->
<ul>
{{range $index, $elem := .SliceData}}
<li>第 {{$index}} 个元素的值是：{{$elem}}</li>
{{end}}
</ul>
对应的Go后端代码需要先将切片数据传入模板，示例如下：
package main
import (
"html/template"
"net/http"
)
func handler(w http.ResponseWriter, r *http.Request) {
// 定义要传入模板的切片数据
data := []string{"苹果", "香蕉", "橙子"}
// 解析模板文件，假设模板文件名为index.html
tpl, err := template.ParseFiles("index.html")
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
// 执行模板渲染，将数据传入
err = tpl.Execute(w, map[string]interface{}{
"SliceData": data,
})
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
}
}
上述代码中，range后面的$index就是当前元素的索引，从0开始计数，$elem是当前迭代到的切片元素，二者都可以在模板中直接使用。
常见陷阱及避坑方案
陷阱1：只写一个变量导致索引被覆盖
很多开发者会误以为range后面只写一个变量就是索引，实际上如果只写一个变量，该变量代表的是切片的元素值，而不是索引。比如下面的错误写法：
<!-- 错误示例 -->
{{range $item := .SliceData}}
<p>索引：{{$item}}</p> <!-- 这里输出的是元素值，不是索引 -->
{{end}}
避坑方案：如果需要同时获取索引和元素，必须显式声明两个变量，顺序是$index, $elem，如果只需要索引不需要元素值，可以用下划线忽略元素：
<!-- 只需要索引的写法 -->
{{range $index, _ := .SliceData}}
<p>当前索引：{{$index}}</p>
{{end}}
陷阱2：在range块外使用索引变量
range声明的$index和$elem变量的作用域仅在当前的range代码块内部，如果在range结束之后使用这两个变量，会导致渲染错误或者获取到空值。
<!-- 错误示例 -->
{{range $index, $elem := .SliceData}}
<li>{{$elem}}</li>
{{end}}
<p>最后一个索引是：{{$index}}</p> <!-- 这里会报错，变量超出作用域 -->
避坑方案：如果需要在range外部使用索引相关的数据，可以在range内部先将需要的值赋值给外部定义的变量，示例如下：
<!-- 正确示例 -->
{{$lastIndex := -1}}
{{range $index, $elem := .SliceData}}
<li>{{$elem}}</li>
{{$lastIndex = $index}}
{{end}}
<p>最后一个索引是：{{$lastIndex}}</p>
陷阱3：切片为nil或空时的渲染问题
如果传入模板的切片是nil或者长度为0，range代码块不会执行，这时候如果页面有依赖索引的默认展示逻辑，可能会出现空白。可以通过else语法处理空切片的情况：
<!-- 处理空切片的写法 -->
{{range $index, $elem := .SliceData}}
<li>第 {{$index}} 项：{{$elem}}</li>
{{else}}
<p>暂无数据</p>
{{end}}
陷阱4：索引从0开始导致的序号展示问题
range返回的索引默认从0开始，如果页面需要展示从1开始的序号，直接展示索引会不符合预期，这时候可以手动对索引做加1处理：
<!-- 展示从1开始的序号 -->
{{range $index, $elem := .SliceData}}
<li>序号：{{$index | add 1}}，内容：{{$elem}}</li>
{{end}}
如果模板没有自定义add函数，也可以在后端先处理切片，给每个元素加上序号字段再传入模板，避免模板中做复杂的运算。
总结
Go的html/template中迭代切片获取索引的核心是使用range $index, $elem := 切片变量的语法，同时注意变量的作用域、空切片处理、索引起始值等细节，就能避免大部分常见的使用陷阱，实现符合预期的模板渲染效果。
Gohtml/template切片迭代索引获取修改时间：2026-07-07 06:24:36