Node.js传递的数组在script标签内未定义的技术问题咨询

这种情况我之前也碰到过，大概率是模板渲染时变量的格式转换出了问题，咱们一步步来拆解解决：

问题根源 #

你在HTML标签里用<%= resultsArrayDate[15] %>能正常显示，是因为模板引擎直接把数组元素的字符串值输出到了HTML里；但到了<script>标签内，如果你直接写console.log(resultsArrayDate)会提示未定义，本质是模板引擎没有把服务器传递的数组转换成合法的JavaScript数组格式，直接输出的话会变成不符合JS语法的字符串，导致JS无法识别为有效变量。

两种可行解决方案 #

方案1：在script内解析JSON字符串 #

把服务器传递的数组先通过JSON.stringify转成合法的JSON字符串，再在JS里用JSON.parse解析成数组：

<script type="text/javascript">
  // 将模板变量转成JSON字符串后解析为JS数组
  const resultsArrayDate = JSON.parse('<%= JSON.stringify(resultsArrayDate) %>');
  const resultsArrayTitle = JSON.parse('<%= JSON.stringify(resultsArrayTitle) %>');
  const resultsArrayLocation = JSON.parse('<%= JSON.stringify(resultsArrayLocation) %>');

  // 现在就可以正常使用数组了
  console.log(resultsArrayDate[15]);
  console.log(resultsArrayTitle[22]);
</script>

注意这里的单引号不能少，因为JSON.stringify输出的是双引号包裹的字符串，用单引号包裹可以避免语法冲突。

方案2：挂载为全局window变量 #

先在页面顶部的script标签里把数组挂载到window对象上，后续的script就能直接访问：

<!-- 先定义全局变量 -->
<script type="text/javascript">
  window.resultsArrayDate = <%= JSON.stringify(resultsArrayDate) %>;
  window.resultsArrayTitle = <%= JSON.stringify(resultsArrayTitle) %>;
  window.resultsArrayLocation = <%= JSON.stringify(resultsArrayLocation) %>;
</script>

<!-- 后续的script标签里直接使用 -->
<script type="text/javascript">
  console.log(resultsArrayDate[15]); // 正常访问
  console.log(resultsArrayTitle[22]);
</script>

这种方式适合需要在多个script标签里复用这些数组的场景。

关键注意点 #

一定要用JSON.stringify处理数组后再输出，不能直接写<%= resultsArrayDate %>——因为直接输出数组的话，模板引擎会把它转成类似2024-05-01,2024-05-02的字符串，这在JS里会被当成多个变量，自然会提示未定义。

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