es6

はじめに 最近よく見るようになった 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 高階関数のこと 関数を引数にとったり、関数を戻したりする関数の事 ...