Pug模板无法正确渲染对象布尔字段值的问题排查

问题场景 #

我在Pug模板中编写了以下代码：

input(type='hidden' value=user)
input(type='hidden' value=user.questionBanned class='questionbanneduser')
input(type='hidden' value=user.username name='username')

已经向模板传入了user对象，其中questionBanned字段值为true，username有正常字符串值。但生成的HTML里，第一个和第三个input都正常渲染，唯独第二个input的value属性为空，这是哪里出问题了？是Pug禁止用布尔类型，还是字段读取方式错了？

问题原因与解决方法 #

嘿，这其实是Pug处理布尔值的默认规则在搞鬼！当你给value属性绑定布尔类型的true或false时，Pug的默认逻辑是：

• 如果值是false，会直接省略整个value属性；
• 如果值是true，只会保留属性名，不会把它转换成字符串"true"写进去。

所以你的第二个input，因为user.questionBanned是true，Pug默认渲染出来就变成了<input class="questionbanneduser" type="hidden">，自然看不到value属性啦。

解决起来很简单，只要把布尔值强制转换成字符串就行，给你两种常用的写法：

1. 拼接空字符串强制转类型：

   input(type='hidden' value=user.questionBanned + '' class='questionbanneduser')
   

2. 用模板字符串插值：

   input(type='hidden' value=`${user.questionBanned}` class='questionbanneduser')
   

用这两种方式后，Pug就会把true转换成字符串"true"，最终渲染出你想要的HTML：

<input type="hidden" value="true" class="questionbanneduser">

要是你的questionBanned字段有可能是null或者undefined，还可以加个兜底处理，比如value=(user.questionBanned ?? false) + ''，这样能确保不会出现空值的情况哦。

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