JavaScriptで複数行のテンプレートリテラルは改行と空白を削除すると見やすい

複数行のテンプレートリテラルは見にくい

JavaScriptのテンプレートリテラルは文字列と変数を+で連結する必要がなく、コードが見やすいというメリットがある反面、複数行だと余分な改行と空白が含まれてしまうため、Console結果が見にくいというデメリットがある。

// sample code
(() => {
  const html = `
    <ul>
      <li>foo</li>
      <li>bar</li>
    </ul>
  `
  console.log(html)
})()

上記のコードの結果はこのようになる。

これを防ぐにはreplaceの正規表現で/^\n|\s+$|^ {4}/gmに該当するものを置換して削除する。

「^ {4}」は削除したい半角スペースのインデントの数です。

// sample code
(() => {
  const html = `
    <ul>
      <li>foo</li>
      <li>bar</li>
    </ul>
  `.replace(/^\n|\s+$|^ {4}/gm, '')
  console.log(html)
})()

改善後の結果は下記の通り。余分な改行と空白が含まれていないため見やすくなっている。