Oca.20

Hızlandırılmış EcmaScript 6+ Dersleri – 6: Template (Şablon) Kullanımı


Template, yani şablon kullanımı aslında bir metin dizisi içerisinde değişken kullanılabilmesine izin veren yapılardır. Şablon olarak anılması, tek bir metin dizisi içerisine çeşitli veri beslemeleri yapılarak farklı farklı sonuçlar elde edilebilmesini sağlaması özelliğini gösterir. Normal JavaScript’te aşağıdaki gibi değişkenleri ve metinleri birleştirebiliyorduk.

var yazar = "UĞUR GELİŞKEN";
var kitaplar = [ {isim: 'Web Tasarımı ve Web Programlama'}, { isim: 'İleri Seviye HTML5'} ];
var sablonMetin = yazar + "'e ait kitaplar; " + kitaplar[0].isim + " ve " + kitaplar[1].isim + "'dir.";
console.log(sablonMetin); 

Konsolda “UĞUR GELİŞKEN’e ait kitaplar; Web Tasarımı ve Web Programlama ve İleri Seviye HTML5’dir.” Olacak şekilde şablon yazdırılacaktır. Ancak bu birleştirme işlemi tam anlamıyla bir şablon değildir. Şimdi bunu EcmaScript 6 ile template yapısını kullanarak yapalım.

Bir template oluşturmak için ` ` (eğik tırnak) kullanılır. Normalde tek tırnak veya çift tırnak ile String oluşturabiliyorduk, ancak template için mutlaka eğik tırnak kullanılmalıdır. Eğik tırnağı yapabilmek için klavyeden AltGr ve , (virgül) tuşlarına basılmalıdır. Artık eğik tırnaklar içerisinde + operatörü ile değişkenleri birleştirmenize gerek kalmaz. Değişkenleri de eğik tırnak içerisinde kullanmak için ${degiskenAdi} yapısı kullanılır. Yani değişkenin ismi süslü parantezler içine alınır ve başında boşluk bırakılmadan $ işareti eklenir.

let yazar = "UĞUR GELİŞKEN";
let kitaplar = [ {isim: 'Web Tasarımı ve Web Programlama'}, { isim: 'İleri Seviye HTML5'} ];
let sablonMetin = `${yazar}'e ait kitaplar; ${kitaplar[0].isim} ve ${kitaplar[1].isim}'dir.`;
console.log(sablonMetin);

Konsolda yine aynı metin yazdırılacaktır.

Makale serimizin diğer konuları şunlar olacaktır:


Web Tasarımı ve Web Programlama 2020

Yorum bırak

Yorum