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>\ ';
上記のようなケースでピンポイントに役立ちそうなため覚えておく。
関連記事
-
-
CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成
CodeIgniter4.4.4&Bootstrap&jQuer ...
-
-
aタグにてhref属性の「javascript:void(0);」の代替手段について
aタグにJavaScriptやjQueryでイベントを割り当てたい場合、href ...
-
-
Leafletで「leaflet-search」プラグインを導入してマーカーの検索機能を追加する方法
LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...
-
-
フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法
formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...
-
-
formでGET送信時に空のパラメータを送信しない方法(cleanQuery)
フォームでGET送信する際、通常だと空のパラメータも送信される。結果として「ドメ ...