勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptでテンプレート文字列(テンプレートリテラル)の利用方法

  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

  関連記事

Chart.jsで描写したグラフを画像としてダウンロードさせる方法

サイト内にChart.jsでグラフを描写し、ボタンやリンクをクリックすることで当 ...

jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法

jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。 ...

Video.jsの動画プレイヤーにVTTファイルで字幕機能を実装する方法

Video.jsの動画プレイヤーに字幕機能を実装したい。調べたところVTT(Vi ...

スマホ対応のjQueryのカラーピッカープラグイン「excolor」の利用方法

以前の記事でカラーピッカープラグインのことを書いたけどスマホでは使えない。なので ...

JavaScriptの動画プレイヤー用ライブラリ「Video.js」の利用方法

サイト内でYoutube等の動画サイトの埋め込みタグは使用せず、mp4ファイルか ...