Odak modu
Template Literals Kullanımı
Template Literals (önceki adıyla Template Strings), kod okunabilirliği ve yazım kolaylığı sağlayan ES6 ile gelmiş bir string yazma şeklidir.
"Eski string"
`Bu bir yeni string örneğidir.`
String ifade yazarken, "
veya '
kullanırız. Template Literals ile JavaScript'te backtick (```) işareti kullanılmaya başlanmıştır.
Windows için → Alt Gr
+ ,
Mac için → option
+ ,
Yaparak bu işareti kullanabilirsiniz.
//Eski kullanım:
let eskiString = "En sevdiğim yemekler:\nİskender\nMantı"
//Yeni kullanım:
let yeniString = `En sevdiğim yemekler:
İskender
Mantı`
İnterpolasyon, metin içerisinde değişken kullanmak anlamına gelir. Normal dizeler içerisine ifadeler gömmek için kullanılır.
let ad= `Aycan`;
let soyad= `Yerdelen`;
//Eski kullanım
console.log("Benim adım "+ad+" "+ soyad);
//Yeni kullanım
console.log(`Benim adım ${ad} ${soyad}`);
→ Örnek:
let a = 99;
let b= 999;
console.log(`${a} çarpı ${b} eşittir ${a*b}`);
//Çıktı:
//99 çarpı 999 eşittir 98901
Aşağıda codepen ile deneyimleyebilirsiniz!
Çok satırlı dizeleri kolaylıkla kullanmak ve dizelerimize içerik eklemek için de Template Literal’den faydalanabiliriz.
//Değişkenlerimizi tanımlayalım
const ad =`Aycan`
const soyad =`Yerdelen`
const gozRengi =`Kahverengi`
const yas =21
→ Eski kullanım, Template Literals kullanmadan:
const kisi = "<p>"+ad+"</p>"+
"<p>"+soyad+"</p>"+
"<p>"+gozRengi+"</p>"+
"<p>"+yas+"</p>"
document.body.innerHTML = kisi;
Aşağıda codepen ile deneyimleyebilirsiniz!
→Yeni kullanım, Template Literals kullanarak:
const kisi = `
<p>${ad}</>
<p>${soyad}</>
<p>${gozRengi}</>
<p>${yas}</>
`;
document.body.innerHTML = kisi;
//Bu kullanım daha az karmaşık ve okunabilir.
Aşağıda codepen ile deneyimleyebilirsiniz!
Template Literals;
const kitap = {
ad: "Fırtına",
yazar: "Shakespeare",
tarih: 1610
}
const bookTable =
"<table border>"+
"<tbody>"+
"<tr>"+
"<td>"+"Kitap"+"</td>"+
"<td>"+kitap.ad+"</td>"+
"</tr>"+
"<tr>"+
"<td>"+"Yazar"+"</td>"+
"<td>"+kitap.yazar+"</td>"+
"</tr>"+
"<tr>"+
"<td>"+"Tarih"+"</td>"+
"<td>"+kitap.tarih+"</td>"+
"</tr>"+
" </tbody>"+
"</table>"
document.body.innerHTML = bookTable
Aşağıda codepen ile deneyimleyebilirsiniz!
Sektörde en çok aranan yazılım becerilerini kazan
Yapay zeka desteği, birebir mentörlük saatleri, canlı dersler ve senin için özel hazırlanmış içeriklerle eksiklerini tamamla, düzenli geri bildirimler al ve öğrenme sürecini en verimli hale getir.
Yunus Emre Kabakcı
Patika+ mezunuPatika+ Fullstack Web Development Bootcamp mezunumuz Yunus Emre,
3 ay içinde Katar’dan aldığı teklif ile, global bir şirket olan Pavo Group’da işe başladı!
“İçerik zenginliği, mentor desteği, ileriye dönük bir network sağlaması ve dünyada en çok tercih edilen frameworkler üzerinden bir eğitim veriyor olması Patika+’ı tercih etmemin temel sebepleri oldu!“
Yorum yapabilmek için derse kayıt olmalısın!