tです。
JavaScriptのES2015で追加された、テンプレート文字列のタグの使い方を紹介します。
実行環境
- Node v8.1.2
テンプレート文字列について
テンプレート文字列は、文字列を定義する際、文字列の中に変数や式を記述して使うことができます。まずは、テンプレート文字列の基本的な使い方です。
1 2 3 4 |
const a = 12; const b = '13'; const string = `a:${a} b:${b} c:${a * 2}`; console.log( string ); |
1 2 |
$ node template.js a:12 b:13 c:24 |
文字列を、バッククォート( )で囲います。シングルクォート( ' )ではないので、注意してください。
)で囲った文字列中に、変数や式を展開することができます。
「${}」を使うと、バッククォート(
テンプレート文字列のタグについて
次に、タグについて説明します。タグは、テンプレート文字列の前に関数を括弧なしで記述することで、その関数を呼び出します。
このとき渡される引数は、テンプレート文字列の中の文字列リテラルの配列(ここでは「aa」「bb」「cc」)と代用式部分(ここでは「11」「22」)を分割したものになります。
この分割された要素を使って、独自に文字列リテラルの配列(ここでは「aa」「bb」「cc」)に変更を加えたり、文字列だけでなくオブジェクトなど、文字列以外の値にして返すこともできます。
1 2 3 4 5 6 7 |
function tag( strings, ...values ) { console.log(strings); // 文字列リテラルの配列を出力 console.log(values); // 代用式部分を出力 return { foo: 'bar' }; // 文字列以外を返すこともできる } console.log( tag`aa${11}bb${22}cc` ); |
1 2 3 4 |
$ node template-tag.js [ 'aa', 'bb', 'cc' ] [ 11, 22 ] { foo: 'bar' } |
文字列中に変数を展開する機能は他の言語にもありますが、このようなタグの機能はJavaScriptのES2015で初めて見ました。かゆいところに手が届くように便利だなあと思いました。
テンプレート文字列のタグで、数値を16進数で表示する
タグ機能の実例として、テンプレート文字列の中の値を16進数で表示する方法を示します。
1 2 3 4 5 6 7 8 9 10 |
function hex( strings, ...values ) { values = values.map( // 数値なら16進数に変換する value => Number.isFinite( value ) ? `0x${value.toString( 16 )}` : value ); return String.raw( strings, ...values ); // 文字列連結処理はString.rawに任せる } const string = hex`A:${10} B:${255} C:${'nnn'}`; console.log( string ); // 出力 |
1 2 |
$ node template-tag-hex.js A:0xa B:0xff C:nnn |
hexという関数を定義しました。hex関数の中では、valuesの方だけを16進数に変換しています。
実行結果は、stringsとvaluesを交互に組み合せていますが、難しくないけどちょっと面倒な処理です。
そこで、String.rawという組み込みの関数を用います。String.rawは、エスケープ文字を変換させずに生の文字列を出力するので便利です。デフォルトのテンプレート関数のように動作し連結処理ができます。
ややこしい連結処理はString.rawに任せておけば、ここでは代用式部分(ここでは「10」「255」「nnn」)を変換することだけを考えられて、気持ちが楽です。
JavaScriptでは、バイナリを扱うことも増えてきたかと思います。
例えば、画像や音声、自作の形式のファイルなどのバイナリファイルを解析して、ヘッダから情報を取り出すときや、自分でバイナリファイルを組み立てる場合です。その際、このようなタグを用意しておけば、16進数での出力を簡単に確認できるので、デバッグに便利だと思います。
最後に
渡された代用式部分に対して加工をする場合には、使える機能だと思います。うまく利用できる状況は限られるかもしれませんが、知らなければ使えないので、これを機に心の片隅に置いていただきたいです。キー・ポイントでは、JavaScirptが大好きなエンジニアを募集しています。