TypeScript文字列補間解説

文字列補間とは

文字列補間とは、文字列内に変数や式を埋め込んで、それらの値を文字列に展開する手法です。これにより、文字列の組み立てや変数への値の代入などをより簡潔に記述することができます。

JavaScriptにおける文字列補間

JavaScriptでは、テンプレートリテラルを用いて文字列補間を実現します。テンプレートリテラルは、バッククォート（`）で囲まれた文字列であり、その中に変数や式を ${ } で囲んで埋め込むことができます。

const name = "John";
const age = 30;

const message = `Hello, my name is ${name}. I am ${age} years old.`;
console.log(message); // Output: Hello, my name is John. I am 30 years old.

TypeScriptでは、JavaScriptのテンプレートリテラルをそのまま使用することができます。そのため、JavaScriptと同様に ${ } を使って変数や式を埋め込むことができます。

const name: string = "John";
const age: number = 30;

const message: string = `Hello, my name is ${name}. I am ${age} years old.`;
console.log(message); // Output: Hello, my name is John. I am 30 years old.

文字列補間の利点

文字列補間を使用する利点は以下のとおりです。

• コードが簡潔になる：従来の文字列結合方法よりも簡潔に記述することができます。
• エラーを防ぐ：変数や式の値を直接文字列に埋め込むため、誤った値を埋め込む可能性が減ります。
• 可読性が高くなる：文字列を組み立てるコードがより直感的になり、読みやすくなります。

基本的な例

const name = "Alice";
const age = 30;

const message = `Hello, my name is ${name}. I am ${age} years old.`;
console.log(message); // Output: Hello, my name is Alice. I am 30 years old.

式の埋め込み

const x = 5;
const y = 10;

const result = `The sum of ${x} and ${y} is ${x + y}.`;
console.log(result); // Output: The sum of 5 and 10 is 15.

オブジェクトのプロパティの埋め込み

const person = {
  firstName: "Bob",
  lastName: "Smith"
};

const greeting = `Hello, ${person.firstName} ${person.lastName}!`;
console.log(greeting); // Output: Hello, Bob Smith!

配列の要素の埋め込み

const fruits = ["apple", "banana", "orange"];

const list = `My favorite fruits are ${fruits.join(", ")}.`;
console.log(list); // Output: My favorite fruits are apple, banana, orange.

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

function greet(strings, name, age) {
  return strings[0] + name + strings[1] + age + strings[2];
}

const message = greet`Hello, ${name}. I am ${age} years old.`;
console.log(message); // Output: Hello, Alice. I am 30 years old.

型の安全性を活用

const name: string = "Alice";
const age: number = 30;

const message: string = `Hello, my name is ${name}. I am ${age} years old.`;

文字列連結

最も基本的な方法は、文字列を連結することです。加算演算子 (+) を使用して、文字列と変数を連結します。

const name = "Alice";
const age = 30;

const message = "Hello, my name is " + name + ". I am " + age + " years old.";
console.log(message); // Output: Hello, my name is Alice. I am 30 years old.

String.prototype.concat()

concat() メソッドを使用して、文字列を連結することもできます。

const name = "Alice";
const age = 30;

const message = "Hello, my name is ".concat(name).concat(". I am ").concat(age).concat(" years old.");
console.log(message); // Output: Hello, my name is Alice. I am 30 years old.

replace() メソッドを使用して、文字列内のプレースホルダーを置き換えることもできます。

const name = "Alice";
const age = 30;

const message = "Hello, my name is %s. I am %d years old.".replace("%s", name).replace("%d", age);
console.log(message); // Output: Hello, my name is Alice. I am 30 years old.

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

テンプレートリテラルのタグ付き関数を使用して、文字列の処理をカスタマイズすることもできます。

function greet(strings, name, age) {
  return strings[0] + name + strings[1] + age + strings[2];
}

const message = greet`Hello, ${name}. I am ${age} years old.`;
console.log(message); // Output: Hello, Alice. I am 30 years old.