crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
1. Değişkenleri Metne Gömme (Interpolation)
Eski yöntemde metinleri birleştirmek için artı (+) operatörünü kullanmak hem yorucuydu hem de hata yapmaya çok müsaitti. Template Literals ile ${ } kalıbını kullanarak değişkenleri doğrudan metnin içine yerleştirebiliriz.
JavaScript:
const isim = "Gemini";
const sürüm = "3.0";
// Eski Yöntem:
console.log("Merhaba, ben " + isim + " ve sürümüm " + sürüm + ".");
// Modern Yöntem (Template Literals):
console.log(Merhaba, ben ${isim} ve sürümüm ${sürüm}.);2. Çok Satırlı Metinler (Multi-line Strings)
Normal tırnak işaretleri ile bir alt satıra geçmek için \n gibi kaçış karakterleri kullanmanız gerekir. Backtick kullanırken ise sadece Enter'a basmanız yeterlidir; metin tam olarak yazdığınız formatta korunur.
JavaScript:
// Eski Yöntem:
const eskiMesaj = "Bu birinci satır\n" +
"Bu ikinci satır";
// Modern Yöntem:
const modernMesaj = Bu birinci satır Bu ikinci satır Dilediğiniz kadar boşluk bırakabilirsiniz.;
console.log(modernMesaj);3. İçeride Matematiksel ve Mantıksal İşlemler
${ } parantezleri içine sadece değişken isimlerini değil, herhangi bir JavaScript ifadesini (hesaplamalar, fonksiyon çağırmaları veya ternary operatörleri) yazabilirsiniz.
JavaScript:
const fiyat = 100;
const kdv = 0.20;
console.log(Toplam Ödenecek Tutar: ${fiyat * (1 + kdv)} TL);
const kullanıcıGirişi = true;
console.log(Durum: ${kullanıcıGirişi ? "Giriş yapıldı" : "Lütfen giriş yapın"});4. HTML Şablonları Oluşturma
Web geliştiricileri için Template Literals'ın en büyük faydası, dinamik HTML içerikleri oluştururken ortaya çıkar. Kodun okunabilirliği inanılmaz derecede artar.
JavaScript:
const kullanıcı = { ad: "Ahmet", yetki: "Yönetici" };
const htmlSablony = <div class="user-card"> <h2>${kullanıcı.ad}</h2> <p>Rolü: <strong>${kullanıcı.yetki}</strong></p> </div>;
document.body.innerHTML = htmlSablony;Özet Karşılaştırma
| Özellik | Klasik Tırnak (' ' veya " ") | Backtick ( ) |
|---|---|---|
| Değişken Ekleme | + operatörü ile zahmetli | ${variable} ile çok kolay |
| Çok Satır Desteği | \n kullanmak zorunlu | Doğrudan Enter ile yapılabilir |
| Okunabilirlik | Karmaşık yapılarda düşük | Çok yüksek ve temiz |
Sonuç
Template Literals, modern JavaScript yazarken vazgeçilmez bir araçtır. Kodunuzdaki o karmaşık artı işaretlerini ve tırnak karmaşasını temizleyerek daha profesyonel ve bakımı kolay yapılar kurmanızı sağlar. Backtick kullanmaya bir kez alıştığınızda, eski yönteme dönmek istemeyeceksiniz.