TL;DR

JavaScript のテンプレートリテラルの前に関数(タグ)を置き、そのリテラルを関数で処理する構文。タグ関数の戻り値がそのままテンプレートリテラルの値になるので、文字列でなくてもよい。

仕組み

タグ関数の第 1 引数には、テンプレートの文字列部分を要素とする配列が渡される。この配列の長さは埋め込んだ式の数に 1 を足したものになる。第 2 引数以降には、${...} の各式を評価した値が順に渡される。

第 1 引数の配列の raw プロパティには、エスケープシーケンスを処理する前の文字列が入っている。組み込みの String.raw はこの raw の文字列を連結して返すタグ関数である。

例

const person = "Mike"
const age = 28
 
function myTag(strings, personExp, ageExp) {
  const ageStr = ageExp < 100 ? "youngster" : "centenarian"
  return `${strings[0]}${personExp}${strings[1]}${ageStr}${strings[2]}`
}
 
myTag`That ${person} is a ${age}.` // "That Mike is a youngster."

styled-components は、タグ付きテンプレートでスタイルを受け取ってコンポーネントを作る。

関連

出典