【javascript】テンプレートリテラルで+演算子を使わないで変数と文字列を繋げる方法

javascriptで+演算子を使うことなく「`（バッククォート）」で囲めば文字列と変数を繋げて出力できるとのことだったので使ってみた

テンプレートリテラル (テンプレート文字列)の変数展開

テンプレートリテラル (テンプレート文字列)とは「`（バッククォート）」を使って、文字列とか変数を一緒に扱うことができたりするもの
バッククォートと呼ばずに「バックティック文字 (` `) (グレイヴ・アクセント)」とも呼んだりするみたい

リテラルとは「ソースコードに書いた文字とか数字」の事を指すみたい

で、実際に使ってみた
従来の書き方とテンプレートリテラルを使った書き方

let txt1 = '従来の出力方法';
console.log('これは' + txt1 + 'です。');// これは変数展開です。

let txt2 = '変数展開';
console.log(`これは${txt2}です。`);// これは変数展開です。

テンプレートリテラルで「`（バッククォート）」を使ったほうは${変数}のように囲むことで文字列と変数を一緒に出力することができる

この変数展開以外にテンプレートリテラルにはソースコード上の改行をそのまま反映することもできる

let txt1 = '従来の出力方法';
console.log('これは\n' + txt1 + '\nです。');
// これは
// 従来の出力方法
// です。

let txt2 = '変数展開';
console.log(`これは
${txt2}
です。`);
// これは
// 変数展開
// です。

\nは改行コード

実際に現場で使うならhtmlタグを追加するときに

let html = `<div class="parent">
	親
	<div class="child">
		子供
		<div class="grandchild">
			孫
		</div>
	</div>
</div>`;

って視覚的にわかりやすく書けたりするからこういうところで使ったりするんじゃないかな

ただ、IE11では使えないので書き換えるか参考サイトのように対応した方がいいのかも

他にもテンプレートリテラルの使い方はたくさんあるね、IEで使えないから一通り見る気はないので参考サイト貼っておく