tagged template stringを使って変数を見易く出力するの巻

Logging variables via an ES6 tagged template

のサイトより学んだことを。

ES6で導入されたtagged template string

↓な感じに整形できる。要は``形式の文字列の前に()なしの関数を挟むことができるという感じ。

function tag(strings) {
  return `tagged ${strings}`;
}

console.log(tag`test`); // tagged test

変数展開がある場合は↓なイメージ。

function tag(strings, v1, v2) {
  return `tagged ${strings[0]},${strings[1]},${v1},${v2}`;
}

let n = 1;
console.log(tag`string1${n * 1}string2${n * 2}`); // tagged string1,string2,1,2

${}で分割された文字列がtag関数の第1引数のstringsという配列に入り、残りの${}の計算結果の変数が残りのtag関数のパラメータになります。

Object Literalsの略記法と組み合わせる

var a  = 1;
{ a } // => { a: 1 }

と組み合わせることにより簡単に変数dumpできます。

function vars(str, v) {
  return Object.keys(v).map((k) => { 
    return `${k}=${v[k]}`;
  }).join(', ');
}

let a = 1;
let b = 'hoge';
console.log(vars`${{a, b}}`); // a=1, b=hoge

いろいろ使いドコロは多そうです。