如何从Pug模板向JavaScript传递JSON数据？

我懂你的困扰——在Pug模板里能轻松渲染服务器传来的MongoDB对象，但前端JS代码却拿不到这些数据对吧？这是因为模板变量是在服务器端渲染阶段处理的，而前端JS是在浏览器里运行的，两者不在同一个上下文里。下面给你两种简单可行的解决方法：

方法一：直接将数据注入为前端全局变量 #

在Pug模板里，用!{}语法（注意不是#{}，#{}会转义HTML字符）把服务器对象转成JSON字符串，直接赋值给一个前端JS变量：

.containerCustom 
  .head 
    h1 | #{object.name}

// 注入数据到前端JS
script.
  // 把服务器传来的对象转成JSON字符串，直接作为JS对象使用
  const appData = !{JSON.stringify(object)};
  
  // 现在你就能在前端JS里自由使用这个数据了
  console.log(appData.name);
  console.log(appData); // 打印完整的对象

!{JSON.stringify(object)}会在服务器渲染时把对象转换成合法的JSON字符串，前端JS加载后就能直接把它当作普通JS对象使用。

方法二：通过DOM的data属性传递数据 #

如果你不想用全局变量，也可以把数据放到HTML元素的data-*属性里，之后前端JS再读取并解析：

// 把对象转成JSON字符串，放到data-object属性里
.containerCustom(data-object=JSON.stringify(object))
  .head 
    h1 | #{object.name}

然后在前端JS里读取这个属性并解析：

// 获取容器元素
const container = document.querySelector('.containerCustom');
// 解析data属性里的JSON字符串
const appData = JSON.parse(container.dataset.object);

// 现在就能使用数据了
console.log(appData.name);

为什么之前的方式不行？ #

你之前在Pug里用#{object.name}是服务器端渲染，服务器会把这个变量替换成具体的文本，生成静态HTML后发送给浏览器。但前端JS是在浏览器加载完HTML后才运行的，它看不到服务器端的模板变量，所以必须通过上面的方式把数据“传递”到前端上下文里。

注意事项 #

• 两种方法都依赖JSON.stringify()，它会自动处理对象里的特殊字符（比如引号、换行），避免出现语法错误。
• 如果你的MongoDB对象非常大，要考虑数据体积对页面加载速度的影响，但一般业务场景下这两种方式都很安全好用。

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