${} が超便利！JavaScriptのテンプレートリテラルを使う
「${}ってなんだろう」って方こんにちわ。
「知ってるよ。」って方には基本的な内容かもしれませんがお付き合いください。
${}を知ってしまったらもう使いたくてしょうがなくなること請け合いです。
${}って何？
テンプレートリテラルの中に変数や式を突っ込むための記号です。
テンプレートリテラルは、ECMAScript 6 で新しく使えるようになった構文のひとつで、
文字列に変数を組み込んだりするのに使うと超便利なヤツです。
他のプログラミング言語のヒアドキュメントみたいな扱いです。
通常文字列の間に変数を入れようとすると
JavaScript
- var foo = 'ート';
- var bar = 'テンプレ' + foo + 'リテラル';
と、まぁちょっと煩わしい。
でも、${}を使えばさらっとかけます。
${}(テンプレートリテラル)の基本的な使い方
バッククォート「`」で囲む
何それ？っていう方は、シフト＋＠
↓こんな感じで。
JavaScript
- var foo = 'ート';
- var bar = `テンプレ${foo}リテラル`;
- console.log(bar); // テンプレートリテラル
計算もできます。
JavaScript
- var foo = `1 + 2 = ${1 + 2}`;
- console.log(foo); // 1 + 2 = 3
テンプレートリテラルでできること（おまけ）
改行もできます。
JavaScript
- var foo = `テンプレート
- リテラル`;
- console.log(foo);
出力結果
- テンプレート
- リテラル
エスケープもできます。
JavaScript
- var foo = `テンプレート\nリテラル`;
- console.log(foo);
出力結果
- テンプレート
- リテラル
エスケープなしで書くこともできます。
JavaScript
- var foo = String.raw`テンプレート\nリテラル`;
- console.log(foo); // テンプレート\nリテラル
まとめ
というわけで、非常に便利で是非使いたいのですが、問題がひとつ。
IEは非対応。
はい、IEさん何してくれてんでしょうね、こんなに便利なのに。
が、非対応なものはしょうがないので、IEが消えてから使うことにします。
非常に残念ですが、IEのサポートが終わるその日まで、さようなら〜。