大量の文字列の結合に便利なものはないか？
という質問を幾度かされており、便利な記述法を知らない方にはお伝えしようという旨。
文字列の中で変数を直接展開できる
JavaScriptのテンプレートリテラルは、文字列の中で変数を直接展開する記述法です。
改行にも対応していて非常に便利。
まずはテンプレートリテラルを使わず、+ で結合する例から。
自己紹介をしてみましょう。
＋で結合する例
const week = 4;
const lang = "JavaScript";
console.log(lang + "を学び始めて" + week + "週間目です");
// JavaScriptを学び始めて4週間目です
+が大量に出てきました… 書くのも大変でエラーもよく起こりそうです。
これをテンプレートリテラルを使って置き換えましょう。
テンプレートリテラルは
- バッククォートで文字を囲む(バッククォートは Shift + @で打てます)
- 変数を ${ }で包む
ことで記述できます。
テンプレートリテラルに置き換えた例
const week = 4;
const lang = "JavaScript";
console.log( `${lang}を学び始めて${week}週間目です`);
// JavaScriptを学び始めて4週間目です
+ を書く必要がなくなったことで、大変見やすくなったと思いませんか？
さらに、テンプレートリテラルは改行や空白にも強く、そのまま出力してくれます。
console.log(`改行前
改行後`)
// 改行前
// 改行後
さらにはこんな合わせ技も。
JavaScriptからHTMLタグを変数を利用して作れます。
<body>
<div id="root"></div>
<script>
const greet = "Hello From JavaScript";
const list = ["melon", "lemon", "grape"];
document.getElementById("root").innerHTML = `
<h1>${greet} </h1>
<ul>
<li>${list[0]}</li>
<li>${list[1]}</li>
<li>${list[2]}</li>
</ul>
`;
</script>
</body>
結果
ぜひ皆さんも参考にしてみてください！
参考
この記事は「CodeShip」内での実際の質疑応答や指導・アドバイスの一部を基に作成しています。