PHPなどの他言語には、複数行にわたる文字列を扱うための便利な仕組みとして、ヒアドキュメントという構文があります。しかし、JavaScriptにはヒアドキュメントに相当する機能が無く、複数行の文字列を扱う場合には、工夫が必要でした。

この記事では、ES6で導入された、ヒアドキュメントと同じように文字列を扱うことのできる、テンプレートリテラルという構文を紹介します。

テンプレートリテラルとは

テンプレートリテラルは、ECMAScript 2015（ES6）で導入された、文字列を定義するための新しい構文です。

使い方はとても簡単で、これまで文字列の定義にはシングルクォーテーション（例：'文字列'）やダブルクォーテーション（例："文字列"を使ってきましたが、これをバッククォートに置き換えるだけ（例：`文字列`）です。

バッククォートは、日本語配列のキーボードであれば、Shift+@で入力することができます。

テンプレートリテラルの利点

改行をそのまま記述することができる

これまで、複数行にわたる文字列をソースコード内に記述する場合は、以下のように、+を使って結合する、行末に\を入れてエスケープするなどの方法が使われてきました。

// Before
const str  = '1行目の文' +
'2行目の文' +
'3行目の文';

const str2 = '1行目の文\
2行目の文\
3行目の文';

しかし、前者の方法では文字列を区切って+で結合という手間が生じてしまいますし、後者の方法では行末にコメントが入れられない、誤ってスペースなどを入れてエラーになるといった問題がありました。

テンプレートリテラルでは、改行をそのまま記述することができるので、これらの負担や心配がなくなります。

// After
const str3  = `1行目の文
2行目の文
3行目の文`;

例えば、HTMLの断片を扱うケースでは、テンプレートリテラルを使うと、より記述が楽になります。

// Before
const html = '' +
  '<p class='sample'>' +
    '<a href='https://www.google.co.jp/'>Google</a>' +
  '</p>';

// After
const html2 = `
  <p class='sample'>
    <a href='https://www.google.co.jp/'>Google</a>
  </p>
`;

テンプレートリテラルを使ったほうが読みやすいですし、HTMLなど、ベースとなる文書からコピペして文字列を用意する場合も手軽になります。

${}を使って式を埋め込むことができる

テンプレートリテラルには、式を埋め込む機能があります。

テンプレートリテラル内で、式と解釈させたい箇所を${と}で囲います。文字列の中で変数を展開したり、関数を実行してその結果を埋め込んだりすることが可能です。

const url = 'https://www.google.co.jp/';
const text = 'Google';

// Before
const tag = '<a href='' + url + ''>' + text + '</a>';

// After
const tag2 = `<a href='${url}'>${text}</a>`;

複数の文字列を結合するときも、文字列をいちいち+で繋ぐ手間がなくなり、可読性も向上します。

タグ付きテンプレートリテラル

テンプレートリテラルには、タグ付きテンプレートリテラルという特殊な構文があります。

function output (strings, ...values) {
  console.log(strings);
  console.log(values);
}

output`ABC ${'abc'} DEF ${'def'}`
// (3) ['ABC ', ' DEF ', '', raw: Array(3)]
// (2) ['abc', 'def']

通常、関数呼び出しの際は括弧を付けます（例：output('string')）が、タグ付きテンプレートリテラルでは、関数名にそのままテンプレートリテラルを繋ぐことで、関数が実行されます。

タグ付きテンプレートリテラルを使って関数が実行されると、テンプレートリテラルの部分は引数となり、${...}とそれ以外の文字列に分けられます。${...}以外の通常の文字列は第1引数に配列として、${...}は第2以降の引数に1つずつ格納されます。

上の例ではoutput関数の第2引数を...valuesと可変長にしているので、２つの${...}はひとまとめに配列として受け取っています。

テンプレートリテラルの注意点

IEが未対応

新機能の紹介記事では恒例となってしまいましたが、例によってIEがテンプレートリテラルに未対応です。

そのため、ターゲットとなる環境にIEが含まれる場合、BabelやTypeScriptによるトランスパイルが必要となります。

まとめ

テンプレートリテラルは、対応環境にさえ気をつけていれば、これまでの文字列の取扱いを格段にグレードアップしてくれる、便利な機能です。

JavaScriptの世界は日々、このような新しい機能が導入されていますので、ぜひ積極的に取り入れて、より効率的なプログラミングを行っていきましょう。