こんにちは、@codeship_techです。
今回は大量の文字列を結合する方法について、解説している質問をピックアップしました!
大量の文字列の結合に便利な方法はありませんか?
テンプレートリテラルを使ってみると良いでしょう。
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の授業について「こんな事が知りたい・紹介して」というご意見・ご提案がありましたら、CodeShip公式Twitterアカウント(【CodeShip】プログラミングスクール)までDMまたはリプライにてお寄せください。