JavaScriptでヒアドキュメント

PHP や Ruby、シェルスクリプトなどを書いていると当たり前のように使うヒアドキュメント。複数行の文字列をそのまま埋め込めるあの便利な書き方です。

ところが JavaScript には、もともとヒアドキュメントの構文がありませんでした。複数行の文字列を書くために、+ で連結したり、配列に詰めて join("\n") したり、なかなかにダサい書き方を強いられた時代があったんですよね。

しかし ES6（ES2015）以降は、テンプレートリテラル（古くは テンプレートストリングス／Template Strings とも呼ばれていました）を使うことで、ほぼヒアドキュメントと同じことが書けるようになっています。

複数行文字列を書きたい時は、バッククォート ` で文字列を囲むだけです。

const HERE = `
foo
bar
`;

console.log(HERE);
// 
// foo
// bar
//

改行はそのまま入ります。クォートをエスケープする必要もありません。+ で連結していた時代がウソみたいです。

テンプレートリテラルが普通のヒアドキュメントより一歩進んでいるのは、文字列の中に変数や式を埋め込めるところです。${...} で括ります。

const name = "Katsuya";
const age = 40;

const message = `
こんにちは、${name} さん（${age} 歳）。
来年は ${age + 1} 歳ですね。
`;

console.log(message);

シェルスクリプトの "$VAR" 展開や、PHP のダブルクォート文字列の感覚に近いですね。${} の中には任意の式が書けるので、計算や関数呼び出しもそのまま埋め込めます。

便利ですが、いくつか気をつけたい点があります。

可読性のために字下げして書いた場合、そのインデント分の空白も文字列に含まれてしまいます。

function build() {
  const sql = `
    SELECT *
    FROM users
    WHERE active = 1
  `;
  return sql;
}

この sql には、各行頭の半角スペース 4 つも含まれます。SQL のように空白の意味が薄いなら問題ありませんが、Markdown のようにインデントが意味を持つ用途では意図しない挙動になることがあります。

文字列内にバッククォートや ${} を書きたい場合は、バックスラッシュでエスケープします。

const code = `バッククォートは \` でエスケープ、変数展開は \${name} のように書きます`;

テンプレートリテラルは IE では未サポートでした。最近は IE のことを気にする機会はめっきり減りましたが、古い環境向けにビルドする場合は、Babel などでトランスパイルすれば従来の文字列連結に変換してくれます。

長い HTML 文字列を組み立てる時や、SQL を書く時など、活躍する場面は意外と多いです。+ で文字列連結を続けている方は、ぜひテンプレートリテラルに乗り換えてみてください。

安達棒とアンバサダーで色々釣りたいおじさん。
Macでプログラムを書いて暮らしています。趣味はルアーフィッシング、ギター。
宮崎県在住。

ktykwsk.com