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

  • 概要

    テンプレート文字列とはざっくりと言えば、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}`;