勉強したことのメモ

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

  関連記事

JavaScript / jQueryでブラウザのウィンドウがアクティブかどうかを判別する方法

ある動画サイトを閲覧していた際にウィンドウが非アクティブになると視聴中の動画が止 ...

JavScriptでalertを閉じた後にページ遷移させる方法

JavaScriptのalertが閉じたらページ遷移させてほしいと言われ、con ...

JavaScriptで多次元連想配列

JavaScriptで多次元の配列を作る際にいつも迷ってしまうのでメモ。 ■こう ...

JavaScriptで全角半角を判別の上で文字数カウントを行う

やりたかった事は「全角5文字・半角10文字以内の入力フォーム」 みたいなもの。 ...

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...