最終更新日 2024-09-25

～文法メモ～ テンプレート文字列

概要

テンプレート文字列とはざっくりと言えば、Perl,Ruby,PHPなどの「ヒアドキュメント」的なものですが、
追加機能として面白い仕掛けも用意されています。

raw文字列としてのテンプレート文字列

let rawstr = `これらの文字列は
改行も含めてそのまま再現される。`;

hm.debuginfo(rawstr);

変数の埋め込み

${...}の形式で囲むことで、変数や式を文字列に埋め込むことが可能です。 

let sum = 10 * 20;
let rawstr = `計算の結果は${sum}です。`; // 計算の結果は200です。

hm.debuginfo(rawstr);

タグ付きテンプレート文字列

${...}などが入ったテンプレート文字列を、関数の引数として渡すと、分解した状態で受け取ることが出来る。

function tag(a, b, c, d, e) {

  // 一つ目の引数は、「テンプレート文字列全体を${...}をデリミタとしてsplitして配列とした」ものが代入されている
  hm.debuginfo(a); // ['僕の', 'タグ付き', 'テンプレート', '']

  // 二つ目以降の引数に順々に変数の値が代入されている
  hm.debuginfo(b); // 1
  hm.debuginfo(c); // 2
  hm.debuginfo(d); // name
  hm.debuginfo(e); // undefined
}

let first = 10;
let second = "変数";
let third = "だよ";
// 関数への渡し方は、通常のtag()ではなく、` `で渡す()は付けない。
tag`僕の${first}タグ付き${second}テンプレート。${third}`;

別項で説明される「...var_name」を使うことで、上と同じことを以下のように記述可能ある。

function tag(formats, ...args) {

  // 一つ目の引数は、「テンプレート文字列全体を${...}をデリミタとしてsplitして配列とした」ものが代入されている
  hm.debuginfo(formats); // ['僕の', 'タグ付き', 'テンプレート', '']

  // 二つ目以降の引数に順々に変数の値が代入されている
  hm.debuginfo(args[0]); // 1
  hm.debuginfo(args[1]); // 2
  hm.debuginfo(args[2]); // name
  hm.debuginfo(args[3]); // undefined
}

let first = 10;
let second = "変数";
let third = "だよ";
// 関数への渡し方は、通常のtag()ではなく、` `で渡す()は付けない。
tag`僕の${first}タグ付き${second}テンプレート。${third}`;