勉強したことのメモ

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

  関連記事

サイトにHTMLエディタ(WYSIWYG)を導入する方法

シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...

JavaScriptでブラウザ幅によって異なる処理を行う方法(matchMedia)

JavaScriptでブラウザ幅によって異なる処理を行う場合、「window.a ...

formでGET送信時に空のパラメータを送信しない方法(cleanQuery)

フォームでGET送信する際、通常だと空のパラメータも送信される。結果として「ドメ ...

Lightbox.jsでCSP(コンテンツセキュリティポリシー)エラーが発生した際の対応方法

CSP(コンテンツセキュリティポリシー)設定を行っているサーバーでLightbo ...

サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法

画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...