タグ付きテンプレートリテラルを理解したい

はじめに

MDNによると、

テンプレートリテラルは非公式にテンプレート文字列と呼ばれることもありますが、文字列リテラルではないので、文字列リテラルが使えるところならばどこでも使えるわけではありません。

恥ずかしながら、文字列リテラルだと思ってました。
MDNを読んでいると日々新しい発見があって面白いです。

テンプレートリテラルのおさらい

文字列リテラルは、シングルクォートとダブルクォートで文字列を囲みますが、
テンプレートリテラルは、バッククォートで囲みます。

通常の文字列リテラルと違うのは主に2点。

1.改行できる。
2.プレースホルダーを含めることができる。

改行について

// 文字列リテラル
const hoge: string = "Hello, \nworld!";
console.log(hoge);

// テンプレートリテラル
const fuga: string = `Hello, 
world!`;
console.log(fuga);

結果

Hello,
world!
Hello,
world!

文字列リテラルの場合は、エスケープ記法を用いることで改行していましたが、
テンプレートリテラルはリテラル中で改行可能です。

余談ですが、
テンプレートリテラルでエスケープ記法を用いても結果は同じです。

const fuga: string = `Hello, \nworld!`;
console.log(fuga);

Hello,
world!

プレースホルダーを含める

文字列の中にドル記号と波括弧で囲んで値や式を記載できます。

const a: number = 2;
const b: number = 3;

// 文字列リテラル
const hoge: string = "2+3=" + (a + b) + "\nです。";
console.log(hoge);

// テンプレートリテラル
const fuga: string = `2+3=${a + b}
です。`;
console.log(fuga);

結果

2+3=5
です。
2+3=5
です。

シンタックスシュガーとして使えます。

タグ付きテンプレートとは

タグ付きテンプレートは、テンプレートリテラルのより高度な形式です。
タグを使用すると、テンプレートリテラルを関数で解析できます。タグ関数の最初の引数には、文字列リテラルの配列を含みます。残りの引数は式に関連付けられます。
タグ関数は、これらの引数に対して何でも望み通りの操作を実行することができ、加工された文字列を返します。（または、以下の例の一つで示しているように、まったく異なるものを返すこともできます。）
タグに使用される関数の名前は、自由に指定できます。

つまりテンプレートリテラルの前にタグの関数を置き、
値の前処理を行うことができるということです。

ちょっと試してみます。

function setUser(strings :TemplateStringsArray, id: number) {
    let userName: string = "ゲスト";
    switch (id) {
        case 1:
            userName = "島尻";
            break;
        case 2:
            userName = "山田";
            break;
        case 3:
            userName = "田中";
            break;
        default:
            break;
    }
    return `${strings[0]}${userName}${strings[1]}`;
}

const userId: number = 1;
const result: string = setUser`こんにちは${userId}さん`;

console.log(result); // -> こんにちは島尻さん

第一引数のTemplateStringsArrayは、テンプレートリテラルの固定の文字部分を区切った配列となります。
この場合だと、以下のような中身になります。

[ 'こんにちは', 'さん' ]

そして第二引数で受け取ったuserIdでuserNameを判断し、
引数として受け取ったTemplateStringsArrayの値と、
userNameをテンプレートリテラルで組み立ててreturnしています。

まとめ

先に結論は出てしまっていますが、テンプレートリテラル前のタグ関数で、
値の前処理を行えるというものでした。

タグ付きテンプレートリテラルは、使いどころも結構限定されるかと思うので、
こんなことができるぐらいで覚えておくと良いかもしれません。

参考