JS String İşlemleri: kesme, arama, değiştirme ve template literal örnekleri

Bu kılavuz, JavaScript'te metin (string) işleme için en sık kullanılan yöntemleri pratik örneklerle açıklar. Aşağıda kesme (substring, slice), arama (includes, indexOf, match), değiştirme (replace, replaceAll) ve template literal kullanımını bulacaksınız. Ana referans olarak MDN dokümanlarına bağlantılar verilmiştir.

Kesme: substring() vs slice()

substring(start[, end]) ve slice(start[, end]) benzer görünse de davranışları farklıdır:

  • substring: Negatif değerleri 0 olarak ele alır. Eğer start > end ise argümanları takas eder (swap).
  • slice: Negatif indeksleri son karaktere göre sayar (ör. -1 son karakter). Argümanları takas etmez; start > end ise boş string döner.

Daha fazla teknik detay için MDN String dokümanına bakabilirsiniz: https://developer.mozilla.org/pt-PT/docs/Web/JavaScript/Reference/Global_Objects/String (MDN).

Örnek:
const s = "Hello World";
// substring: argümanlar takas edilir
console.log(s.substring(6, 0)); // "Hello "
// slice: negatif indeks kullanımı
console.log(s.slice(-5)); // "World"
// slice ile aralık (start > end) boş döner
console.log(s.slice(8, 2)); // ""

Arama: includes(), indexOf(), match() ve kısa regex notları

Aşağıdaki fonksiyonlar yaygın arama ihtiyaçlarını karşılar:

  • includes(searchString[, position]) — boolean döner; aranan alt-string var mı?
  • indexOf(searchValue[, fromIndex]) — bulunan ilk konumu (sıfır tabanlı) döner; yoksa -1.
  • match(regex) — bir düzenli ifadeyi (regex) kullanarak eşleşmeleri döner; global (/g) kullanılırsa dizgi içindeki tüm eşleşmeleri alırsınız.
Örnek:
const s = "Hello World";
console.log(s.includes("World")); // true
console.log(s.indexOf("World")); // 6
console.log(s.match(/o/g)); // ["o", "o"]

Basit regex kullanımı: /pattern/flags şeklinde yazılır. Örneğin /a/i (büyük/küçük harf duyarsız), /\d+/ (bir veya daha fazla rakam) gibi. Regex'ler güçlüdür ama karmaşık hâle gelebilir; kısa referanslar için MDN rehberlerine bakın.

Değiştirme: replace() vs replaceAll()

replace(searchValue, replaceValue) ve replaceAll(searchValue, replaceValue) arasındaki önemli farklar:

Örnek:
const text = "foo Foo foo";
// replace ile ilk eşleşme
console.log(text.replace('foo', 'bar')); // "bar Foo foo"
// replaceAll ile tüm küçük "foo"'lar değişir
console.log(text.replaceAll('foo', 'bar')); // "bar Foo bar"
// regex ile tüm eşleşmeleri değiştirmek
console.log(text.replace(/foo/gi, 'bar')); // "bar bar bar"
// replaceAll ile regex kullanıyorsanız /g gerekli
console.log(text.replaceAll(/foo/gi, 'bar')); // "bar bar bar"

Not: replaceAll string olarak verilen değeri düzenli ifade gibi değerlendirmez; özel karakterler literal olarak ele alınır. Regex davranışı istiyorsanız regex kullanın ve /g bayrağını unutmayın.

Template literal'lar: geri-tırnak (`) ve interpolasyon

Template literal'lar (backtick ile yazılan `...`) değişken ve ifade gömme (interpolation) ile çok satırlı string oluşturmayı kolaylaştırır. Söz dizimi: ${expression}. MDN'de template literal'ların kapsamlı açıklaması bulunur: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals.

Örnek:
const name = 'Ada';
const greeting = `Merhaba ${name}! Bugün: ${new Date().toLocaleDateString()}`;
console.log(greeting);
// Çok satırlı string
const poem = `Birinci satır İkinci satır`;
console.log(poem);

Template literal'lar ayrıca tagged templates ile daha gelişmiş işler yapmak için kullanılabilir (ör. güvenli kaçış, biçimlendirme). Bu ileri bir konudur; temel kullanım için ${expression} yeterlidir.

Pratik ipuçları ve kontrol listesi

  • Negatif indeks gereksinimi varsa slice kullanın.
  • Sadece boolean kontrolü için includes daha okunaklıdır; index kontrolü gerekiyorsa indexOf kullanılabilir.
  • Tüm eşleşmeleri değiştirmek istiyorsanız replaceAll veya replace ile global bir regex (/pattern/g) kullanın.
  • Regex kullanırken özel karakterleri kaçırmanız gerektiğini unutmayın; aksi hâlde beklenmeyen eşleşmeler olur.
  • replaceAll ile regex kullanıyorsanız regex'in /g bayrağı olduğundan emin olun; aksi hâlde hata riski vardır. (MDN referansı ektedir.)
  • Tarayıcı/çalışma zamanı uyumluluğunu kontrol edin; yeni eklenen metodlar farklı ortamlarda farklı destek seviyelerine sahip olabilir.

Kısa görevler (quick tasks) — örnek çözümler

  1. Bir stringdeki fazla boşlukları tek boşluğa indirgeme:
    const text = "Bu bir örnek";
    const normalized = text.replace(/\s+/g, ' ').trim();
    console.log(normalized); // "Bu bir örnek"
  2. CSV'de nokta (.) yerine virgül (,) kullanılmış sayıları düzeltme:
    const csv = "3,14; 2,71";
    const fixed = csv.replace(/,/g, '.'); // basit örnek console.log(fixed); // "3.14; 2.71"
  3. İsim listesindeki her ismin baş harfini büyük yapmak:
    const names = ["ali", "ayşe"];
    const cap = names.map(n => `${n[0].toUpperCase()}${n.slice(1)}`);
    console.log(cap); // ["Ali", "Ayşe"]

Sınırlamalar ve dikkat edilmesi gerekenler

Bu makaledeki örnekler eğitim amaçlıdır; gerçek uygulamada farklı dillerdeki karakter kümeleri (Unicode), normalizasyon (NFC/NFD) ve performans konuları göz önünde bulundurulmalıdır. Ayrıca replaceAll ve bazı yeni özelliklerin ortam desteğini kontrol etmek iyi bir uygulamadır. Detaylı teknik referanslar için MDN sayfalarını inceleyin.

Kaynaklar

Sıkça sorulan sorular

  • replace() ile replaceAll() arasındaki en net fark nedir? — replace() string arandığında ilk eşleşmeyi değiştirir; replaceAll() tüm eşleşmeleri hedefler. Regex kullanıldığında replace ile /g bayrağı da tüm eşleşmeleri değiştirir. (MDN referansına bakın.)
  • substring() negatif değerleri nasıl işler? — substring() negatif değerleri 0 olarak ele alır; negatif indeks desteği için slice() tercih edilmelidir.
  • Template literal içinde hangi tür ifadeler kullanılabilir? — ${} içine herhangi bir geçerli JavaScript ifadesi gelebildiği için değişkenler, fonksiyon çağrıları veya ternary gibi ifadeler kullanılabilir.