JavaScript Şablon Değişmezleri
Eş anlamlı:
- Şablon Değişmezleri
- Şablon Dizeleri
- Dize Şablonları
- Back-Tics Sözdizimi
Back-Tics Sözdizimi
Şablon Değişmezleri , bir dize tanımlamak için tırnak işaretleri ("") yerine geriye doğru işaretleri (``) kullanır:
Örnek
let text = `Hello World!`;
Dizelerin İçinden Alıntılar
Şablon değişmezleri ile , bir dize içinde hem tek hem de çift tırnak kullanabilirsiniz:
Örnek
let text = `He's often called "Johnny"`;
Çok Satırlı Dizeler
Şablon değişmezleri çok satırlı dizelere izin verir:
Örnek
let text =
`The quick
brown fox
jumps over
the lazy dog`;
İnterpolasyon
Şablon değişmezleri , değişkenleri ve ifadeleri dizelere eklemenin kolay bir yolunu sağlar.
Yönteme dize enterpolasyonu denir.
Sözdizimi:
${...}
Değişken Yer Değiştirmeler
Şablon değişmezleri , dizelerdeki değişkenlere izin verir:
Örnek
let firstName = "John";
let lastName = "Doe";
let text = `Welcome ${firstName}, ${lastName}!`;
Değişkenlerin gerçek değerlerle otomatik olarak değiştirilmesine dize enterpolasyonu denir .
İfade Değiştirme
Şablon değişmezleri , dizelerdeki ifadelere izin verir:
Örnek
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
İfadelerin gerçek değerlerle otomatik olarak değiştirilmesine dize enterpolasyonu denir .
HTML Şablonları
Örnek
let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ul>`;
Tarayıcı Desteği
Template Literals bir ES6 özelliğidir (JavaScript 2015).
Tüm modern tarayıcılarda desteklenir:
| Chrome | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
Template Literals Internet Explorer'da desteklenmez.
Tam Dizi Referansı
Tam bir String referansı için şuraya gidin:
JavaScript Dize Referansını tamamlayın .
Başvuru, tüm dize özelliklerinin ve yöntemlerinin açıklamalarını ve örneklerini içerir.