JavaScript’te Template Literals

JavaScript'te string (metin) oluşturmanın ve birleştirmenin farklı yolları vardır. Geleneksel yöntem, "+" operatörü ile stringleri birleştirmektir. Ancak, bu yöntem bazen fazladan iş yükü ve okunması zor kodlara neden olabilir. İşte bu sorunu çözmek için template literals (şablon dizgileri) devreye girer.

Bu yazıda, önce eski yöntemleri inceleyeceğiz, ardından template literals kullanarak nasıl daha temiz ve okunabilir kod yazabileceğimizi öğreneceğiz.

Template Literals Olmadan String Birleştirme

Diyelim ki elimizde bir ürünün adı, fiyatı ve miktarı ile ilgili üç değişken var:

let urun = "Elma";
let fiyat = 4.50;
let miktar = 3;

Bu değişkenleri kullanarak bir mesaj oluşturmak istiyoruz:

"3 adet Elma aldınız. Toplam fiyat: 13.50 TL."

Bu mesajı geleneksel string birleştirme yöntemiyle yazarsak şu şekilde olur:

let mesaj = miktar + " adet " + urun + " aldınız. Toplam fiyat: " + (fiyat * miktar) + " TL.";
console.log(mesaj);

Bu yöntemin dezavantajları şunlardır:

Çok fazla "+" operatörü kullanılıyor, bu da kodu okunması zor hale getiriyor.
Her değişken arasına boşluk eklemek zorundayız.
Matematiksel işlemleri parantez içinde belirtmeliyiz.
Okunabilirliği düşük bir kod ortaya çıkıyor.

Bu karmaşıklıkları gidermek için template literals kullanabiliriz.

Template Literals ile Daha Kolay String İşlemleri

Template literals, string oluşturmayı kolaylaştıran modern bir JavaScript özelliğidir. Bunu kullanabilmek için backtick (``) karakterlerini kullanmalıyız.

Örneğin, yukarıdaki işlemi template literals ile yapalım:

let mesaj = `${miktar} adet ${urun} aldınız. Toplam fiyat: ${fiyat * miktar} TL.`;
console.log(mesaj);

Template Literals Kullanımının Avantajları

"+" operatörü kullanmamıza gerek kalmaz.
Tüm değişkenleri ve ifadeleri doğrudan ${} içine yazabiliriz.
Matematiksel işlemleri direkt olarak ${} içinde yapabiliriz.
Kod daha okunaklı ve anlaşılır hale gelir.

Template Literals ile Ekstra Özellikler

1. Matematiksel İşlemler Kullanmak

${} içine herhangi bir JavaScript ifadesini yazabiliriz. Örneğin:

let a = 10;
let b = 5;

console.log(`Toplam: ${a + b}`); // "Toplam: 15"
console.log(`Çarpım: ${a * b}`); // "Çarpım: 50"

2. Metot Kullanmak

${} içine bir değişkenin metotlarını da yazabiliriz. Örneğin:

let isim = "ahmet";
console.log(`Merhaba, ${isim.toUpperCase()}!`); // "Merhaba, AHMET!"

Burada toUpperCase() metodu kullanılarak isim büyük harflere çevrildi.

3. Satır Atlamaları (Çok Satırlı Stringler)

Template literals, çok satırlı stringler oluşturmayı kolaylaştırır. Normalde birden fazla satırlı string oluşturmak için \n karakteri veya "+" operatörü kullanılırdı:

let eskiYontem = "Merhaba,\nBugün hava çok güzel!\nUmarım harika bir gün geçirirsiniz.";
console.log(eskiYontem);

Template literals ile bunu daha okunaklı bir şekilde yazabiliriz:

let yeniYontem = `Merhaba,
Bugün hava çok güzel!
Umarım harika bir gün geçirirsiniz.`;
console.log(yeniYontem);

Gerçek Hayatta Template Literals Kullanımı

Diyelim ki bir alışveriş sisteminde ürün bilgilerini göstermek istiyoruz. Template literals kullanarak, daha temiz bir kod yazabiliriz:

let urunAdi = "Dizüstü Bilgisayar";
let fiyat = 15000;
let stok = 7;

let urunBilgi = `Ürün: ${urunAdi}
Fiyat: ${fiyat} TL
Stok Durumu: ${stok} adet`;
console.log(urunBilgi);

Çıktı:

Ürün: Dizüstü Bilgisayar
Fiyat: 15000 TL
Stok Durumu: 7 adet

Bu yöntem, kodun okunaklılığını ve bakımını kolaylaştırır.

Sonuç

Template literals, string oluşturmayı ve birleştirmeyi çok daha kolay ve okunaklı hale getirir. Özetle:

"+" operatörü yerine backtick (``) kullanılır.
${} içinde değişkenler ve ifadeler yazılabilir.
Matematiksel işlemler ve metotlar doğrudan yazılabilir.
Çok satırlı stringler daha kolay oluşturulabilir.

Günümüz JavaScript projelerinde template literals kullanımı yaygındır ve eski + ile birleştirme yöntemine göre çok daha pratiktir. Bundan sonraki kod yazımlarınızda template literals kullanarak daha temiz kodlar oluşturabilirsiniz!