文字列連結：テンプレートリテラルの使い方【JavaScript勉強ログ #11】

※本記事はJavaScriptの勉強がてら、自分達の学んだことを備忘録的に残しておくことが目的です。素人が四苦八苦しながらJavaScriptを学ぶ過程を楽しんでいただければ、そしてそれが、少しでも誰かのためになれば嬉しいです。
また、本記事は備忘録的にまとめていきますので、詳細までは書かないこともあります。ご了承を～

はじめに
テンプレートリテラル
最後に
参考書籍・Udemy

はじめに

さて今回は、文字列連結：テンプレートリテラルについてまとめたいと思います。

特定の文字列同士をつなげる処理ですね。基本的には文字列同士を”+”でつなげてあげればよいわけですが、それ以外にもやり方は存在し、そのうちの1つとしてテンプレートリテラルをご紹介します。

個人的には全く知らないやり方だったので、是非皆さんもこの機会に覚えておきましょう。

※おまけ：“+”での文字列連結

「文字列 + 文字列」で実行可能。例は以下の通り。

var age = 20;
alert("私の年齢は" + age + "です。");

「文字列 + 数値」の場合、数値は文字列（数字）として解釈されます。

テンプレートリテラル

「テンプレートリテラル」というものを利用することでも、文字列連結を実行できます。

「テンプレートリテラル」は以下の方法で利用できますので覚えておきましょう。

文字列をバッククォート「`」で囲う

※バッククォートで囲まれた箇所が文字列として認識される

式（数式、変数等）を「${}」で文字列内に埋め込む

ちなみ、シングルクォーテーション「’」やダブルクォーテーション「”」ではなく、バッククォート「`」という点に要注意です！バッククォートの入力方法も記載しておきますね。

「Shiftキー」+「＠キー」

ちなみに日本語配列キーボードの場合の打ち方ですので、英字配列キーボードを利用されている方はお手数ですがご自身で調べてみてください。WindowsかMacかで異なるはずです。

せっかくなので例もあげておきますね。参考になれば嬉しいです。

<html>
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript勉強ログ</title>
	</head>
	<body>
		<script>
			var age = 20;
			alert(`私の年齢は${age}です`);
			alert(`2*3は${2*3}です`);
			var x = 3;
			var h = 6;
			alert(`底辺${x}、高さ${h}の三角形の面積は${x*h/2}です`);
			var message = `今日は
			良い天気です`;
			alert(message); //改行して表示
		</script>
	</body>
</html>