JavaScript ile Metin İşlemleri: Split, Slice ve Şablon Literalleri

JS String İşlemleri

JavaScript ile Metin İşlemleri: Split, Slice ve Şablon Literalleri

JS String İşlemleri
4 dk okuma süresi
Bu makale, javascript başlangıç kodları kapsamında split(), slice() ve şablon literalleri (template literals) ile metinleri nasıl kolayca parçalayıp, kesip ve biçimlendirebileceğinizi örneklerle gösterir. Temel kullanım, pratik örnekler, regex ile basit ayırma ve kısa bir kontrol listesi içerir.
JavaScript ile Metin İşlemleri: Split, Slice ve Şablon Literalleri

Giriş

JavaScript'te metin (string) işlemleri günlük programlama görevlerinin büyük kısmını oluşturur: CSV satırlarını parçalayıp alanları almak, dosya uzantısını kesmek, kullanıcıya okunaklı mesajlar oluşturmak vb. Bu rehberde split(), slice() ve ES6 şablon literalleri (template literals) üzerine pratik örnekler ve kısa ipuçları bulacaksınız. Aşağıdaki örnekler hem tarayıcı hem de Node.js ortamında çalışır.

split() — Bir string'i diziye bölmek

split() metodu bir string'i belirlediğiniz ayırıcıya göre böler ve bir dizi (array) döndürür. Ayırıcı bir metin veya düzenli ifade (RegExp) olabilir; isteğe bağlı limit parametresi ile sonuç sayısını kısıtlayabilirsiniz. Detaylı kullanım için W3Schools sayfasına bakabilirsiniz: JavaScript String split() Method — W3Schools.

Temel örnekler

Basit boşluk ile ayırma:

const str = 'Merhaba dünya'; const parts = str.split(' '); // ['Merhaba', 'dünya']

Virgül ile ayırıp boşlukları temizleme (trim):

const csv = 'ali, ayşe, mehmet'; const names = csv.split(',').map(s => s.trim()); // ['ali','ayşe','mehmet']

Karakter karakter ayırma:

const chars = 'abc'.split(''); // ['a','b','c']

Regex ile basit örnek — bir veya daha fazla boşlukla ayırma:

const words = ' a b c '.split(/\s+/).filter(Boolean); // ['a','b','c']

İleri ipuçları

  • Ayırıcı RegExp içinde parantez (capturing group) kullanırsanız, yakalanan parçalar çıktı dizisine de eklenir. Bu davranış dokümantasyonda belirtilir ve bazı durumlarda işe yarar.
  • limit parametresi ile dönüş dizisinin uzunluğunu sınırlayabilirsiniz: 'a,b,c,d'.split(',', 2) => ['a','b'].
  • Boş elemanları atlamak için .filter(Boolean) kullanmak pratik bir yöntemdir.

slice() — Bir alt string/alt dizi almak

slice() metodu bir string'in belirli bir bölümünü kesip yeni bir string döndürür; orijinal string değişmez. İki parametre alır: start (dahil) ve end (hariç). Negatif indeksler sona göre sayılır. Daha fazla örnek ve tanım için: JavaScript String slice() Method — W3Schools.

Örnekler

Başlangıçtan belli bir uzunluğu almak:

const s = 'Merhaba dünya'; s.slice(0, 7); // 'Merhaba' (end index hariç)

Son 5 karakteri almak (negatif indeks):

const last = s.slice(-5); // 'dünya'

Dosya uzantısını almak (indexOf ile birlikte):

const file = 'rapor.pdf'; const ext = file.slice(file.lastIndexOf('.') + 1); // 'pdf'

Not: slice() hem string'lerde hem dizilerde (array) çalışır; string için geri dönen değer yeni bir string'tir çünkü string'ler JavaScript'te değiştirilemez.


Şablon Literalleri (Template Literals) — Daha okunaklı string oluşturma

ES6 ile gelen şablon literalleri, ters tırnak (backtick) içinde değişkenleri ve ifadeleri ${...} ile gömmenize olanak verir. Çok satırlı string oluşturmayı ve ifadeleri doğrudan yerleştirmeyi kolaylaştırır. (ES6/ES2015 desteği gerektirir.)

Örnekler

Basit interpolasyon:

const ad = 'Ahmet'; const mesaj = `Merhaba, ${ad}!`; // 'Merhaba, Ahmet!'

İfade kullanımı:

const total = `Toplam: ${price * qty} TL`;

Çok satırlı metin:

const html = `

${ad} hoş geldin

`;

Uyarı: Şablon literalleri okunurluğu artırır fakat kullanıcıdan gelen ham verileri doğrudan HTML içine eklemeden önce uygun şekilde kaçırmak veya güvenli API kullanmak iyi bir uygulamadır; aksi halde istenmeyen sonuçlar ortaya çıkabilir.


Pratik kombinasyon: CSV e‑maillerden alan çıkarmak ve biçimlendirmek

Aşağıdaki adımlar küçük bir uygulama örneğidir. Amaç: virgüllerle ayrılmış e‑posta listesinden alan adlarını alıp numaralandırmak.

  1. CSV'yi split(',') ile diziye çevirin.
  2. Her elemanı trim() ile temizleyin.
  3. Her e‑postadan indexOf('@') ile @ sonrası kısmı alın; bunu slice() ile kesin.
  4. Şablon literalleriyle okunaklı çıktı oluşturun.

Örnek kod (okunması amaçlı tek satır formatı):

const csv = '[email protected], [email protected], [email protected]'; const domains = csv.split(',').map(s => s.trim()).map(e => e.slice(e.indexOf('@') + 1)); const out = domains.map((d,i) => `${i+1}. ${d}`).join('\n'); console.log(out);


Hızlı ipuçları ve sık karşılaşılan durumlar

  • split('') ile karakter dizisine dönersiniz; bu, tek tek karakterleri işlemek için kullanışlıdır.
  • RegExp ile split yaparken yakalanan gruplar (capturing groups) sonuç dizisine eklenir — bu davranış bazen işe yarar, bazen de istenmeyen boş elemanlar oluşturabilir.
  • slice(-n) son n karakteri almak için pratik bir yoldur.
  • Metin parçalama sonrası gereksiz boşlukları kaldırmak için .map(s => s.trim()) yaygın kullanılan bir kombinasyondur.
  • Regex ile eşleştirme ve bölme güçlüdür ama desenin ne yaptığını bilmek önemlidir; basit bir /\s+/ örneği çoklu boşlukları tek boşluğa veya ayırıcıya dönüştürmede faydalıdır.

Kontrol listesi (Hızlı Bakış)

  • Ayırıcı olarak string mi yoksa RegExp mi kullanılacak?
  • Boş öğeler oluşuyorsa .filter(Boolean) ekle.
  • Negatif indeks kullanıyorsanız son karakterlere göre hesaplandığını unutmayın.
  • Şablon literallerinde kullanmadan önce kullanıcı girdilerini doğrulayın/kaçırın.
  • Tarayıcı/Node sürümünüzün ES6 desteği olduğundan emin olun (template literals için gereklidir).

Kaynaklar ve daha fazla okuma

Sınırlamalar ve tavsiyeler

Bu rehber temel ve pratik kullanım örneklerine odaklanır. Regex ile çok karmaşık ayrıştırmalar yapacaksanız daha kapsamlı testler ve gerekli durumda özel parser kullanımı düşünün. Ayrıca farklı JavaScript çalışma ortamlarında (eski tarayıcılar veya çok eski Node sürümleri) ES6 özellik desteğini kontrol edin.