5分でわかる！TypeScriptの文字列に変数を埋め込む3つの方法

// シングルクォーテーションを使った文字列
const message1 = 'こんにちは';

// ダブルクォーテーションを使った文字列
const message2 = "TypeScript";

// バッククォーテーションを使った文字列（テンプレートリテラル）
const message3 = `プログラミング`;

// 明示的に型を指定する場合
const name: string = "田中";

// 型推論を使う場合（コンパイラが自動的に型を判断）
const age = 30; // 数値型（number）と推論される

const name = "鈴木";
const age = 25;

// プラス演算子を使った連結
const message = "私の名前は" + name + "です。年齢は" + age + "歳です。";
console.log(message); // 「私の名前は鈴木です。年齢は25歳です。」と出力される

const firstName = "太郎";
const lastName = "山田";

// concat()メソッドを使った連結
const fullName = "".concat("氏名：", lastName, " ", firstName);
console.log(fullName); // 「氏名：山田 太郎」と出力される

const name = "佐藤";
const age = 28;

// テンプレートリテラルを使った文字列への変数埋め込み
const message = `私の名前は${name}です。年齢は${age}歳です。`;
console.log(message); // 「私の名前は佐藤です。年齢は28歳です。」と出力される

const x = 10;
const y = 20;

// 式の評価
const sum = `${x} + ${y} = ${x + y}`;
console.log(sum); // 「10 + 20 = 30」と出力される

// 関数の呼び出し
const name_en = "satoh";
const upperCaseName = `大文字：${name_en.toUpperCase()}`;
console.log(upperCaseName); // 「大文字：SATOH」と出力される

const multiline = `これは
複数行の
文字列です。`;

console.log(multiline);
// 「これは
// 複数行の
// 文字列です。」と出力される

interface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 123,
  name: "山本次郎",
  email: "yamamoto@example.com"
};

const userInfo = `ユーザー情報：
ID: ${user.id}
名前: ${user.name}
メール: ${user.email}`;

console.log(userInfo);
// 「ユーザー情報：
// ID: 123
// 名前: 山本次郎
// メール: yamamoto@example.com」と出力される

const fruits = ["りんご", "バナナ", "オレンジ"];

// 従来の方法
let oldWay = "フルーツ一覧：";
for (let i = 0; i < fruits.length; i++) {
  oldWay += fruits[i];
  if (i < fruits.length - 1) oldWay += "、";
}

// テンプレートリテラルとjoinを使った方法
const newWay = `フルーツ一覧：${fruits.join("、")}`;

console.log(oldWay); // 「フルーツ一覧：りんご、バナナ、オレンジ」と出力される
console.log(newWay); // 「フルーツ一覧：りんご、バナナ、オレンジ」と出力される

const age = 17;
const canDrive = `あなたは${age >= 18 ? "運転できます" : "運転できません"}`;
console.log(canDrive); // 「あなたは運転できません」と出力される

interface Product {
  id: number;
  name: string;
  price: number;
}

const product: Product = {
  id: 101,
  name: "スマートフォン",
  price: 50000
};

const htmlTemplate = `
<div class="product" id="product-${product.id}">
  <h2>${product.name}</h2>
  <p>価格: ${product.price.toLocaleString()}円</p>
  <button onclick="buyProduct(${product.id})">購入する</button>
</div>
`;

console.log(htmlTemplate);

function highlight(strings: TemplateStringsArray, ...values: any[]) {
  let result = "";

  // 文字列と値を交互に連結
  strings.forEach((string, i) => {
    result += string;
    if (i < values.length) {
      // 値を強調表示
      result += `<span class="highlight">${values[i]}</span>`;
    }
  });

  return result;
}

const name = "田中";
const age = 30;

const highlightedText = highlight`私の名前は${name}です。年齢は${age}歳です。`;
console.log(highlightedText);
// 「私の名前は<span class="highlight">田中</span>です。年齢は<span class="highlight">30</span>歳です。」と出力される

const userName = "佐々木";
const items = ["本", "ペン", "ノート"];

const message = `こんにちは、${userName}さん。
あなたのカートには${items.length}個のアイテムがあります：
${items.map(item => `- ${item}`).join('\n')}`;

console.log(message);
// 「こんにちは、佐々木さん。
// あなたのカートには3個のアイテムがあります：
// - 本
// - ペン
// - ノート」と出力される

const code = `コード例：\`const name = "太郎";\``;
const price = `価格：\${price}`;

console.log(code); // 「コード例：`const name = "太郎";`」と出力される
console.log(price); // 「価格：${price}」と出力される

function formatUser(user: { name: string; age: number }): string {
  return `名前：${user.name}、年齢：${user.age}歳`;
}

// 正しい型
const validUser = { name: "鈴木", age: 28 };
console.log(formatUser(validUser)); // 「名前：鈴木、年齢：28歳」と出力される

// 誤った型（TypeScriptがエラーを検出）
// const invalidUser = { name: "佐藤" }; // ageプロパティがない
// console.log(formatUser(invalidUser)); // コンパイルエラー

let value: unknown = 42;

// 以下はTypeScriptの型チェックでは問題ないが、意図しない結果になるかもしれない
const message = `値は${value}です`; // 「値は42です」と出力される

// より安全な方法（型の明示的なチェック）
function safeInterpolate(value: unknown): string {
  if (typeof value === "number" || typeof value === "string" || typeof value === "boolean") {
    return `値は${value}です`;
  }
  return "値は不明です";
}

const nullable: string | null = null;
const undefinedVar: string | undefined = undefined;

// これらはそれぞれ「値：null」「値：undefined」と出力される
console.log(`値：${nullable}`);
console.log(`値：${undefinedVar}`);

// より安全な書き方
console.log(`値：${nullable ?? "データなし"}`);
console.log(`値：${undefinedVar ?? "未定義"}`);

interface Translations {
  [key: string]: {
    greeting: string;
    farewell: string;
  };
}

const translations: Translations = {
  ja: {
    greeting: "こんにちは、{name}さん！",
    farewell: "さようなら、{name}さん！"
  },
  en: {
    greeting: "Hello, {name}!",
    farewell: "Goodbye, {name}!"
  }
};

function translate(key: 'greeting' | 'farewell', language: string, params: { [key: string]: string }): string {
  let text = translations[language][key];

  // プレースホルダーの置換
  Object.entries(params).forEach(([key, value]) => {
    text = text.replace(`{${key}}`, value);
  });

  return text;
}

// 使用例
const userName = "田中";
console.log(translate("greeting", "ja", { name: userName })); // 「こんにちは、田中さん！」と出力される
console.log(translate("farewell", "en", { name: userName })); // 「Goodbye, 田中!」と出力される