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

Javascript Sablon Degismezleri Sablon Dizeleri



ES6'ya eklenen yeni bir öğe, şablon değişmezidir. Çok satırlı dizeler oluşturma ve bir dizeye bir ifade ekleme yeteneği gibi birkaç önemli yeni özellik ekleyen JavaScript'te dizeler oluşturmak için yeni bir türdür. Bir geliştirici olarak, bu özelliklerin tümü, dizileri manipüle etme ve dinamik diziler oluşturmanıza izin verme yeteneklerinizi geliştirebilir.

Bu gönderi, şablon değişmezlerini ve bunların JavaScript'te nasıl kullanılacağını gösterecektir.







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

Şablon Değişmezleri ” yaygın olarak “olarak bilinir” Şablon Dizeleri ”. Onlar backtick ile çevrilidir ( ) karakter, dizelerdeki tırnak işaretleri ile karşılaştırıldığında. Yer tutucuları dolar işaretiyle gösterilir ' $ ” ve kaşlı ayraçlar {} beğenmek ' ${ifade} ” şablon değişmezlerinde kabul edilebilir. Bir ifade kullanmak istiyorsanız, onu “ ${ifade} ” kutusu backticks içinde.



Bir şablon değişmezi, standart bir JavaScript dizesinin geliştirilmiş bir sürümüdür. Değiştirmeler, bir şablon değişmezi ile sıradan bir dize arasında önemli bir ayrım yapar. Değişkenleri ve ifadeleri, ikameleri kullanarak bir dizgeye entegre edebilirsiniz. Bu değişkenler ve ifadeler, değerleri JavaScript motoru tarafından otomatik olarak değiştirilir.



Sözdizimi





Şablon değişmezlerini kullanarak tek bir dize bildirmek için aşağıdaki sözdizimini kullanın:

` dize metni `


Birden çok satır için verilen sözdizimini izleyin:



` dize metin satırı 1
dize metin satırı


Geri tepmelerin içine ifade eklemek isterseniz, aşağıdaki sözdizimi kullanılır:

` dize metni ${ifade} dize metni `


Belirtilen kavramı daha iyi anlamak için aşağıdaki örneklere göz atın.

Örnek 1: JavaScript Şablon Değişmezlerini Kullanarak Tek Satır Dize Bildirme

Genellikle bir dize oluşturmak için tek veya çift tırnak kullanmak gerekir, ancak şablon değişmezlerinde aşağıdaki gibi bir dize oluşturabilirsiniz:

konsol.log ( ` Linuxİpucu ` ) ;


Çıktı, tek veya çift tırnak yardımıyla basit oluşturma sokmasıyla aynı şekilde çalıştığını gösterir:

Örnek 2: JavaScript Şablon Değişmezlerini Kullanarak Çok Satırlı Dize Bildirme

Normalde, birden fazla satırı yazdırmak için birleştirme operatörünü (+) kullanırız ve yeni bir satır eklemek için (\n) kullanılabilir, bu genellikle kodu karmaşık hale getirebilir:

konsol.log ( 'LinuxHint'e hoş geldiniz. \n ' + 'Öğrenme becerileri için en iyi web sitesi.' ) ;


Şablon değişmezlerini kullanırken, backticks bloğundaki klavyeden enter tuşuna basarak yeni bir satır başlatabilirsiniz:

konsol.log ( ` LinuxHint'e hoş geldiniz.
en iyi web sitesi için öğrenme becerileri. ` ) ;


Çıktı

Örnek 3: İfade Değiştirmeleri olan Dize

Burada önce iki değişken oluşturacağız” x ' ve ' Y ” değerleri ile yirmi ' ve ' on beş ', sırasıyla:

var x = yirmi ;
var y = on beş ;


Ardından, bir değişken oluşturun ' toplam ” eklemek için x ' ve ' Y ”:

oldu toplam = x + y;


İki sayı eklemek ve bu sayıların toplamını konsolda görüntülemek istiyorsanız, normalde, dizeleri ve değişkenleri normal dize biçiminde birleştirmek gerekir; bu, dizelerle art arda tek veya çift tırnak kullanmak ve bunları birleştirmek için genellikle bir karmaşa yaratır. birbirleriyle ve ( + ):

konsol.log ( 'x toplamı' +x + ' ve ' + ve + ' dır-dir ' + toplam ) ;


Şablon değişmezlerini kullanırken, yalnızca değişkenleri olan dizeleri “ içinde bir ifade olarak belirtmeniz gerekir. ${} ” backtick bloğunda:

konsol.log ( ` x toplamı ${x} ve y ${y} dır-dir ${toplam} ` ) ;


Çıktı

Şablon değişmezleriyle ilgili tüm temel bilgileri topladık.

Çözüm

Şablon Değişmezleri ', Ayrıca şöyle bilinir ' Şablon Dizeleri ”, geri tepme ( ) karakter, dizelerdeki tırnak işaretleri ile karşılaştırıldığında. Birleştirme operatörünü kullanmadan tek satırlı ve çok satırlı dizelerin oluşturulmasına izin verir ve bir dizede bir ifade içerir. Bu gönderi, JavaScript'teki şablon değişmezlerini açıklanmış örneklerle tartıştı.