勉強したことのメモ

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で同サーバ内のCSVを読み込み、配列として取り扱う方法

サーバ内のCSVファイルを読み込み、そのデータをサイト上で取り扱いたい。通常だと ...

日付の範囲指定用プラグイン「DateRangePicker」の利用方法

日付型のデータを検索する際に開始・終了日のテキストボックスを用意し、それぞれにタ ...

NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法

NicEdit(ウィジウィグエディタ)に画像アップロード機能を追加したかった。本 ...

JavaScriptにてページ内のスクロール可能な要素を最後までスクロールしないとボタンをクリックできないようにする方法

お問い合わせページ等で「個人情報の取扱いについて」のような長い文章があり、その部 ...

PHPの配列をファイルに保存してPHPやJavaScriptで呼び出す方法

PHPの配列をファイルとして保存し、別のページからPHPやJavaScriptで ...