💡 記事の下にエディタを用意しています。壊してもOK!
更新日: 2025年3月1日
JavaScriptのテンプレートリテラルの使い方
📌
結論
テンプレートリテラルで変数を文字列に埋め込める
)で囲むと、${変数} で値を埋め込めます。
📝 実際のコードはこちらconst name = '太郎';
console.log(`こんにちは、${name}さん!`);
従来の書き方との比較
方法 書き方 + で結合 'こんにちは、' + name + 'さん!'テンプレートリテラル \こんにちは、${name}さん!\
テンプレートリテラルの方が見やすく、現代JSでは主流です。
まとめ
・バッククォート + ${}` で変数を埋め込める
・+による文字列結合より読みやすい
演習で試してみよう
テンプレートリテラルで挨拶文を作ってみましょう。🧪 ここで試せます ─ 壊しても大丈夫!
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
name変数(太郎)を使ってこんにちは、太郎さんとconsole.logで出力してください。
詰まったらヒント
バッククォートと${name}を使う