【Pug】属性値の指定がない場合に属性自体を消す方法

属性値によっては属性自体を削除したい場合があると思います。

改善前

それぞれのリンクが外部リンク（httpで始まる）かどうかをチェックし、外部リンクの場合のみtarget="_blank"を設定しています。

index.pug

 - const links = ['https://example.com/', '/news/', '/about/', '/contact/']

each link in links
    - const blank = link.includes('http') ? '_blank' : ''
    a(href=`${link}` target=`${blank}`) リンク

外部リンクにはきちんとtarget='_blank'が付与されていますが、内部リンクにも余計なtarget=''が付与されてしまいます。

index.html

<a href='https://example.com/' target='_blank'>リンク</a>
<a href='/news/' target=''>リンク</a>
<a href='/about/' target=''>リンク</a>
<a href='/contact/' target=''>リンク</a>

改善後

外部リンクでなかった場合を''からundefinedに修正します。

index.pug

 - const links = ['https://example.com/', '/news/', '/about/', '/contact/']

each link in links
+    - const blank = link.includes('http') ? '_blank' : undefined
-    - const blank = link.includes('http') ? '_blank' : ''
    a(href=`${link}` target=`${blank}`)

生成されるHTMLではtarget属性が必要ない場合（内部リンクの場合）にはtarget属性自体が出力されなくなります。

index.html

<a href='https://example.com/' target='_blank'>リンク</a>
<a href='/news/'>リンク</a>
<a href='/about/'>リンク</a>
<a href='/contact/'>リンク</a>

---

不要なHTML属性を除去し可読性を向上できます。