JSのテンプレートリテラルで改行をわかりやすく書く

JavaScriptで改行を含む文字列を作成したい。

例えば以下のような文字列を作成する方法を考える。

1st line
2nd line
3rd line

方法はいくつかあるが、テンプレートリテラルと行継続の機能を用いるとわかりやすく書けるため、順を追って説明する。

`\n`を使用する

テンプレートリテラルではなく、通常の文字列リテラルとして改行を含んだ文字列を作成してみる。

const template = '1st line\n2nd line\n3rd line'

どこに改行があるかわかりづらいし、最終成果物の文字列とかけ離れすぎている。

テンプレートリテラルを使用すれば、改行を改行コードではなくそのまま表現できるため、わかりやすくなる。

しかし、テンプレートリテラルでは2行目以降の文字列は行頭から書かなくてはいけないため、以下のように読みづらさが残る。

const template = `1st line
2nd line
3rd line`

この読みづらさを解決してくれるライブラリが存在するが、標準の機能だけでできるだけ読みやすくする方法を考える。

シェルスクリプトで長いコマンドの羅列を改行するときに\ + 改行をよく書くが、それと同じイメージのことがJavaScriptの文字列に対して行える。

文字列リテラルあるいはテンプレートリテラルの行末にバックスラッシュ\を置くことで、次の改行をなかったものとして扱うことができる。

この行継続の機能を適用し、テンプレートリテラルの一番初めに\を置くことで、2行目から本文が始まるようにする。すると全ての行頭を揃うので、読みやすくできる。

const template = `\
1st line
2nd line
3rd line`