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.

Sıradaki ders: Kaçış dizileri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler