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
- Ç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:
|
1 2 3 4 5 6 |
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:
|
1 2 3 4 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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.