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>\ ';
上記のようなケースでピンポイントに役立ちそうなため覚えておく。
関連記事
-
-
テキストエリアを選択すると中身を全選択状態にする方法
テキストエリアやテキストボックスの中に文字が書いてあり、ドラッグをしなくても、そ ...
-
-
バニラJS対応(jQuery非依存)の画像遅延読み込みライブラリ「lazysizes」の利用方法
あるサイトのコーディングデータを貰った際に「lazysizes」というJavaS ...
-
-
javascriptでランダム英数字
やりたかった事はjavascriptでランダム英数字の羅列を取得。 ■参考サイト ...
-
-
FileReader APIを用いて画像をアップロードせずにサムネイル表示
以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...
-
-
jQueryにて複数のajax処理のレスポンスをまとめて表示する方法
同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...