JavaScript String ve Template Literal Kullanımı

String Yazmanın Üç Yolu

JavaScript'te string tanımlamak için üç farklı sınırlayıcı var. İkisi birbirinin yerine kullanılabilir; üçüncüsü ise çok daha fazlasını yapar.

Tek tırnak ile çift tırnak tamamen aynı stringi üretir — birini seç ve ona sadık kal (modern projelerin çoğu tek tırnak kullanır ya da kararı bir formatter'a bırakır). Backtick ise bir template literal oluşturur ve işler tam burada ilginçleşir: hem değişken gömmeye hem de çok satırlı string yazmaya izin verir.

Arka planda üçü de aynı ilkel (primitive) string tipini üretir. Hangi sınırlayıcıyı seçtiğin tamamen sözdizimsel bir tercih.

Kaçış dizileri ve string içinde tırnak kullanımı

String'in içinde ters eğik çizgi (\) bir kaçış dizisi başlatır. En sık karşılaşacakların \n (yeni satır), \t (tab), \\ (ters eğik çizginin kendisi) ve açtığın tırnağın aynısını string içine gömmek için \" / \':

Tırnak işaretiyle boğuşmak yerine diğer tırnak tipine geçerek çoğu kaçış karakterinden kurtulabilirsiniz: 'She said "hi" and left.' hiç ters bölü istemez. Dogmatik olmaktansa pratik olun.

Template Literal: Backtick'in Süper Gücü

Template literal, normal string'lerin yapamadığı iki şeyi yapar. İlki, ${...} ile ifade gömme (interpolation):

${...} içine yazdığın her şey bir JavaScript ifadesidir; yani sadece değişken adıyla sınırlı değilsin. Aritmetik işlemler, fonksiyon çağrıları, ternary ifadeler, hatta iç içe template literal'lar — hepsi serbest:

İkincisi, template literal'lar \n kullanmadan birden fazla satıra yayılabilir:

Kaynaktaki satır sonları, string'in içinde de aynen satır sonu olarak kalır. Kısacık bir etiket dışında biraz uzunca bir metin yazıyorsanız, backtick kullanımı neredeyse her zaman doğru tercih olur.

String Birleştirme Yerine Interpolation

Template literal'lar hayatımıza girmeden önce, dinamik bir string oluşturmanın tek yolu + operatörüydü:

İkisi de aynı çıktıyı verir. Template literal, kurduğu cümle gibi okunur; + ile yaptığın sürümde ise tırnakları, boşlukları ve birleştirme operatörlerini tek tek takip etmek zorunda kalırsın. + operatörünü sadece mevcut bir string'e küçük bir parça eklerken kullan. Daha uzun ifadeler için backtick'lere yönel.

JavaScript String'leri Değiştirilemez (Immutable)

String'i değiştiriyormuş gibi görünen her metot, aslında yeni bir string döndürür:

Değişikliğin kalıcı olmasını istiyorsan sonucu bir yere atamak zorundasın. Yeni başlayanların en çok takıldığı nokta tam olarak burası: s.replace("a", "b") yazıp s'nin değişmesini bekliyorlar. Ama değişmiyor. JavaScript'te string'ler aynen sayılar gibi çalışır — değerin kendisi değiştirilemez, sadece değişkeni yeni bir değere yönlendirebilirsin.

Günlük hayatta kullanacağın javascript string metotları

String API'si oldukça geniş. Ama günlük işlerde elinin sürekli gideceği birkaç tanesi var:

Aklınızda bulundurmanız gereken birkaç önemli nokta:

• length bir method değil, bir property'dir — parantez kullanılmaz.
• replace'e düz bir string verdiğinizde yalnızca ilk eşleşmeyi değiştirir. Tüm eşleşmeleri değiştirmek için replaceAll kullanın ya da g bayraklı bir regex verin.
• slice(start, end) yarı açık bir aralık alır: end konumundaki karakter sonuca dahil edilmez.
• slice'a negatif indeks verirseniz sondan saymaya başlar: s.slice(-3) son üç karakteri döndürür.

Karakterlere Erişim ve Üzerinde Dönme

String'ler, salt okunur birer karakter dizisi gibi davranır. İndeksle erişebilir, üzerinde döngü kurabilirsiniz; ancak bir konuma atama yapamazsınız:

for...of kod noktaları (code point) üzerinde gezinir; bu sayede Unicode'un büyük kısmıyla sorunsuz çalışır. İndeksle erişim (s[i]) ise UTF-16 kod birimleri üzerinde döner ve emoji gibi BMP dışı karakterleri ortadan ikiye bölebilir. Sıradan metinlerde ikisi de iş görür; ama kullanıcıdan gelen verilerde for...of ya da [...s] tercih etmelisin.

Tagged Template Literal Nedir?

Sık kullanılmasa da bilmekte fayda olan bir biçim daha var: tagged template literal. Bu yapı, sabit string parçalarını ve aralarına gömülen değerleri ayrı argümanlar olarak bir fonksiyona iletir:

Tag fonksiyonu, sonuç string'in nasıl görüneceğine karar verir — HTML escape edebilir, güvenli SQL üretebilir, CSS derleyebilir ya da GraphQL parse edebilir. Bu kalıbı kendi yazdığınızdan çok styled-components, graphql-tag, lit-html gibi kütüphanelerde göreceksiniz. Ama özel bir string işleme ihtiyacı doğduğunda, tagged template literal bunun için elinizdeki en temiz araçtır.

Sık Yapılan Hatalar

İnsanların sık takıldığı birkaç nokta:

• Metot sonucunu değişkene atamayı unutmak. s.trim() tek başına hiçbir şey yapmaz.
• Sayı ile string'i + ile birleştirmek. "Age: " + 30 + 5 ifadesinin sonucu "Age: 35" değil, "Age: 305" olur. Template literal bu sorunu baştan çözer: `Age: ${30 + 5}`.
• == ile string karşılaştırmasını karıştırmak. Eşitlik konusunu ilerleyen bölümlerde detaylıca ele alacağız, ama şimdilik şunu bilin: "1" == 1 sonucu true, "1" === 1 ise false. === kullanmayı alışkanlık haline getirin.
• length değerini karakter sayısı sanmak. Emoji ve surrogate pair içeren karakterlerde "".length değeri 1 değil, 2'dir. Kullanıcının gördüğü karakter sayısına ihtiyacınız varsa [..."".length] ya da Array.from(s).length kullanın.

Sırada: Numbers ve BigInt

String JavaScript'teki ilkel (primitive) tiplerden sadece biri; bir diğeri de sayılar. Ve JavaScript'in sayı sisteminin kendine has tuhaflıkları var — hem tam sayılar hem ondalıklı sayılar için tek bir Number tipi, ve onun yetmediği yerlerde devreye giren BigInt. Bir sonraki sayfada bunları konuşacağız.