JavaScriptのテンプレート文字列のタグについて

2017.06.30.金
JavaScript

JavaScriptのテンプレート文字列のタグについてtです。
JavaScriptのES2015で追加された、テンプレート文字列のタグの使い方を紹介します。

実行環境

  • Node v8.1.2

テンプレート文字列について

テンプレート文字列は、文字列を定義する際、文字列の中に変数や式を記述して使うことができます。

まずは、テンプレート文字列の基本的な使い方です。

文字列を、バッククォート( )で囲います。シングルクォート( ' )ではないので、注意してください。

「${}」を使うと、バッククォート(
)で囲った文字列中に、変数や式を展開することができます。

テンプレート文字列のタグについて

次に、タグについて説明します。

タグは、テンプレート文字列の前に関数を括弧なしで記述することで、その関数を呼び出します。

このとき渡される引数は、テンプレート文字列の中の文字列リテラルの配列(ここでは「aa」「bb」「cc」)と代用式部分(ここでは「11」「22」)を分割したものになります。

この分割された要素を使って、独自に文字列リテラルの配列(ここでは「aa」「bb」「cc」)に変更を加えたり、文字列だけでなくオブジェクトなど、文字列以外の値にして返すこともできます。

文字列中に変数を展開する機能は他の言語にもありますが、このようなタグの機能はJavaScriptのES2015で初めて見ました。かゆいところに手が届くように便利だなあと思いました。

テンプレート文字列のタグで、数値を16進数で表示する

タグ機能の実例として、テンプレート文字列の中の値を16進数で表示する方法を示します。

hexという関数を定義しました。hex関数の中では、valuesの方だけを16進数に変換しています。

実行結果は、stringsとvaluesを交互に組み合せていますが、難しくないけどちょっと面倒な処理です。

そこで、String.rawという組み込みの関数を用います。String.rawは、エスケープ文字を変換させずに生の文字列を出力するので便利です。デフォルトのテンプレート関数のように動作し連結処理ができます。

ややこしい連結処理はString.rawに任せておけば、ここでは代用式部分(ここでは「10」「255」「nnn」)を変換することだけを考えられて、気持ちが楽です。

JavaScriptでは、バイナリを扱うことも増えてきたかと思います。
例えば、画像や音声、自作の形式のファイルなどのバイナリファイルを解析して、ヘッダから情報を取り出すときや、自分でバイナリファイルを組み立てる場合です。その際、このようなタグを用意しておけば、16進数での出力を簡単に確認できるので、デバッグに便利だと思います。

最後に

渡された代用式部分に対して加工をする場合には、使える機能だと思います。うまく利用できる状況は限られるかもしれませんが、知らなければ使えないので、これを機に心の片隅に置いていただきたいです。

キー・ポイントでは、JavaScirptが大好きなエンジニアを募集しています。