TypeScriptのテンプレートリテラルで変数を簡単に文字列に埋め込む方法

この記事ではTypeScriptで文字列に変数を埋め込む方法を紹介します。

これはコードをよりクリーンで可読性の高いものにするのに役立ちます。
早速、テンプレートリテラルという機能を使ってみましょう！

テンプレートリテラルとは？

テンプレートリテラルはES6から導入された機能で 文字列と変数を簡単に組み合わせる ことができます。

これはバッククオート ` と ${} を使って実装されます。

let name = "Tom";
let greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, Tom!"

上記のコードでは name という変数を greeting という文字列の中に埋め込んでいます。
console.log(greeting) を実行すると "Hello, Tom!" と出力されます。

このようにテンプレートリテラルを使うと、文字列の中に変数を埋め込むことがとても簡単になります！

複数の変数を埋め込む

テンプレートリテラルでは 複数の変数を埋め込む こともできます。
それぞれの変数は ${} の中に書きます。

let firstName = "John";
let lastName = "Wick";
let fullName = `Hello, ${firstName} ${lastName}!`;
console.log(fullName); // "Hello, John Wick!"

これは便利ですね！
テンプレートリテラルは複数の変数を埋め込むのにもとても役立ちます。

式を埋め込む

さらに、驚くべきことにテンプレートリテラルは 式を埋め込む こともできます。

let a = 5;
let b = 10;
let result = `${a} と ${b} の合計は ${a + b}`;
console.log(result); // "5 と 10 の合計は 15"

上記のコードでは a + b という式を文字列の中に埋め込んでいます。
これにより console.log(result) の結果は "5 と 10 の合計は 15" となります。

これは魔法のようですね！

テンプレートリテラルは文字列の中に変数を埋め込むだけでなく、計算結果や関数の戻り値を埋め込むことも可能です。

これによりコードがより読みやすくなり、複雑な文字列の操作を簡単にすることができます。

複数行の文字列

テンプレートリテラルを使うと複数行の文字列も簡単に作成できます。

let multiLineString = `こんにちは、
これは複数行の
文字列です！`;
console.log(multiLineString);

上記のコードを実行すると、以下の3行の文字列が出力されます。

こんにちは、
これは複数行の
文字列です！

これは素晴らしいですね！
テンプレートリテラルは複数行の文字列の作成も簡単に実現できます。

タグ付きテンプレートリテラル

最後にタグ付きテンプレートリテラルについて紹介します。

これはテンプレートリテラルの前に関数名を付けることで、文字列の生成方法をカスタマイズできる 機能です。

function myTag(strings: TemplateStringsArray, personExp: string, ageExp: number) {
    let str0 = strings[0]; // "That "
    let str1 = strings[1]; // " is a "

    let ageStr;
    if (ageExp > 99){
        ageStr = 'centenarian';
    } else {
        ageStr = 'youngster';
    }

    return str0 + personExp + str1 + ageStr;
}

let person = 'Mike';
let age = 30;

let output = myTag`That ${ person } is a ${ age }`;

console.log(output); // That Mike is a youngster

上記のコードでは、myTag という関数を使ってテンプレートリテラルを処理しています。

この関数はテンプレートリテラルの各部分を個別に処理して、カスタマイズした文字列を生成します。

TypeScriptを使う上で理解しておきたい便利な3つの機能

TypeScriptの強力な型推論とジェネリック機能をコード例と共に詳しく解説します。基本から応用まで理解を深めましょう。

gizanbeak.com

まとめ

以上がTypeScriptのテンプレートリテラルについての簡単な解説でした。

テンプレートリテラルは非常に強力な機能で、コードの可読性を大幅に向上させることができます。
ぜひ積極的に使ってみてください！

Gizanbeak