JSの${}とは何ですか？
JavaScriptでコードを書いていると、文字列の中に変数の値や計算結果を埋め込みたい場面に遭遇することがよくあります。従来のJavaScriptでは、+演算子を使って文字列連結を行うのが一般的でしたが、 ECMAScript 6（ES6）で導入されたテンプレートリテラルと${}を使うことで、より簡潔で可読性の高いコードを書くことができるようになりました。
テンプレートリテラルとは
テンプレートリテラルは、バッククォート(` `)で囲まれた文字列のことです。従来の文字列との違いは、式を埋め込むことができる点にあります。従来の方法では、以下のように記述していました。
let name = "太郎";
let age = 20;
let message = "私の名前は" + name + "です。年齢は" + age + "歳です。";
console.log(message); // 出力結果: 私の名前は太郎です。年齢は20歳です。
テンプレートリテラルを使うと、以下のように記述できます。
let name = "太郎";
let age = 20;
let message = `私の名前は${name}です。年齢は${age}歳です。`;
console.log(message); // 出力結果: 私の名前は太郎です。年齢は20歳です。
${}の中に変数や式を埋め込むことで、文字列連結をよりシンプルに表現できます。
${}でできること
${}の中には、様々な式を埋め込むことができます。以下に例を挙げます。
| 例 | 説明 |
|---|---|
`${1 + 2}` |
数値の計算結果を埋め込む |
`${name.toUpperCase()}` |
文字列メソッドの実行結果を埋め込む |
`${user.age >= 20 ? "成人" : "未成年"}` |
三項演算子の結果を埋め込む |
`${func()}` |
関数呼び出しの結果を埋め込む |
テンプレートリテラルと${}のメリット
- 可読性の向上：+演算子による連結よりも、コードが見やすくなる。
- 記述量の削減：複雑な文字列連結を簡潔に記述できる。
- 複数行の文字列を簡単に扱える：バッククォートで囲むことで、複数行にわたる文字列をそのまま定義できる。
まとめ
テンプレートリテラルと${}は、ES6から導入された強力な機能です。可読性と記述性を向上させるために、積極的に活用していきましょう。
参考文献
関連QA
Q1: テンプレートリテラル内で改行はできますか？
A1: はい、テンプレートリテラル内で改行を含めることができます。バッククォートで囲まれた範囲であれば、コード上の改行がそのまま文字列に反映されます。
Q2: ${}内で変数以外の値は埋め込めますか？
A2: はい、${}内には変数だけでなく、式であれば何でも埋め込むことができます。例えば、計算式や関数呼び出しの結果なども埋め込むことができます。
Q3: テンプレートリテラルは古いブラウザでも使えますか？
A3: 古いブラウザの中には、テンプレートリテラルに対応していないものもあります。古いブラウザをサポートする必要がある場合は、Babelなどのトランスパイラを使ってES5に変換する必要があります。
その他の参考記事:jquery 変数 マーク