JavaScriptでテンプレート文字列(テンプレートリテラル)の利用方法

あるJavaScriptのソースコードを拝見した際に変数っぽいのにバッククォートで挟んでいる部分があった。バッククォートというとSQL文ぐらいでしか普段使わないので何なのか調べてみたところテンプレート文字列(テンプレートリテラル)というものらしく結構便利に使えそう。以下に利用方法のメモ。

リファレンス

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

使いそうなソースコード

基本的な使い方としては変数作成時にクオーテーションではなくバッククォートで挟むだけ。改行時のバックスラッシュによるエスケープが不要な点と、変数内に変数や式を入れやすい点が特徴っぽい。以下が特に使いそうなところ。

変数を展開

const name = '田中';
const msg = `こんにちは
${name}さん`;
console.log(msg);
//以下が出力される
//こんにちは
//田中さん

オブジェクトを展開

const person = {name : '鈴木', age : 20};
const msg = `${person.name}さんの年齢は${person.age}歳です。`;
console.log(msg);
//以下が出力される
//鈴木さんの年齢は20歳です。

配列を展開

const score = [20, 10, 30];
const msg = `1番目のスコアは${score[0]}です。`;
console.log(msg);
//以下が出力される
//1番目のスコアは20です。

追記していくことも可能

let msg = `1行目\n`;
msg += `2行目`;
console.log(msg);
//以下が出力される
//1行目
//2行目

jQueryのセレクタ指定時も利用可

const test = $(`#${test}`).val();

所感

jQueryなんかでHTMLタグを作成して挿入したい時、ソースコードの可読性のために改行を行いたいというケースがたまにある。

その際、以下のようにいちいちバックスラッシュ(環境によっては円マーク)をつけるのが面倒くさかった。

const tag = '\
    <div>\
        <span>aaa</span>\
    </div>\
';

上記のようなケースでピンポイントに役立ちそうなため覚えておく。