Template literals
Ters tırnak (backtick) ile template literals ve ${} içinde ifade kullanmayı öğrenirsin.
Ters tırnak ile template literal
JavaScript'te template literal, dizeyi ters tırnak (`) içine yazmaktır. Bu tuş genellikle klavyede 1'in solundadır.
Template literal'in gücü ${} içine ifade yazabilmektir. Örnek: `Merhaba ${name}`. Süslü parantezler içindeki ifade değerlendirilir ve dizeye gömülür.
Ters tırnak içinde satır başı yapabilirsin; dize çok satırlı olur. Bu özellik + ile birleştirmeden daha okunaklıdır.
${} ile ifade gömme
${} içine yalnızca değişken değil, her türlü ifade yazabilirsin: aritmetik, yöntem çağrısı, hatta başka bir template literal.
Örnekler: `Toplam: ${a + b}`, `Uzunluk: ${word.length}`. İfade önce değerlendirilir, sonra dizeye gömülür.
Ters tırnak içinde doğrudan enter'a basarsan dize çok satırlı olur. Yeni satır için \n yazmana gerek kalmaz.
Uygulama Template literal ile mesaj oluştur
product değişkenini "Kalem" (TR) / "Pen" (EN) dizesi olarak, price değişkenini 12.5 sayısı olarak tanımla. message değişkenini template literal ile oluştur ve içinde hem ${product} hem ${price} ifadelerini kullan. message'ı console.log ile yazdır.
Örnek çözümü göster
const product = "Kalem";
const price = 12.5;
const message = `${product} fiyatı ${price} lira`;
console.log(message);Kendini test et
-
Hangisi bir template literal'dir?
- "Merhaba"
- 'Merhaba'
- [Merhaba]
- `Merhaba`
Cevabı göster
`Merhaba` — Doğru. Ters tırnak (`) ile yazılan dize template literal'dir.
-
İfadeyi template literal'a göm
const name = "Ayşe"; const greeting = `Merhaba ____`;Cevabı göster
const name = "Ayşe"; const greeting = `Merhaba ${name}`; -
Sözdizimi ve anlamını eşleştir
- `dize`
- Template literal
- ${ifade}
- İfade gömme
- 'dize'
- Tek tırnak dize
- "dize"
- Çift tırnak dize
-
`${3 + 4}` sonucu nedir?
console.log(`${3 + 4}`);- "3 + 4"
- "7"
- "${3 + 4}"
- 7
Cevabı göster
"7" — Doğru. ${} içindeki ifade önce değerlendirilir (3 + 4 = 7), sonra dizeye gömülür.