JavaScript Şablon Değişmezleri (Şablon Dizeleri)

İçindekiler

Dizeler için Şablon Değişmezleri
Şablon Değişmezlerini Kullanan Çok Satırlı Dizeler
İfade Enterpolasyonu
Etiketli Şablonlar

Bu eğitimde, örnekler yardımıyla JavaScript Şablon Literatürü (Şablon Dizeleri) hakkında bilgi edineceksiniz.

Şablon değişmezleri (şablon dizeleri), dizeleri veya katıştırılmış ifadeleri bir dize biçiminde kullanmanıza olanak tanır. Ters işaretler içine alınırlar ``. Örneğin,

 const name = 'Jack'; console.log(`Hello $(name)!`); // Hello Jack!

Not : Şablon değişmezi 2015'te tanıtıldı (ECMAScript 6 veya ES6 veya ECMAScript 2015 olarak da bilinir). Bazı tarayıcılar şablon değişmezlerinin kullanımını desteklemeyebilir. Daha fazla bilgi edinmek için JavaScript Şablon Edebiyatı desteğini ziyaret edin.

Dizeler için Şablon Değişmezleri

JavaScript'in önceki sürümlerinde, dizeler için tek ''veya çift tırnak ""kullanırdınız. Örneğin,

 const str1 = 'This is a string'; // cannot use the same quotes const str2 = 'A "quote" inside a string'; // valid code const str3 = 'A 'quote' inside a string'; // Error const str4 = "Another 'quote' inside a string"; // valid code const str5 = "Another "quote" inside a string"; // Error

Dizede aynı alıntıları kullanmak için kaçış karakterini kullanabilirsiniz .

 // escape characters using const str3 = 'A \'quote\' inside a string'; // valid code const str5 = "Another "quote " inside a string"; // valid code

Kaçış karakterleri kullanmak yerine şablon değişmezlerini kullanabilirsiniz. Örneğin,

 const str1 = `This is a string`; const str2 = `This is a string with a 'quote' in it`; const str3 = `This is a string with a "double quote" in it`;

Gördüğünüz gibi, şablon değişmezleri yalnızca alıntıları eklemeyi kolaylaştırmakla kalmaz, aynı zamanda kodumuzun daha temiz görünmesini de sağlar.

Şablon Değişmezlerini Kullanan Çok Satırlı Dizeler

Şablon değişmez değerleri, çok satırlı dizeler yazmayı da kolaylaştırır. Örneğin,

Şablon değişmezlerini kullanarak,

 // using the + operator const message1 = 'This is a long message' + 'that spans across multiple lines' + 'in the code.' console.log(message1)

ile

 const message1 = `This is a long message that spans across multiple lines in the code.` console.log(message1)

Her iki programın da çıktısı aynı olacaktır.

 Bu, kodda birden çok satıra yayılan uzun bir mesajdır.

İfade Enterpolasyonu

JavaScript ES6'dan önce +, bir dizedeki değişkenleri ve ifadeleri birleştirmek için operatörü kullanırdınız. Örneğin,

 const name = 'Jack'; console.log('Hello ' + name); // Hello Jack

Şablon değişmez değerleri ile, değişkenleri ve ifadeleri bir dizeye eklemek biraz daha kolaydır. Bunun için $(… )sözdizimini kullanıyoruz.

 const name = 'Jack'; console.log(`Hello $(name)`); // template literals used with expressions const result = `The sum of 4 + 5 is $(4 + 5)`; console.log(result); console.log(`$(result < 10 ? 'Too low': 'Very high')`)

Çıktı

 Merhaba Jack 4 + 5'in toplamı 9 Çok yüksek

Şablon değişmezi içinde değişkenler ve ifadeler atama işlemi, enterpolasyon olarak bilinir.

Etiketli Şablonlar

Normalde, bağımsız değişkenleri iletmek için bir işlev kullanırsınız. Örneğin,

 function tagExample(strings) ( return strings; ) // passing argument const result = tagExample('Hello Jack'); console.log(result);

Bununla birlikte, şablon değişmezlerini kullanarak etiketli şablonlar (bir işlev gibi davranan) oluşturabilirsiniz. Şablon değişmez değerlerini bir işlevle ayrıştırmanıza izin veren etiketleri kullanırsınız.

Etiketli şablon bir fonksiyon tanımı gibi yazılır. Ancak, ()değişmezi çağırırken parantez geçmezsiniz. Örneğin,

 function tagExample(strings) ( return strings; ) // creating tagged template const result = tagExample`Hello Jack`; console.log(result);

Çıktı

 ("Merhaba Jack")

Bir etiket işlevinin ilk bağımsız değişkeni olarak bir dizi değerleri iletilir. Değerleri ve ifadeleri kalan bağımsız değişkenler olarak da iletebilirsiniz. Örneğin,

 const name = 'Jack'; const greet = true; function tagExample(strings, nameValue) ( let str0 = strings(0); // Hello let str1 = strings(1); // , How are you? if(greet) ( return `$(str0)$(nameValue)$(str1)`; ) ) // creating tagged literal // passing argument name const result = tagExample`Hello $(name), How are you?`; console.log(result);

Çıktı