如何在Pug中添加包含Font Awesome图标和动态值的标签

问题根源 #

现有写法的问题是混用了非转义HTML字符串输出和嵌套文本插值，多余引号是Pug处理分层内容输出时的语法解析导致的。

优化方案 #

方案1：原生Pug嵌套写法（推荐） #

直接遵循Pug的标签嵌套规则编写，不需要手动拼接HTML字符串，语法更简洁也不容易出现输出异常：

p
  i.far.fa-bell
  if val.i != null
    // | 为Pug的文本声明标记，前缀空格即可实现图标与文本的间隔
    |  #{val.i}
  else
    |  EXAMPLE TEXT

该写法输出的HTML结构如下，无多余引号，空格正常保留：

<!-- val.i有值时 -->
<p><i class="far fa-bell"></i> 2</p>
<!-- val.i为空时 -->
<p><i class="far fa-bell"></i> EXAMPLE TEXT</p>

方案2：合并非转义输出 #

如果偏好使用非转义输出的写法，可以把所有内容合并到同一个模板字符串中处理，避免分层输出的解析问题：

p!= `<i class="far fa-bell"></i>${val.i != null ? ` ${val.i}` : ' EXAMPLE TEXT'}`

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