Odak modu

JavaScript

Template Literals Kullanımı

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.

Kullanım Şekli

"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çinAlt Gr + ,

Mac içinoption + ,

Yaparak bu işareti kullanabilirsiniz.

Sağladığı Faydalar

  • Çok Satırlı Dize Yazımı:
//Eski kullanım:
let eskiString = "En sevdiğim yemekler:\nİskender\nMantı"

//Yeni kullanım:
let yeniString = `En sevdiğim yemekler:
İskender
Mantı`
  • İnterpolasyon:

İ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!

  • HTML Şablonları

Ç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!

Kısaca

Template Literals;

  • Kod okunabilirliğini kolaylaştırır,
  • Stringler içerisinde değişken yazma kolaylığını sağlar,
  • Şablon etiketlerini daha az karmaşık hale getirir.

Alıştırma

  • Aşağıdaki kod satırlarını Template Strings yazımına göre düzenleyiniz.
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!


Kaynaklar

Background Pattern
Birlikte öğrenelim

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+ mezunu

Patika+ 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!“

Yorumlar

Yorum yapabilmek için derse kayıt olmalısın!