JavaScriptのテンプレートリテラルの使用方法


  1. 基本的なテンプレートリテラルの使用例

テンプレートリテラルはバッククォート(`)で囲まれた文字列です。変数や式を埋め込むことができます。

例えば、以下のようなコードでは、変数nameの値を埋め込んだ文字列を生成しています。

const name = 'John';
const message = `Hello, ${name}!`;
console.log(message); // 出力: Hello, John!
  1. 式の埋め込み

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

const a = 10;
const b = 5;
const sum = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(sum); // 出力: The sum of 10 and 5 is 15.
  1. 複数行の文字列の作成

テンプレートリテラルを使用すると、複数行の文字列を作成することも容易です。

const multiline = `
  This is a
  multiline
  string.
`;
console.log(multiline);
// 出力:
//   This is a
//   multiline
//   string.
  1. テンプレートリテラル内での式の計算

テンプレートリテラル内では、式を計算することもできます。

const x = 5;
const y = 3;
const result = `${x} + ${y} = ${x + y}`;
console.log(result); // 出力: 5 + 3 = 8
  1. 関数の呼び出し

テンプレートリテラル内で関数を呼び出すこともできます。

function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}
const name = 'john';
const capitalized = `Hello, ${capitalize(name)}!`;
console.log(capitalized); // 出力: Hello, John!

以上が、JavaScriptのテンプレートリテラルの基本的な使用方法といくつかのコード例です。テンプレートリテラルを活用することで、文字列の操作やフォーマットが簡単になります。ぜひ実際のプロジェクトで活用してみてください。