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>\ ';
上記のようなケースでピンポイントに役立ちそうなため覚えておく。
関連記事
-
-
画像をドラッグ&ドロップでアップロード
■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...
-
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...
-
-
JavaScriptでURLのクエリを取得する2
直近で調べたのとは別に、 http://aaa.bbb/ccc/id123?te ...
-
-
NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法
NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...
-
-
ajaxのエラー詳細を取得する
success or errorで分岐処理はできるけど、 エラー詳細取れないの? ...