uhyohyo.net

JavaScript初級者から中級者になろう

十六章第九回 テンプレート文字列

このページの最終更新日:

今回紹介するテンプレート文字列は、ES2015で追加された新しい文字列リテラルです。まずサンプルを見ましょう。


var name = '山田太郎';

console.log(`こんにちは、${name}さん`); // "こんにちは、山田太郎さん"

このように、テンプレート文字列は``(バッククオート)で囲まれた文字列です。一番の特徴は、${ }の形で文字列中に値を埋め込める点です。上の例では、文字列中の${name}の部分が"山田太郎"で置き換えられています。これは言わずもがな、nameという式が"山田太郎"となるからです。

今回は文字列を埋め込みましたが、数値などの値を入れた場合は文字列に変換されます。


var access = 123;

console.log(`今日のアクセス数は${access}です。`); // "今日のアクセス数は123です。"

これは単純に便利ですね。今までだと文字列の連結を用いて'今日のアクセス数は' + access + 'です。'のようにする必要がありました。

また、テンプレート文字列はいまどきの機能なので他にも便利な点があります。それは、リテラル中で改行してもよいという点です。この改行は文字列中にLF\n相当)として現れます。


var str1 = `foo
bar`;

console.log(str1);
console.log(str1 === 'foo\nbar'); // true

タグ付きテンプレート文字列

テンプレート文字列にはもうひとつ機能があります。それがタグ付きテンプレート文字列です。これは次のような形をしています。関数 `文字列……`

こうすると、その関数により文字列を加工することができます。まず具体例を見てみましょう。


function tag(parts, num1, num2){
  return parts[0] + num2 + parts[1] + num1 + parts[2];
}

console.log(tag`foo ${123} bar ${456} baz`); // "foo 456 bar 123 baz"

これはかなり無意味な例ですが、有意義で簡単な例が思いつかなかったので許してください。

タグ付きテンプレート文字列が作られると、タグである関数が呼ばれます。その際、リテラルの部分は${ ... }の中の値とそれ以外の文字列部分に分割されます。文字列部分は第1引数に配列として与えられます。上の例では引数partsに["foo ", " bar ", " baz"]という配列が入っています。そして、${ ... }で与えられた値は第2引数以降に順番に入っています。今回の例ではnum1が123、num2が456です。これらは数値ですね。

今回の関数tagは1つ目の${ ... }の中身と2つ目の${ ... }の中身を入れ替えた文字列を返すという何の役にもたたない例です。

もしタグ関数が文字列でない値を返した場合、タグ付きテンプレート文字列の結果もその通りとなり、文字列でない場合があります。

要するにほとんどただの関数呼び出しなので、使いたいときがあったら使うとよいでしょう。

String.raw

もともと用意されているタグ用の関数としてString.rawがあります。これはエスケープシーケンスを処理せずにそのままにした文字列を返すというものです。


console.log(String.raw`foo\nbar こんに\u28ffちは`); // foo\nbar こんに\u28ffちは

テンプレート文字列も含め、通常の文字列リテラルではエスケープシーケンスは処理されてしまうので、バックスラッシュを含んだ文字列を含むには次のようにする必要がありました。


console.log('foo\\nbar こんに\\u28ffちは');

バックスラッシュを大量に含んでいる場合などはこのString.rawを使うと楽です。

これと同じ動作をするタグ関数を自分で作ることも可能ですが、それには文字列部分に対してエスケープシーケンスが処理される前の文字列を取得する必要があります。これはタグ関数の第1引数(上の例だとparts)についているプロパティrawとして与えられます。これはpartsと同様に文字列の配列であり、エスケープシーケンスが処理されていないという点で異なります。

テンプレート文字列の話題は以上です。タグ付きはあまり使わないにしても、${ ... }により値を埋め込めるのは便利です。使う機会は多いでしょう。