テンプレート リテラルの紹介。

文字列の操作は、プログラミング、特にインタラクティブな Web アプリケーションを構築する場合に非常に一般的なタスクです。 JavaScript の作業に時間を費やしたことがあれば、文字列に変数を入力する必要があったことがあるでしょう。
古いバージョンの JavaScript では、これは演算子を使用して、文字列連結 と呼ばれるプロセスを通じて文字列を結合することを意味していました。ただし、JavaScript ES6(2015) アップデートでは テンプレート リテラル が導入されました。 文字列補間.

テンプレートリテラルとは何ですか?

テンプレート リテラルを使用すると、文字列を簡単に操作できるようになります。これらは (') や (") ではなくバッククォート (`) で囲まれており、変数を配置する (${}) 構文を使用した文字列補間、または文字列に直接関数呼び出しをサポートします。

これは、テンプレート リテラルが文字列補間を簡略化する方法の例です。

const name = "John"
const age = 24

// Old method using concatenation
const greeting = "Hello, "   name   "! You are "   age   " years old."

// New method using template literals
const greetingWithTemplateLiteral = `Hello, ${name}! You are ${age} years old.`

console.log(greetingWithTemplateLiteral) // Outputs: Hello, John! You are 24 years old.

テンプレート リテラルを使用する利点

1. 読みやすさの向上

文字列の連結を使用する場合、特に長い文字列を扱う場合には、大量の記号に迷いやすくなります。テンプレート リテラルは、わかりやすい方法で文字列を記述できるようにすることでこれを回避します。

const product = "laptop"
const price = 1400

console.log(`The price of the ${product} is $${price}`)
// Outputs: The price of the laptop is $1400

2. 複数行の文字列

テンプレート リテラルが使用される前は、\n などのエスケープ文字を使用して複数行の文字列を作成する必要がありました。バッククォート(`).
の中に記述できるようになりました。

// Old method
const multiLineString1 = "This is the first line"   "\n"   "This is the second line"   "\n"   "This is the third line"

// New method
const multiLineString2 = `This is the first line
This is the second line
This is the third line`

console.log(multiLineString1)
console.log(multiLineString2)
/* Both output:
This is the first line
This is the second line
This is the third line
*/

3. 式の評価

計算を実行したり、関数を呼び出したり、文字列内のデータを操作したりすることもできます。

const a = 1
const b = 10

console.log(`The sum of a and b is ${a   b}`) 
// Outputs: The sum of a and b is 11

const upperCaseName = (name) => name.toUpperCase()
console.log(`Your name in uppercase is ${upperCaseName("John")}`)
// Outputs: Your name in uppercase is JOHN

JavaScript の一般的な使用例

1. HTML 生成

連結して HTML 文字列を構築する代わりに、補間を使用して変数を文字列に直接挿入できます。

const name = "John"
const htmlContent = `
  
Hello, ${name}!
  
Welcome to the site.
`

2. メッセージのログ記録

連結せずに変数をログ メッセージに直接挿入することもできます。

const user = "John"
const action = "logged in"

console.log(`User ${user} just ${action}`)
// Outputs: User John just logged in

3. URLの作成

テンプレート リテラルを使用すると、URL の構築も簡単になります。

const userId = 123
const apiUrl = `https://api.example.com/user/${userId}/details`

console.log(apiUrl)
// Outputs: https://api.example.com/user/123/details

4. 条件付きロジック

もう 1 つの優れた使用例は、条件付きロジックです。テンプレート リテラルを使用すると、if-else 条件の短縮形である三項演算子 (? :) を使用して文字列に単純な条件を与えることができます。
&& (and) や || などの論理演算子(or) は、文字列に条件部分を追加するためにも使用できます。これにより、余分な if-else ステートメントや連結の必要がなくなります。

const isMember = true
console.log(`User is ${isMember ? 'a member' : 'not a member'}`) 
// Outputs: User is a member

テンプレート リテラル内にさらに複雑な式を追加することもできます。

/* In this example, the condition age >= 18 is evaluated
the result is either “an adult” or “a minor” based on the value of age*/
const age = 24

const message = `You are ${age >= 18 ? 'an adult' : 'a minor'}`

console.log(message) 
// Outputs: You are an adult

/*In this, if isLoggedIn is true and username exists
username is displayed or else, it defaults to “Guest” */
const isLoggedIn = true
const username = "John"

const greeting = `Welcome ${isLoggedIn && username ? username : 'Guest'}`

console.log(greeting)
// Outputs: Welcome John

結論

JavaScript のテンプレート リテラルは、文字列補間を処理するためのよりクリーンで効率的な方法を提供します。この方法は、Web コンテンツの構築、メッセージのログ記録、または読みやすいコードの作成の間に、必要な柔軟性を提供します。

次回変数と文字列を操作するときは、テンプレート リテラルを使用してみてください。これが JavaScript を操作するための私にとっての頼りになる方法である理由がすぐにわかります。

リソース

1. MDN Web ドキュメント - テンプレート リテラル
2. GitHub - フェーズ 1 レビュー Strings Lab
3. W3 Schools - JavaScript テンプレート文字列