文字列補間の基本
テンプレートリテラル内に式を埋め込みます。
「文字列補間の基本」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
テンプレートリテラルとは
テンプレートリテラルは、引用符の代わりにバッククォート文字を使って文字列を作成する方法です。文字列連結を手動で行わなくても、文字列の中に式を直接埋め込めます。
プレースホルダーは、ドル記号に続けて、式を囲む波括弧を書くことで表します。JavaScript が式を評価し、その値を文字列に挿入します。
const name = "Alice"
const greeting = "Hello, " + name + "!"
console.log(greeting)補間の構文
テンプレートリテラルの中では、開始のドル記号と波括弧の組み合わせと、閉じ波括弧の間に式を記述します。式が評価され、文字列に変換されます。
以下の例では、補間を使った場合と同じ結果を得るために通常の文字列連結を使っています。そのため、リテラルの構文を示さなくても考え方を理解できます。
const product = "Book"
const price = 12
const line = product + " costs " + price + " dollars"
console.log(line)補間が役立つ理由
多くの変数とリテラルテキストを組み合わせると、プラス演算子による連結は読みにくくなります。補間を使えば周囲のテキストをそのまま保ち、動的な部分だけを差し替えられます。
- プラス演算子が少なくなる
- 余分な空白によるミスがなくなる
- 意図がより明確になる
const user = "Bob"
const count = 3
console.log(user + " has " + count + " messages")任意の式を埋め込む
プレースホルダーには、変数だけでなく任意の有効な式を指定できます。算術演算、関数呼び出し、プロパティアクセスも使用できます。
const a = 5
const b = 7
console.log("Sum is " + (a + b))
console.log("Max is " + Math.max(a, b))内部で関数を呼び出す
関数を呼び出し、その戻り値を文字列に組み込むことができます。例では、同等の文字列連結形式を示しています。
function upper(s) { return s.toUpperCase() }
const word = "hello"
console.log("Loud: " + upper(word))プロパティアクセス
オブジェクトのプロパティは、プレースホルダー内で直接読み取れます。ここでは user オブジェクトからフィールドを読み取ります。
const user = { name: "Eve", age: 30 }
console.log("Name: " + user.name + ", Age: " + user.age)数値は文字列になる
数値が文字列のコンテキストに入ると、自動的にテキスト形式へ変換されます。補間でも同じ型変換が行われます。
const total = 19.99
console.log("Total: $" + total)プレースホルダー内の三項演算子
三項演算子による条件分岐はプレースホルダーに記述できるため、2つの値からインラインで一方を選べます。
const score = 72
const grade = score >= 60 ? "Pass" : "Fail"
console.log("Result: " + grade)ネストされた式
プレースホルダーには、メソッドチェーンやネストされた呼び出しを含めることができます。式を評価した結果がそのまま挿入されます。
const items = ["a", "b", "c"]
console.log("Joined: " + items.join("-"))
console.log("Count: " + items.length)複数の値を組み合わせる
テンプレートリテラルは、複数の変数を組み合わせて文章を作る場合に特に便利です。読みやすい補間版（文章で説明しています）と、この連結による同等の形式を比較してみましょう。
const city = "Paris"
const temp = 21
const sky = "sunny"
console.log("In " + city + " it is " + temp + "C and " + sky)ドル記号をエスケープする
プレースホルダーではなく、ドル記号と波括弧の組み合わせを文字として表示したい場合は、テンプレートリテラル内でドル記号をバックスラッシュによってエスケープします。通常の文字列ではエスケープは必要ありません。
const text = "Use $\{x\} for a placeholder"
console.log(text)確認問題
補間についての理解度を確認してみましょう。
まとめ
まとめ: テンプレートリテラルでは、バッククォートとプレースホルダーを使って文字列に式を埋め込めます。
- プレースホルダーでは任意の式が評価される
- 値は文字列に型変換される
- 長い文字列連結より補間のほうが読みやすい
- ドル記号をエスケープすると文字として表示できる
const n = "World"
console.log("Hello, " + n + "!")よくある質問
「文字列補間の基本」レッスンは無料ですか？
はい。「文字列補間の基本」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「文字列補間の基本」で何を学びますか？
テンプレートリテラル内に式を埋め込みます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「文字列補間の基本」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。