Express传递JSON数组至EJS模板时丢失方括号问题

你遇到的这个情况我之前也碰到过——明明console.log(JSON.stringify(theJSONObject))能正常输出带方括号的完整数组，传到Express模板里却丢了方括号对吧？我来给你梳理几个最常见的原因和解决办法：

1. 模板引擎的自动转义是重灾区 #

大部分Express常用的模板引擎（比如EJS、Pug）默认会对输出内容做HTML转义，这会把数组的方括号这类特殊字符给处理掉。举个例子：

• 要是用EJS，你如果写<%= theJSONObject %>，引擎会转义输出内容，数组结构直接被破坏；
• 换成Pug的话，#{theJSONObject}同样会触发转义。

解决办法：

• EJS用<%- %>语法，它会跳过转义直接输出原始内容：

  <%- JSON.stringify(theJSONObject) %>
  

• Pug用!{}语法来输出未转义的内容：

  !{JSON.stringify(theJSONObject)}
  

2. 传数据时不小心解构了数组 #

有时候在给模板传数据时，手滑写了解构语法，把数组拆成单个元素传进去了，比如：

// 错误示例：解构导致数组结构丢失
res.render('your-page', { data: ...theJSONObject });

解决办法：确保传递的是完整的数组/JSON对象，别瞎解构：

// 正确写法
res.render('your-page', { data: theJSONObject });

3. 模板里引用错了变量 #

比如你本来要输出整个数组，结果不小心写成了data[0]或者只引用了数组里的某一项，那自然看不到完整的方括号结构。
解决办法：检查模板里的变量名，确认你引用的是整个数组对象，而不是单个元素。

4. 浏览器控制台的截断误导 #

有时候不是方括号真丢了，是浏览器控制台显示长内容时自动截断，看起来像是结构不完整。你可以把输出内容放到<pre>标签里，既能保留格式，也能完整查看：

<pre><%- JSON.stringify(theJSONObject, null, 2) %></pre>

这里JSON.stringify的第三个参数2是用来格式化输出，让数组结构更清晰，方便你排查问题。

先从模板转义这个点排查吧，这是最常见的原因，应该能快速解决你的问题。

内容的提问来源于stack exchange，提问作者garson