JavaScript Template Strings: Daha Esnek, Daha Okunabilir, Daha “Oh Be!” Kodlar 😄🚀

JavaScript yazarken tırnaklar arasında kaybolan,
+ + + görünce gözleri dolan bir geliştiriciysen…
hoş geldin! Bugün seni Template Strings ile çok daha huzurlu bir hayata geçiriyoruz 🧘‍♂️

Bu yazıda:

• Her başlığı derinlemesine inceleyeceğiz
• Kodları tek tek açıklayacağız
• Gerçek hayatta nerede, neden kullanılır göreceğiz
• Mini ipuçları ve “bunu bilmek hayat kurtarır” anları yaşayacağız

Hazırsan… backtick’e basıyoruz ⌨️

1️⃣ Template String Nedir? (Backtick’li Hayat)

Template String (ya da resmi adıyla Template Literal),
JavaScript’te string yazmanın modern, insancıl ve akıllı yoludur.

En önemli fark 👇

`Bu bir template string`

👉 Evet, fark ettin:

• " " yok
• ' ' yok
• Backtick (`) var

Neler Kazandırır?

• 📖 Okunabilir kod
• 🧩 String içine değişken gömme
• 📜 Çok satırlı yazım
• 🧠 Daha az hata, daha çok mutluluk

2️⃣ Eski Usul String Yazımı: JS’in Taş Devri 🦴

const name = "Cansu";
const job = "Frontend Developer";

const message =
  "Merhaba, benim adım " + name + 
  " ve ben bir " + job + " olarak çalışıyorum.";

console.log(message);

Burada Ne Sorun Var?

• + sayısı arttıkça okunabilirlik düşüyor
• Satır uzadıkça debug zorlaşıyor
• Parantez kaçtı mı → geçmiş olsun 😅

3️⃣ Template String ile Aynı Kod: Medeniyet Geldi 🌍

const name = "Cansu";
const job = "Frontend Developer";

const message = `Merhaba, benim adım ${name} ve ben bir ${job} olarak çalışıyorum.`;

console.log(message);

Burada Ne Oldu?

• +’lar çöpe 🗑️
• Değişkenler string’in doğal bir parçası
• Kod konuşuyor, anlatıyor

📌 Kural:
${} içine her türlü JavaScript ifadesi yazabilirsin.

4️⃣ ${} Sadece Değişken Değildir! (Mini JS Alanı 🎩)

const price = 250;
const discount = 0.2;

const text = `İndirimli fiyat: ${price - price * discount} TL`;
console.log(text);

Açıklama:

• ${} içinde matematik yaptık
• JS motoru önce hesapladı
• Sonra sonucu string’e gömdü

🧠 Altın bilgi:
${} = mini JavaScript çalışma alanı

5️⃣ Fonksiyon Çağırabilir miyim? Hem de Nasıl! 😎

function formatName(name) {
  return name.toUpperCase();
}

const user = "cansu";

console.log(`Kullanıcı: ${formatName(user)}`);

Ne Oldu?

• Fonksiyon çalıştı
• Sonuç string içine yerleşti
• Kod hem temiz hem akıllı

6️⃣ Çok Satırlı String: Enter’a Basmak Serbest 🎉

Eski yöntem (acı dolu):

const text = "Merhaba\nNasılsın?\nGörüşürüz.";

Template String ile:

const text = `
Merhaba
Nasılsın?
Görüşürüz.
`;

Neden Bu Kadar Güzel?

• Okurken gerçek metni görüyorsun
• Mail, mesaj, HTML yazarken birebir aynı yapı
• \n karmaşası yok

7️⃣ HTML Template Yazımı: Frontend’in Gizli Silahı 🧱

const user = {
  name: "Cansu",
  role: "Frontend Developer",
  isOnline: true
};

const card = `
  <div class="card">
    <h2>${user.name}</h2>
    <p>${user.role}</p>
    <span>${user.isOnline ? "🟢 Online" : "🔴 Offline"}</span>
  </div>
`;

Burada Ne Yaptık?

• HTML yazdık
• JS logic ekledik
• Koşul kullandık
• Kod hâlâ okunabilir

💡 Vanilla JS, React öncesi projeler, küçük widget’lar için efsane.

8️⃣ Koşullu İçerik: If Yazmadan If Yazmak 🧠

const score = 85;

const result = `
Sınav sonucu: ${score >= 60 ? "🎉 Geçti" : "😢 Kaldı"}
`;

Neden Güzel?

• Kod kısa
• Mantık net
• Okurken beyin yanmıyor 🔥

9️⃣ Console.log’ları Sevdiren Özellik ❤️

const user = "Cansu";
const action = "login";

console.log(`[INFO] ${user} kullanıcı ${action} işlemi yaptı.`);

👉 Log okurken:

• Kim?
• Ne yaptı?
• Ne zaman?

Hepsi net.

🔥 Pratik İpuçları (Bunları Bilmek Seviye Atlattırır)

✅ 1. Birden Fazla Değişken = Template String

// Yapma
"Merhaba " + name + ", yaşın " + age;

// Yap
`Merhaba ${name}, yaşın ${age}`;

✅ 2. Uzun Metin = Template String

const email = `
Merhaba ${name},

Kaydınız başarıyla tamamlandı.
İyi günler.
`;

✅ 3. Okunmuyorsa Yanlıştır

Kod okunmuyorsa doğru çalışıyor olması seni kurtarmaz.

🎯 Sonuç: Küçük Özellik, Büyük Etki

Template Strings:

• Kodunu temizler
• Hata ihtimalini azaltır
• Okunabilirliği uçurur
• Seni + travmasından kurtarır

Modern JavaScript yazıyorsan
Template String kullanmamak için geçerli bir sebep yok.