【今日のQ&A】大量の文字列の結合方法【JavaScript】

こんにちは、@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>

結果

image.png

ぜひ皆さんも参考にしてみてください!

授業日記についてのご意見

CodeShipの授業について「こんな事が知りたい・紹介して」というご意見・ご提案がありましたら、CodeShip公式Twitterアカウント(【CodeShip】プログラミングスクール)までDMまたはリプライにてお寄せください。