如何在Pug模板文件中正确渲染传入的数组类型参数

问题根源 #

Pug 模板中 each 循环的变量引用语法错误：你在循环对象处使用了 !{friends} 的非转义插值语法，该语法仅适用于在文本/属性值中插入变量，不能用于逻辑语句的变量引用，导致 Pug 无法正确识别到传入的数组对象。

解决方法 #

1. 修改 temp1.pug 模板代码，去掉循环处的插值符号，同时调整 li 文本的拼接逻辑匹配你预期的输出格式：

h1 hello!
p here is my friends:
  ul
    each val,index in friends
      li= 'friend ' + (index + 1) + ': ' + val

2. 原有 JS 渲染逻辑无需修改，重新运行即可输出预期的 HTML 结果。

补充说明 #

• Pug 变量使用的两个场景区分：
  • 在标签文本、HTML 属性中输出变量时，使用 #{变量名}（自动转义特殊字符）或 !{变量名}（不转义，用于输出HTML代码）
  • 在循环、条件判断等逻辑表达式中引用变量时，直接写变量名即可，不需要加插值符号
• 额外兼容建议：HTML 规范中 <p> 标签属于行内块级元素，内部不能嵌套 <ul> 这类块级元素，浏览器实际渲染时会自动提前闭合 <p> 标签，如果你需要符合标准HTML结构，可以把 <ul> 放到 <p> 标签外。

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