Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ES6

ECMAScript 6 Power Tutorial: Template Strings

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called ECMAScript 6 Power Tutorial.
ECMAScript 6 Power Tutorial: Class and Inheritance
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Turkish (Türkçe) translation by Emre Özdemir (you can also view the original English article)

ECMAScript 6 hakkında serimin 2.kısmına hoşgeldiniz. Yeni Microsoft Edge web standartlarından en favorim, Microsoft' ta yeni yarattığımız tarayıcı taraflı render motoru, ECMAScript 6 için genişletilmiş bir destek sunuyor. İşte bu sebeple, ECMAScript 6 ile büyük web uygulamaları yazarken yapabileceğiniz harika şeyleri anlatan bir seri yazdım.

İlk olarak anlatacaklarım, Class(Sınıf) ve Inheritance(Miras)' ı kapsıyor. Bu makalede, embed expression lar yaratma konusunda kişisel deneyimlerimi baz alarak, template string ler üzerine yoğunlaşacağım.

Satır dönme problemine getirilen çözüm

Babylon.js üzerinde çalışırken, C ile yazılmış gibi gözüken bir demet tekst parçası ile başa çıkmak zorunda kaldım.

Bir örneğini Github kaynağında bulabilirsiniz.

JavaScript' te uzun bir text parçası ile uğraşırken başa çıkılması gereken şey satır bitişleriydi. Kaç defa bu tarz birşey yazdınız?

200 den fazla satırla çalışmak zorunda kaldığınızda, bu gerçekten acı verici bir hal alabiliyor.

Neyse ki, ECMAScript 6 yeni bir template strings özelliği ile geliyor. Diğer faydalarının yanında, bir template string direk olarak çok satırlı stringleri destekliyor.

Çünkü tüm karakterler template string içinde bir anlam ifade ediyor ve boşluklar ekleyemiyorum.

Artık JavaScript geliştiricilerinin string tanımlamak için 3 adet seçeneği var.

  • “” vasıtası ile
  • ‘’ vasıtası ile
  • `` vasıtası ile(ayrıca bu ters tırnak yada aksan işareti olarak ta biliniyor)

Pek o zaman Template parçaları ne olacak? (+ işareti ile birbirinden ayrılan stringler)

Çoklu satır desteği sadece template string lerin özelliği değildir. Template string leri, değişkenlerin değerleri ile yer değiştirecek, yer tutucular olarak kullanabilirsiniz, C/C++ printf ile  yada C# ta string.Format ile yaptığınız gibi.

Bu kod aşağıdaki sonucu ortaya çıkarır:

Oldukça kullanışlı, değilmi?

ECMAScript 5 teki halini hatırlayın:

Etiketler ile ilerlemek

Template string lerin en son üzerinde durulacağı konu, etiketlerle dolu bir template string' in başına kendi fonksiyonunuzu ekleyebileceğiniz.

Buradaki fonksiyonun kullanım amacı, sabit cümle parçacıkları ile değişkenlerin değerlerini bir araya getirebilmektir.

Yukarıdaki örnekteki kelimeler ve değişkenler:

  • strings[0] = “You have “
  • values[0] = 3
  • strings[1] = “sepetindeki parçaların toplam değeri $”
  • values[1] = 100.5
  • strings[2] = “”

Gördüğünüz üzere, values dizisindeki her bir indisin yerini tutan values[n] sabit kelimeler ile çevrilmiş durumdadır. (strings[n] ve strings[n + 1]).

Bu size ortaya çıkacak sonucun kontrol edilmesine olanak tanır. Önceki örneğimde, template strings (şablon kelime parçalarının) temel kullanımlarını gerçekledim. Ama daha da ileriye giderek, sizin stringleriniz üzerinde ilgi çekici işler yapabiliriz.

Örnek olarak, burada bir blok string' in DOM' a enjekte edilmesinin deneneceği bir kod bulunuyor.

Tagged template strings ayrıca pek çok şeyde işinize yarayabilir, örneğin; güvenlik, lokalizasyon, domain bazlı dil ve benzerleri.

Raw Strings (Ham stringler)

Tag Functions (Etiket metodları) string sabitlere erişimde özel seçeneklere sahiptir. strings.raw kullanarak, string' in kaçırılmamış değerini elde edebilirsiniz. Örnek olarak, Bu durumda \n tek bir karakter olarak gözükmeyecek fakat aslında 2 parçadan oluşuyor: \ ve n

Bu işteki asıl kâr ise, stringlere giriş yapıldıkları şekilde erişebilmeye izin veriyor oluşu.

Bu kod aşağıdaki sonucu oluşturur.

Ayrıca String' in yeni metodunu da kullanabilirsiniz : String.raw(). Bu dahili metod, benim az önceki örnekte yaptığım işin aynısını yapar.

Sonuç olarak

Microsoft Edge ve Chrome (41+), Opera(28+) ve Firefox (35+) son versiyonları template stringleri destekler, ve ECMAScript 6 desteğinin tümünü buradan takip edebilirsiniz. Eğer ki modern web' i hedefliyorsanız, template string ler ile işleri yürütmemeniz için hiçbir sebep bulunmuyor.

Microsoft Edge ile gelmekte olarak yeni web standartlarını ve WebAudio gibi özeliklerini inceleyebileceğiniz listeye dev.modern.ie/platform/status adresinden ulaşabilirsiniz.

JavaScript' e biraz daha el atalım

Sizin için bir parça süpriz olacak ama Microsoft ücretsiz öğrenim kaynaklarına sahip, ve bizim misyonumuzda Microsoft Edge ile biraz faha fazlasını üretmek. Benimkilere bir göz atın:

Yada takımımızın öğretici serileri:

Ve biraz ücretsiz araç: Mac, Linux ve Windows için Visual Studio CommunityAzure Trial, ve cross-browser test araçları

Bu makale Microsoft' un web geliştirme teknolojileri serisinden bir parçadır. Microsoft Edge ve yeni EdgeHTML rendering engine' i sizlerle paylaşmaktan dolayı heyecan duyuyoruz. Mac, iOS, Android yada Windows cihazınızda uzak testler yapabilmek yada ücretsiz sanal makina elde etmek için @ http://dev.modern.ie/

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.