JavaScriptとの比較も！TypeScriptで文字列補間の奥深さを探る

TypeScriptで文字列補間を行う方法

テンプレートリテラルの基本的な使い方

const name = "山田太郎";
const age = 30;

const message = `こんにちは、${name}さん！${age}歳ですね。`;

console.log(message); // 出力: こんにちは、山田太郎さん！30歳ですね。

上記の例では、nameとage変数の値が、テンプレートリテラル内 ${} で囲まれた部分に自動的に挿入されます。

式の埋め込み

テンプレートリテラル内では、変数だけでなく、式も埋め込むことができます。

const price = 1000;
const discount = 0.2;

const total = `合計金額は${price * (1 - discount)}円です。`;

console.log(total); // 出力: 合計金額は800円です。

上記の例では、priceとdiscount変数を使用して、total変数の値を計算しています。

書式指定

テンプレートリテラル内では、数値や日付などの値をフォーマットすることもできます。

const date = new Date();

const formattedDate = `今日は${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日です。`;

console.log(formattedDate); // 出力: 今日は2023年11月14日です。

上記の例では、dateオブジェクトを使用して、formattedDate変数の値をフォーマットしています。

テンプレートリテラルは、多行文字列や複雑な文字列を表現するのに便利です。また、コードの可読性も向上させることができます。

詳細については、以下のTypeScript公式ドキュメントを参照してください。

補足

JavaScriptでも、テンプレートリテラルを使用して文字列補間を行うことができます。ただし、TypeScriptと比較すると、いくつかの違いがあります。

• JavaScriptでは、テンプレートリテラルはES6で導入された新しい機能です。そのため、古いブラウザでは動作しない可能性があります。
• TypeScriptでは、テンプレートリテラル内で型チェックが行われます。そのため、式の型が間違っている場合、コンパイルエラーが発生します。

その他の文字列補間方法

テンプレートリテラル以外にも、以下のような方法で文字列補間を行うことができます。

• + 演算子による連結
• String.prototype.concat() メソッド
• printf() 関数

ただし、これらの方法はテンプレートリテラルよりも冗長になりがちです。

TypeScriptで文字列補間を行うには、テンプレートリテラルを使用するのがおすすめです。テンプレートリテラルは、簡潔で分かりやすく、コードの可読性も向上させることができます。

テンプレートリテラルの基本的な使い方

const name = "山田太郎";
const age = 30;

const message = `こんにちは、${name}さん！${age}歳ですね。`;

console.log(message); // 出力: こんにちは、山田太郎さん！30歳ですね。

式の埋め込み

const price = 1000;
const discount = 0.2;

const total = `合計金額は${price * (1 - discount)}円です。`;

console.log(total); // 出力: 合計金額は800円です。

書式指定

const date = new Date();

const formattedDate = `今日は${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日です。`;

console.log(formattedDate); // 出力: 今日は2023年11月14日です。

多行文字列

const message = `
こんにちは、${name}さん！

${age}歳ですね。

よろしくお願いいたします。
`;

console.log(message);

複雑な文字列

const items = ["りんご", "バナナ", "みかん"];

const list = `
<ul>
${items.map(item => `<li>${item}</li>`).join("")}
</ul>
`;

console.log(list);

型チェック

const name: string = "山田太郎";
const age: number = 30;

const message = `こんにちは、${name}さん！${age}歳ですね。`; // OK

const message2 = `こんにちは、${name}さん！${age.toUpperCase()}歳ですね。`; // エラー: 型 'string' を 'number' に変換できません。

型ガードを使用して、式の型を安全にチェックすることができます。

const name: string | undefined = "山田太郎";
const age: number | undefined = 30;

const message = `こんにちは、${name}さん！${age ? `${age}歳ですね。` : ""}`;

console.log(message);

テンプレートリテラルは、TypeScriptで文字列補間を行うための便利な機能です。さまざまな方法で利用することで、コードを簡潔で分かりやすくすることができます。

テンプレートリテラル以外の文字列補間方法

+ 演算子による連結

const name = "山田太郎";
const age = 30;

const message = "こんにちは、" + name + "さん！" + age + "歳ですね。";

console.log(message); // 出力: こんにちは、山田太郎さん！30歳ですね。

String.prototype.concat() メソッド

const name = "山田太郎";
const age = 30;

const message = "こんにちは、".concat(name, "さん！").concat(age, "歳ですね。");

console.log(message); // 出力: こんにちは、山田太郎さん！30歳ですね。

printf() 関数

const name = "山田太郎";
const age = 30;

const message = printf("こんにちは、%sさん！%d歳ですね。", name, age);

console.log(message); // 出力: こんにちは、山田太郎さん！30歳ですね。

比較

テンプレートリテラルは、簡潔で分かりやすく、コードの可読性も向上させることができます。ただし、古いブラウザでは動作しない可能性があります。

その他の方法は、テンプレートリテラルよりも冗長になりがちですが、古いブラウザでも動作します。

状況に応じて、最適な方法を選択してください。