JavaScript projelerinde değişkenlerle çalışırken string manipülasyonu yapmak, çoğu zaman yorucu ve karmaşık olabilir. Eski yöntemler olan + operatörü ya da concat() fonksiyonları yerini daha okunabilir ve esnek bir çözüm olan template literals’a bırakıyor. Bu yazımda, template literals kullanarak kodlarımızı nasıl daha dinamik ve temiz hale getirebileceğimizden bahsedeceğim.

Template Literals Nedir?

Template literals, JavaScript ES6 ile gelen ve backtick işareti (`) içinde yazılan string türüdür. Template literals sayesinde karmaşık, çok satırlı stringler ve değişkenlerle daha rahat bir şekilde çalışabiliriz.

String Birleştirme (String Interpolation)

Template literals’ı güçlü kılan en önemli özellik, ${} süslü parantezler içinde değişkenleri direkt olarak string içinde kullanabilmemizdir. Bu özellik, özellikle uzun string ifadelerle çalışırken büyük bir rahatlık sağlıyor.

Örneğin:

var name = "Ömer";
var age = 26;
console.log(`Merhaba, benim adım ${name} ve ${age} yaşındayım.`);
//Çıktısı: Merhaba, benim adım Ömer ve 26 yaşındayım.

Bu kodda, değişkenlerin değerlerini ${} ifadesi ile doğrudan string içine gömdük. Böylece + operatörüyle uğraşmamıza gerek kalmadı.

Çok Satırlı Stringler (Multi-line Strings)

JavaScript’te \n karakteriyle yeni satır oluşturmak eskiden bir zorunluluktu. Ancak template literals ile, backtick (`) işareti ile string içinde istediğimiz gibi yeni satır ekleyebiliriz.

Örneğin:

var message = `Bu mesaj,
çok satırlı
yazılmıştır.`;
console.log(message);
//Çıktısı:
/*
Bu mesaj,
çok satırlı
yazılmıştır.
*/

Bu sayede, kodlarımız hem daha temiz hem de okunabilir hale geliyor.

İç İçe Template Literals (Nesting Templates)

Daha karmaşık ya da koşullu durumlarda, bir template literal içinde başka bir template literal kullanmak gerekebilir. Bu durumda, iç içe ${} yapısını kullanarak daha esnek string ifadeleri oluşturabiliriz.

Örneğin:

var product = "Iphone 16";
var price = 65000;
var tax = 1.5;
var country = "Türkiye";
console.log(`${country}'de ${product} ürünü vergiler dahil ${(price * tax)} TL. ${(country == 'Türkiye' ? "Allah kolaylık versin :)" : "")}`);
//Çıktısı: Türkiye'de Iphone 16 ürünü vergiler dahil 97500 TL. Allah kolaylık versin :)

Bu yapıyla, doğrudan matematiksel işlemleri, koşul ifadelerini ve değişkenleri string içinde kullanabiliyoruz.

Tagged Template Literals

JavaScript’te tagged template literals adlı daha ileri düzey bir özellik de mevcut. Tagged template literals, bir fonksiyonun template literal’deki her bir string ve değişkeni işlemesine olanak tanır. Bu yöntemle özel string biçimlendirmeleri yapabilirsiniz.

Örneğin:

function parantezeAl(strings, ...values) {
    var newString = "";

    for(let i = 0; i<strings.length; i++) {
        newString += `${strings[i]}${(i > values.length - 1) ? "" : "("+ values[i] +")"}`;
    }
    return newString;
}

var name = "Ömer";
var surname = "Kurgun";

console.log(parantezeAl`Merhaba, Benim adım ${name} ve soyadım da ${surname}`);
//Çıktısı: Merhaba, Benim adım (Ömer) ve soyadım da (Kurgun)

Örnek metin içindeki değişkenleri parantez içine aldığım gibi, template literals içindeki değişkenleri ve metinleri ayırıp sonradan istediğimiz şekilde işleyebiliriz.

Neden Template Literals Kullanmalıyız?

  • Okunabilirlik: Kodunuz daha temiz ve anlaşılır olur.
  • Esneklik: Çok satırlı stringleri ve değişken interpolasyonunu kolayca yapabilirsiniz.
  • Kolaylık: Dinamik stringler oluştururken + operatörü yerine daha kolay bir yöntem kullanırsınız.

Sonuç

Template literals, JavaScript kodlarınıza pratiklik ve esneklik katar. Kısaca özetlemek gerekirse, kodunuzu daha okunabilir ve sürdürülebilir hale getirmek istiyorsanız template literals kullanımını tavsiye ederim. Özellikle uzun ve karmaşık string işlemleri olan projelerde, template literals vazgeçilmez bir özellik haline geliyor.

Okuduğunuz için teşekkürler, İyi kodlamalar 😉

Kategoriler:

JavaScript,