はじめに

最近よく見るようになった

export const StyleWrapper = styled.div`
  --fc-button-bg-color: #3b82f6;
`

のような記法について、よく理解できてなかったので調べた

疑問

  • ヒアドキュメントみたいな記法がわかってない

まとめ

  • 関数呼び出し
  • 第一引数: 文字列配列
  • 第二引数以降: ${...} で評価された結果が渡る
  • 以下が全て
    const person = "Mike";
const age = 28;

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

  const ageStr = ageExp < 100 ? "youngster" : "centenarian";

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

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

console.log(output);
// That Mike is a youngster.

以下詳細

  • 名前は Tagged Template Literals ES6(2015) の機能
  • JavaScript の Template literals（テンプレート文字列）の拡張
  • テンプレート文字列は、バッククォート（`）文字で囲まれた文字列で、複数行の文字列や文字列内の式のインターポレーションが可能
  • タグ付きテンプレート( Template literals (Template strings) - JavaScript | MDN )

    テンプレート リテラルのより高度な形式は、タグ付きテンプレートです。 タグを使用すると、関数を使用してテンプレートリテラルを解析できます。 タグ関数の最初の引数には、文字列値の配列が含まれます。 残りの引数は式に関連します。 タグ関数は、これらの引数に対して必要な操作を実行し、 操作された文字列を返すことができます。 (あるいは、次の例のいずれかで説明するように、まったく異なるものを返すこともできます。)

  • タグ関数とバッククォートの間に空白は入れられるが、一般的にはそんなことはしない
    • 実際に動いたけど、ChatGPTちゃんはそんなことはしねーよと言っている
  • HOF: Higher Order Function
    • 高階関数のこと
      • 関数を引数にとったり、関数を戻したりする関数の事

Refs