03.09. Template Literals

Template Literals (Şablon Hazırlıkları) tek ve çok satırlı string yaratmak için yeni bir sözdizimidir. Öncelikle tek satırlı string ile başlayalım. En büyük gelen yenilik metin için $ işareti başlayıp {…} arasına değişkenlerimizi ekleyebilmemizdir. ${…} ifadesini kullanabilmek için ” veya ‘ tırnak yerine karakterini kullanılmalıdır.





JavaScript

const musteri = { name: "Metin" }
const urun = { miktar: 7, uAdi: "Bar", fiyat: 42 }
const deg1 = 'ES6'
const cikti = `Merhaba ${deg1}`

console.log(musteri)
console.log(urun)
console.log(deg1)
console.log(cikti)




1
2
3
4
5
6
7
8
9

const musteri = { name: "Metin" }
const urun = { miktar: 7, uAdi: "Bar", fiyat: 42 }
const deg1 = 'ES6'
const cikti = `Merhaba ${deg1}`
 
console.log(musteri)
console.log(urun)
console.log(deg1)
console.log(cikti)








YAML

Object {name: "Metin"}
Object {miktar: 7, uAdi: "Bar", fiyat: 42}
ES6
Merhaba ES6




1
2
3
4

Object {name: "Metin"}
Object {miktar: 7, uAdi: "Bar", fiyat: 42}
ES6
Merhaba ES6






İlk iki satır klasik birer objedir. 4. satır ise deg1 değişkeni direkt metin içinde kullanılmıştır. Eğer ES5 ile aynı kodu yazsaydık 'Merhaba ' + deg1 şeklinde atama yapmak zorunda kalacaktık. Bu durum direkt metin içine + kullanmadan değişken eklememize olanak sağlıyor.
Diğer örnek çok satırlı bir kullanım üzerine olacak.



JavaScript

const cok_satir = `Merhaba ${musteri.name}
Çok satırlı bir örnek
Birim fiyatı ${urun.fiyat} olan ${urun.uAdi}'dan ${urun.miktar} adet alındı.
Toplam fiyat : ${urun.fiyat * urun.miktar}
İlk üç sayının toplamı :  ${1 + 2 + 3}`
console.log(cok_satir)




1
2
3
4
5
6

const cok_satir = `Merhaba ${musteri.name}
Çok satırlı bir örnek
Birim fiyatı ${urun.fiyat} olan ${urun.uAdi}'dan ${urun.miktar} adet alındı.
Toplam fiyat : ${urun.fiyat * urun.miktar}
İlk üç sayının toplamı :  ${1 + 2 + 3}`
console.log(cok_satir)








YAML

Merhaba Metin
Çok satırlı bir örnek
Birim fiyatı 42 olan Bar'dan 7 adet alındı.
Toplam fiyat : 294
İlk üç sayının toplamı :  6




1
2
3
4
5

Merhaba Metin
Çok satırlı bir örnek
Birim fiyatı 42 olan Bar'dan 7 adet alındı.
Toplam fiyat : 294
İlk üç sayının toplamı :  6

ES5'te alt satıra geçmek için \n kullanılırdı. ES6 ise karakterleri içindeki her enter işlemini direkt \n olarak algılanır. Bir objenin içindeki değerlere “objeİsmi.özellikİsmi” şeklinde ulaşabiliriz. Ayrıca, ${…} ifadesi içinde matematiksel işlemlerde yapabiliriz.