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>\ ';
上記のようなケースでピンポイントに役立ちそうなため覚えておく。
関連記事
-
-
ブラウザの広告ブロッカーを検知し、ブロックしている場合は何らかの処理を行う方法
普段何らかのサイトを見る際はAdBlock等の広告ブロッカー系プラグインを導入し ...
-
-
バニラJS対応(jQuery非依存)の通知(トースト)系ライブラリ「Notyf」の利用方法
以前に通知(トースト)系ライブラリ「Toastr」の利用方法をメモしたが、こちら ...
-
-
JavaScriptでdownload属性が付与されている画像を一括ダウンロードさせる方法
ページ内にdownload属性が付与されている画像が複数あり、何らかのボタンをク ...
-
-
formのpasswordとtextをjQueryで切り替える方法
formでtype="password"を指定していると内容を入力した際に「●● ...
-
-
JavaScriptで特定の要素にマウスオーバーした際、ツールチップを表示させる「Tippy.js」ライブラリの利用方法
JavaScriptで特定の要素にマウスオーバーした際、ちょっとした説明文等を書 ...