Tagged templates を試す

1. このページの目的

Tagged templates を使ってみる。これは ES6 (ES2015) の機能である。

Template literals (Template strings) - JavaScript | MDN の例をやってみる。

2. 説明

Template literalのより高度な使用法はタグ付けされたTemplate literalです。タグ付けされたTemplate literalでは、関数を使ってTemplate literalのアウトプットを調整できます。最初の引数には文字列リテラルの配列(この例では"Hello "と" world") を含みます。2つ目とそれに続くそれぞれの引数は、処理された（調理されたと呼ばれることもあります）代用式（ここでは"15"と"50"）の値です。最後に関数は処理された文字列を返します。次の例では、ネームタグについて特別なことはありません。関数名は自由につけられます。

テンプレート文字列 - JavaScript | MDN

タグ関数の引数
第1引数	文字列の配列この配列は、`raw` プロパティ（配列）を持つ。ここには、エスケープされないままの各文字列がセットされる。
第2以降の引数	${...} で渡された式の評価結果が順番にセットされる

3. デモその１

コード

var person = 'Mike';
var age = 28;

function myTag(strings, personExp, ageExp) {
  var str0 = strings[0]; // "That "
  var str1 = strings[1]; // " is a "

  // There is technically a string after
  // the final expression (in our example),
  // but it is empty (""), so disregard.
  // var str2 = strings[2];

  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

  // We can even return a string built using a template literal
  return `${str0}${personExp}${str1}${ageStr}`;
}

var output = myTag`That ${ person } is a ${ age }`;

cdocument.querySelector('#demo1').textContent = output;
// That Mike is a youngster

実行結果

4. デモその２

関数が関数を返す例

コード

function template(strings, ...keys) {
  return (function(...values) {
    var dict = values[values.length - 1] || {};
    var result = [strings[0]];
    keys.forEach(function(key, i) {
      var value = Number.isInteger(key) ? values[key] : dict[key];
      result.push(value, strings[i + 1]);
    });
    return result.join('');
  });
}

var t1Closure = template`${0}${1}${0}!`;
var t2Closure = template`${0} ${'foo'}!`;

document.querySelector('#demo2').innerHTML =
  t1Closure('Y', 'A') + '<br>' +
  t2Closure('Hello', {foo: 'World'});

実行結果

5. デモその３

関数の第1引数には、raw というプロパティ(配列)がセットされる。

このプロパティには、渡された各文字列がエスケープされないままセットされる。

コード

function tag(strings) {
  console.log(strings);
  console.log(strings.raw[0]);
  return strings.raw[0];
}

// logs "string text line 1 \n string text line 2" ,
// including the two characters '\' and 'n'
document.querySelector('#demo3').innerHTML = tag`string text line 1 \n string text line 2`;

実行結果

6. デモその４

String.raw というメソッドもある。こちらも、エスケープされないままの文字列を取得するために存在している。

コード

var str = String.raw`Hi\n${2+3}!`;

document.querySelector('#demo4').innerHTML = str.length + '<br>' + str.split('').join(',');

実行結果

参考

Template literals (Template strings) - JavaScript | MDN