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.