複数行のテンプレートリテラルは見にくい 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
![JavaScriptで複数行のテンプレートリテラルは改行と空白を削除すると見やすい](https://cdn-ak-scissors.b.st-hatena.com/image/square/aeaef133ab3d5b993d1ab83df21b8c484a38b2b1/height=288;version=1;width=512/https%3A%2F%2Fiwb.jp%2Fwp-content%2Fuploads%2F2019%2F12%2Fjavascript-template-literal-delete-breaks-spaces-readability.png)