如何在Pug模板中访问名称含空格的传入JSON属性

你不需要修改外部返回的JSON结构，也不用调整Express端的render传参逻辑，直接在Pug模板中用方括号语法访问对应键即可。

核心规则 #

Pug无法通过.点语法访问不符合JS标识符命名规范（含空格、横杠、特殊符号）的键名，这类键统一通过**对象["键名"]**的索引语法取值，所有通过res.render传入的顶层参数，都可以通过Pug内置的locals根对象访问。

代码示例 #

原有Express端代码无需任何修改：

let json = {"Attribute Name With Spaces": "Value"}
res.render('loader.pug', json);

Pug模板中的常见使用场景写法：

• 直接在文本插值中取值

// 直接输出属性值
p 字段值：#{locals["Attribute Name With Spaces"]}

• 在模板逻辑代码中取值

// 将值赋值给模板内变量
- const fieldValue = locals["Attribute Name With Spaces"]
if fieldValue
  p 已获取到带空格字段的内容：#{fieldValue}

• 将值绑定到标签属性上

// 绑定到原生属性、自定义属性都适用
input(type="text", value=locals["Attribute Name With Spaces"])
div(data-info=locals["Attribute Name With Spaces"]) 自定义属性绑定测试

注意：不要漏写locals前缀，直接写["Attribute Name With Spaces"]会被Pug解析为创建数组，导致取值报错。

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