More than 3 years have passed since last update.

[JavaScript] たのしいタグ付きテンプレート文字列

Last updated at 2021-01-17Posted at 2021-01-16

これはなに？

文字列と言っていますが、文字列と言うよりは、関数の呼び出しかたです。

例えば、ある関数があったとしまして

function myFunc(){}

普通はこのように呼び出しますが、

myFunc();

このように呼び出すことを、タグ付きテンプレート文字列と言います。

myFunc``

ここで使用した関数を特別にタグ関数と言います。

タグ関数に渡される引数は、文字列をパースした結果になります。

第1引数は配列です。式以外の部分文字列が入っています。
第2引数以降は可変長です。式を評価した結果になります。

実際にどのような引数が渡されるのか確認するために、このような関数を定義しました。

function myTag(strings, ...keys) {
  console.log('strings = ', strings);
  console.log('keys = ', keys);
}

呼び出してみます。

myTag`abc`;
/* 結果 :
strings = (1)["abc"]
keys = (0)[]
*/

myTag`Java${100}Script`;
/* 結果 :
strings = (2)["Java" ,"Script"]
keys = (1)[100]
*/

myTag`pl ${1 + 1} mu ${2 * 2} di ${3 / 3}`;
/* 結果 :
strings = (4)["pl " ," mu " ," di " ,""]
keys = (3)[2 ,4 ,1] 
*/

こんなこともできますが、意味はないですねww

parseInt`abc`
// 結果 : NaN

parseInt`010`
// 結果 : 10

encodeURI`\n`
// 結果 : '%0A'

タグ関数はただの関数なので、Promiseを返したり、関数を返したりもできますね。

意味なくPromise返してみたり。

function myTag(strings) {
  return new Promise((resolv) => {
    resolv(strings.join('|');
  })
}

myTag`a${0}${1}b`.then(console.log);
// 結果 : 'a||b'

関数を返してみたり。

function myTag(strings) {
  return function(d) {
    return strings.join(d);
  }
}

console.log(myTag`a${0}${1}b`('---'));
// 結果 : 'a------b'

引数をTemplateStringsArrayにします。

function myTag(strings: TemplateStringsArray, ...keys: Array<any>): any {
  // (snip)
}