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>\ ';
上記のようなケースでピンポイントに役立ちそうなため覚えておく。
関連記事
-
-
JavaScriptにて「QRCode.js」ライブラリを利用してQRコードを生成する方法
PHPが使えない環境で動的にQRコードを生成したかった。以前にメモしたAPI等の ...
-
-
Leafletでマーカーを動的に変更し、変更状況をCookieに保存する方法
Leafletでポップアップ(フキダシ)内のボタンをクリックするとマーカーを動的 ...
-
-
JavaScriptでdownload属性が付与されている画像を一括ダウンロードさせる方法
ページ内にdownload属性が付与されている画像が複数あり、何らかのボタンをク ...
-
-
JavaScriptでWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法
JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...
-
-
Leafletにて操作内容を履歴に残し「進む」「戻る」ボタンで履歴を実行できる「Leaflet.NavBar」の利用方法
Leafletにてマップ移動やズーム等、ユーザーの操作内容を履歴に残して、「進む ...