テンプレートリテラルとは、文字列内にJavaScriptの式を埋め込めるようにした構文。
これを使うと、通常の文字列に加えて、式を埋め込んで動的に文字列を生成できる。
なお、使わないでも以下のような書き方ができる。以下比較。
表示: Hello Fuku !
テンプレートリテラルを使用しない場合の例:
+演算子を使用して、文字列や関数をつなぐ。
const name = "Fuku";
const greeting = "Hello, " + name + "!";
return <div className="text-black">{greeting}</div>;
テンプレートリテラルを使用した場合の例:
バッククォート(`)で囲まれた文字列内に${}で変数名を指定することで、JavaScriptの式を埋め込むことができる。
const name = "Fuku";
const greeting = `Hello, ${name}!`;
return <div className="text-black">{greeting}</div>;