JavaScriptテンプレートリテラルのおもしろい例

ES2015でテンプレートリテラルが追加されました。テンプレートリテラルには変数を埋め込むことができるのは周知の事実かと思います。しかし、埋めこむことができるのは実は変数、ではなく式です。今回は式を埋め込むことでできるおもしろいコードを紹介しようと思います。

まず三項演算子です。

const arr = [1, 2, 3];
const s = `arr[0] = ${arr.length > 0 ? arr[0] : 'undefined'}`;
s === '1';

式を埋め込むことができるので、当然テンプレートリテラルを埋め込むこともできます。

const hoge = 42;
const s = `${`${`${hoge}`}`}`;
s === '42';

また、式が有効なものであれば、途中で空白や改行を挟んでもなんの問題もありません。

const hoge = 42;
const s = `${
    `${
        `${hoge}`
    }`
}`;
s === '42';

式として有効ならコメントをはさむことすらできます

const s = `${/*コメントもはさめる！*/42}`;
s === '42';

即時関数を利用すれば内部で計算まで行うことができます。(当たり前ですが、普通に計算して文字列化する方が精神衛生的に圧倒的にいいです)

const s = `合計: ${(()=> {
    const tax = 1.08;
    const prices = [100, 98, 150];
    return Math.floor(prices.reduce((a, b)=> a + b, 0) * 100 * tax) / 100;
})()}円`;
s === '6';

まとめ

どれも可読性が著しく劣っているので、素直に変数を挿入するだけにとどめたほうがいいと思います。