JavaScript

JavaScriptES6のテンプレートリテラルでヒアドキュメントを使う

JavaScriptES6のテンプレートリテラルでヒアドキュメントを使う

JavaScriptではヒアドキュメントの機能は提供されていませんが、ES6でテンプレートリテラルという文字列の書き方が加わりました。

テンプレートリテラルを使うと、JavaScriptでも手軽にヒアドキュメントのような機能を使えます。早速使い方を見ていきましょう。

JavaScriptテンプレートリテラルの使い方

テンプレートリテラルの使い方は、バッククォート「｀」で文字列を囲むだけでとても簡単です。次のように使います。

const para = '[埋め込む文字列]';

const text = 
`テンプレートリテラルは便利です。
このように改行やスペースもそのままの状態で出力できるのです!
  ***
もちろん変数の埋め込みもできますよ。
変数は${para}のように埋め込めます。`;
 
console.log(text);

実行すると、下のようにログが出力されます。

実行結果
テンプレートリテラルは便利です。
このように改行やスペースもそのままの状態で出力できるのです!
  ***
もちろん変数の埋め込みもできますよ。
変数は[埋め込む文字列]のように埋め

改行やスペースも、書いた文字列がそのままの状態で出力されていますね!

上の使用例のように「${プログラム}」を使うと、文字列内で値や変数や式を埋め込めるので、スッキリと読みやすいプログラムを書けるのです。

テンプレートリテラルを使うと便利で読みやすいプログラムになる

ここで、テンプレートリテラルを使わない従来の書き方と比べてみましょう。

JavaScriptでは、これまで「+」(プラス演算子)で文字列を連結していました。上のヒアドキュメント使用例を「+」で文字列結合する方法だと次のようになります。

const para = '[埋め込む文字列]';

const text = 'テンプレートリテラルは便利です。\n'
  + 'このように改行やスペースもそのままの状態で出力できるのです!\n'
  + '  ***\n'
  + 'もちろん変数の埋め込みもできますよ。\n'
  + '変数は' + para + 'のように埋め込めます。';
 
console.log(text);

従来の文字列結合では改行させるには「\n」(改行コード)を書く必要があります。出力結果は同じですが、テンプレートリテラルの方がプログラムが格段に読みやすいと感じます。

まとめ

  • テンプレートリテラルはバッククォート「｀」で文字列を囲むだけ!簡単に実装できる。
  • テンプレートリテラルは改行やスペースも文字列をそのままの状態で出力できる。
  • 「${プログラム}」を使うと変数や式も埋め込める。
  • 従来の文字列結合を使うよりも見やすいプログラムが書ける。

JavaScriptES6で加わったテンプレートリテラルの使用方法をご紹介しました。

JavaScriptで動的にHTMLを変更する場合などに、テンプレートリテラルは便利に使えそうですね。