Focus mode
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!
Yazılım Kariyerinde İlerlemeni Hızlandıracak Eğitimler
Kendi kendine yazılım öğrenirken zorlanıyor, takıldığın noktalarda bir mentore mi ihtiyaç duyuyorsun? Patika+ programlarımız ile 4-8 aylık yoğun eğitim kamplarına katıl, proje tabanlı canlı dersler ve sana özel hazırlanmış eğitimlerle gereken tüm yetenekleri kazan, iş hayatına başla!
You need to enroll in the course to be able to comment!