JavaScript のテンプレート リテラル

ES6 で導(dǎo)入されたテンプレート リテラルは、JavaScript で文字列を操作するための最新の方法です。これらは、文字列補(bǔ)間、複數(shù)行の文字列、文字列內(nèi)に式を直接埋め込むための、より簡単で読みやすい構(gòu)文を提供します。

テンプレート リテラルでは、引用符 (' または ") の代わりにバッククォート (`) を使用します。

---

1.基本的な構(gòu)文

テンプレート リテラルはバッククォート (`) で囲まれます。

例:

const message = `Hello, world!`;
console.log(message); // Output: Hello, world!

---

2.文字列補(bǔ)間

テンプレート リテラルでは、${} 構(gòu)文を使用して式や変數(shù)を文字列內(nèi)に直接埋め込むことができます。

例:

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

次の式を含めることもできます。

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

---

3.複數(shù)行の文字列

テンプレート リテラルを使用すると、エスケープ文字を使用せずに、複數(shù)行にまたがる文字列を簡単に作成できます。

例:

const multiLine = `This is a string
that spans multiple lines
using template literals.`;
console.log(multiLine);
// Output:
// This is a string
// that spans multiple lines
// using template literals.

---

4.関數(shù)と式の埋め込み

テンプレート リテラル內(nèi)に関數(shù)または複雑な式を埋め込むことができます。

例:

const add = (a, b) => a + b;
console.log(`The result of 5 + 10 is ${add(5, 10)}.`);
// Output: The result of 5 + 10 is 15.

---

5.タグ付きテンプレート

タグ付きテンプレートを使用すると、特別な関數(shù)で処理することでテンプレート リテラルの動作をカスタマイズできます。

例:

function tag(strings, ...values) {
  console.log(strings); // Array of string literals
  console.log(values);  // Array of expression values
  return "Custom output";
}

const result = tag`Hello, ${name}. You are ${age} years old.`;
console.log(result);
// Output:
// ["Hello, ", ". You are ", " years old."]
// ["Alice", 25]
// Custom output

タグ付きテンプレートは、國際化やユーザー入力のサニタイズなどの高度なユースケースに役立ちます。

---

6.バックティックのエスケープ

バッククォートをバックスラッシュ () でエスケープすることで、テンプレート リテラル內(nèi)に含めることができます。

例:

const str = `Here is a backtick: \``;
console.log(str);
// Output: Here is a backtick: `

---

7.実際の使用例

A.動的HTMLの生成

テンプレート リテラルにより、動的な HTML 文字列の作成が簡素化されます。

const name = "Alice";
const html = `<div>
  <h1>${name}'s Profile</h1>
  <p>Welcome to the profile page of ${name}.</p>
</div>`;
console.log(html);
// Output:
// <div>
//   <h1>Alice's Profile</h1>
//   <p>Welcome to the profile page of Alice.</p>
// </div>

B.デバッグ情報(bào)のログ記録

テンプレート リテラルを使用すると、デバッグが読みやすくなります。

const x = 42;
console.log(`The value of x is: ${x}`);
// Output: The value of x is: 42

C. SQL クエリの構(gòu)築

テンプレート リテラルは、SQL クエリを動的に構(gòu)築するのに役立ちます:

const message = `Hello, world!`;
console.log(message); // Output: Hello, world!

---

8.概要

• テンプレート リテラルにより、文字列がより強(qiáng)力で読みやすくなります。
• 主な機(jī)能には、文字列補(bǔ)間、複數(shù)行の文字列、タグ付きテンプレートなどがあります。
• これらは、最新の JavaScript で動的コンテンツ生成と文字列操作のために広く使用されています。

こんにちは、アバイ?シン?カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構(gòu)築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお?dú)葺Xにご連絡(luò)ください。

以上がJavaScript でテンプレート リテラルをマスターするの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。