JS string işlemleri: kesme, arama, değiştirme ve template literal örnekleri
JS String İşlemleri
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:
- replace: Eğer searchValue bir string ise yalnızca ilk eşleşmeyi değiştirir. Ancak searchValue bir regex ve içinde
/g(global) varsa tüm eşleşmeleri değiştirir. - replaceAll: Tüm eşleşmeleri hedefler. Eğer searchValue bir regex ise bu regex'in global (/g) bayrağına sahip olması gerekir; aksi halde hata fırlatabilir. (Ayrıntılar için MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll.)
Ö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
/gbayrağı 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
-
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" -
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" -
İ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.
Yorumlar