JavaScript’te “Template Literals” Kullanımı

JavaScript’te “string” oluşturma yöntemlerinden biri olan “template literals”, ES6’nın sunduğu yeniliklerden biri olup, kodun daha okunabilir ve sade bir şekilde yazılmasını sağlayan modern bir yöntemdir.

“Template Literals”

“String” birleştirmek, formatlamak veya dinamik değerler eklemek JavaScript’te sıkça karşılaşılan ihtiyaçlardan biridir. ES6 (ECMAScript 2015) ile birlikte, bu tür işlemleri daha okunabilir ve esnek bir şekilde yapmamızı sağlayan “template literals” özelliği tanıtılmıştır.

“Template literals”, geriye dönük tırnak işareti olarak adlandırılan backtick `` ile tanımlanır ve genel olarak aşağıdaki işlemleri yapmamızı sağlar:

• Çok satırlı stringler
• İnterpolasyon
• Tagged template literals

Çok Satırlı Stringler

Geleneksel stringlerle çoklu satır oluşturmak için birkaç yöntem vardır, ancak bu yöntemler genellikle karmaşık ve okunması zordur. “Template literals” ile çoklu satır stringleri doğrudan oluşturabiliriz:

let metin = `
Bu bir
çoklu satır
metindir.
`;
console.log(metin);

İnterpolasyon

“Template literals” içerisinde, matematiksel hesaplamalar, fonksiyon çağrıları ve hatta diğer template literals dahil olmak üzere her türlü JavaScript ifadesi kullanabiliriz:

let fiyat = 19.99;
let vergiOrani = 0.18;
let toplamFiyat = `Toplam Fiyat: ${fiyat * (1 + vergiOrani)} TL`;
console.log(toplamFiyat);  // Çıktı: "Toplam Fiyat: 23.5882 TL"

Tagged Template Literals

“Tagged template literals”, template stringlerin işlenme şeklini özelleştirmek için kullanılır. Bir template literal’i işleyen fonksiyona “tag function” denir. Bu fonksiyon, template literal’in içeriğini alır ve istediğiniz herhangi bir işlemi uygulayarak sonuç döndürebilir.

Verilen bir stringin belli bir uzunluğu aşmaması gerektiğini ve aştığı durumda sonuna “…” eklemek istediğimiz bir senaryo düşünelim. Bakınız:

function kisalt(strings, ...values) {
  let sonuc = strings[0];
  let deger = values[0];

  if (deger.length > 10) {
    deger = deger.slice(0, 10) + "...";
  }
  
  sonuc += deger + strings[1];
  return sonuc;
}

let uzunMetin = "Bu metin çok uzun ve kısaltılmaya ihtiyaç duyuyor.";
let mesaj = kisalt`Metin: ${uzunMetin}`;
console.log(mesaj);  // "Metin: Bu metin çok..."

Yukarıdaki örnekte kisalt adında bir “tag function” oluşturduk. Bu fonksiyon, gömülü değeri kontrol eder ve eğer bu değer 10 karakterden uzunsa, ilk 10 karakterini alıp sonuna “…” ekler.