JavaScripte metinler ile uğraşırken yazılımcıya çok yardımcı olan bir özellik de template literals özelliğidir. Çok satırlı metinler, metinler içerisinde değişken kullaımına izin verir. Diğer metin tanımlarından farklı olarak ifadeler backtickler içerisine yazılır.
Template Literals Nedir?
JavaScripte string ifadeleri belirtmek için kullanılan bir yöntemdir. Bu yöntemde string ifadeler backtickler içerisine yazılır ve template literal kullanıldığında string içerisinde değişken kullanılabilir.
Kullanım Şekilleri Nelerdir?
En basit kullanımı normal bir metin ifadeyi içermesidir.
const isim = `Ahmet`;
console.log(isim);
// Konsola Ahmet yazdırır.
Bu kullanımda, normal bir string gibi kullandık. Şimdi farklı bir özellikten bahsedelim. Çoklu satır içeren metin ifadelerini de bu şekilde kolayca yazabiliriz. Önce template literals olmadan nasıl yapacağımıza ve sonrada bunun kolay yoluna bakalım.
let metin = "Harika Bir Model\n";
metin += "Bu modeli aldığınızda gözünüzü ayıramayacaksınız.\n";
metin += "Son günlerin en çok satan modeli.\n";
metin += "Ayrıca şimdi indirimli.";
console.log(metin);
/*
Ekrana aşağıdaki gibi bir çıktı verir.
Harika Bir Model
Bu modeli aldığınızda gözünüzü ayıramayacaksınız.
Son günlerin en çok satan modeli.
Ayrıca şimdi indirimli.
*/
// Şimdi template literals kullanalım
metin = `Harika Bir Model
Bu modeli aldığınızda gözünüzü ayıramayacaksınız.
Son günlerin en çok satan modeli.
Ayrıca şimdi indirimli.`;
console.log(metin);
/*
Ekrana aşağıdaki gibi bir çıktı verir.
Harika Bir Model
Bu modeli aldığınızda gözünüzü ayıramayacaksınız.
Son günlerin en çok satan modeli.
Ayrıca şimdi indirimli.
*/
Çoklu satır içeren metinlerde hem daha rahat bir okuma ve hemde rahat bir yazma sunuyor.
String İçerisine Değişken Yerleştirme
Şimdi metin içerisine değişken ekleyelim. Tabii hem önceki yöntemi ve hemde yeni yöntemi görelim.
const isim = "Selami";
const sinif = "C";
const metin = "Merhaba " + isim + sinif + " sınıfına hoşgeldin.";
console.log(metin);
// Consola aşağıdaki ifadeyi yazıdırır.
// Merhaba Selami C sınıfına hoş geldin.
// Şimdi template literals kullanarak aynı işlemi yapalım
const metin1 = `Merhaba ${isim} ${sinif} sınıfına hoşgeldin.";
console.log(metin1);
// Ekrana aşağıdaki ifadeyi yazdırır.
// Merhaba Selami C sınıfına hoş geldin.
Gördüğünüz gibi hem daha okunaklı ve hemde daha rahat bir şekilde metin içerisine değişkenleri gömebildik.
Template literals kullanırken bir değişkeni eklemek için ${degiskenAdi} şeklinde kullanıyoruz. İşin güzel yanı template literals içerisinde fonskiyon veya daha farklı JavaScript ifadeleri de kullanabiliriz.
const adet = 5;
const fiyat = 25;
const sonuc = `Toplam tutar: ${ adet * fiyat }TL`
console.log(sonuc);
// Konsola aşağıdaki ifadeyi yazdırır.
// Toplam tutar: 125TL
Template Literals İle String İçerisinde İfade Kullanma
Template literals içerisinde JavaScript ifadeleri kullanabiliriz demiştik. Bu şartlı ifadeleri de kullanabileceğimiz anlamına gelir.
Mesela bir değişkenin durumuna göre farklı bir değer seçilebilir.
const havaAcik = true;
const metin = `${havaAcik ? "Bugün hava açık, yanına şemsiye almayabilirsin." : "Yanına şemşiye al, hava yağacak."}`;
// Yukarıda şartlı bir ifade kullandık. Eğer havaAcik = true ise
// İfadenin ilk bölümü, aksi halde ikinci bölümü metin değişkenine
// atanacak.
console.log(metin);
// Konsola aşağıdaki ifade yazdırılır.
// Bugün hava açık, yanına şemşiye almayabilirsin.
Tagged Templates
Tagged Templates, JavaScriptde bir metinsel ifadenin içerisindeki değeri bir fonksiyona göndererek, orada işlem yapılmasının kolay yoludur. Kullanım şekli:
function tagged(strings, isim) {
const metin = `${strings[0]} ${isim} mağazamıza hoşgeldiniz.`;
console.log(metin)
}
const isim = "Selami";
tagged`Merhaba ${isim}`;
// Ekrana aşağıdaki ifadeyi bastırır.
// Merhaba Selami mağazamıza hoşgeldiniz.
Tagged Templates Raw String Nedir?
İstediğimiz gibi bir fonksiyon yazarak, ona string içerisinden değişkenler geçebiliriz. Yukarıdaki örneğimizde isim değişkenini geçirdik. Birden fazla değişken de kullanabilirdik. Değişkenlerin haricinde, gönderdiğimiz diğer metinler strings değişkenine gönderilir ve bu değişkene raw string denir.
Eğer değişkenlerin haricinde olan bölümlerdir ve bu nedenle, bir dizi şeklinde gelir. Mesela:
const isim = "Selami";
const gun = "Cuma";
const msg = (strings, isim, gun) => {
const metin = `${strings[0]} ${isim} ${string[1]} ${gun}`;
}
msg`Merhaba ${isim} bugün ${gun}`;
// Ekrana
// Merhaba Selami bugün Cuma
// yazdırır.
Yukarıdaki örnekte msg`Merhaba ${isim} bugün ${gun}`; ifadesi ile msg fonksiyonuna 3 adet değişken gider. İlk değişken raw string olarak strings değişkenidir. 2 elemana sahiptir ve şu şekilde görünür ["Merhaba","bugün"] 2 parametre ise isim ve gun değişkenleridir.
Diğer İsimlendirmeler
Template literals için aşağıdaki isimlendirmeler kullanılır.
- Template Literals
- Template Strings
- String Templates
- Back-Tics Syntax
Konu hakkında eklemek istedikleriniz veya sormak istedikleriniz varsa yorum bölümünden bize ulaşabilirsiniz.