JavaScript String Metotları: slice, split, replaceAll ve Fazlası

Metinler değiştirilemez

MDN veri yapıları rehberi, JavaScript metinlerinin oluşturulduktan sonra değiştirilemeyeceğini belirtir. Köşeli parantezle bir karaktere erişebilirsiniz ama o konuma değer atamak işe yaramaz. Metin metotları sonucu yeni bir metin olarak döndürür; sonucu bir değişkene atamazsanız kaybolur.

let ad = "javascript";
ad[0] = "J"; // etkisi yok
console.log(ad); // javascript

ad.toUpperCase(); // sonuç atanmadı, kayboldu
console.log(ad); // javascript

ad = ad[0].toUpperCase() + ad.slice(1);
console.log(ad); // Javascript

slice ve substring: parça almak

İki metot da başlangıç indeksinden bitiş indeksine kadar (bitiş hariç) olan parçayı döndürür. Farkları sınır dışı ve negatif değerlerde ortaya çıkar. slice() negatif indeksi metnin sonundan saymaya başlar. substring() ise negatif değerleri ve NaN değerini 0 kabul eder; başlangıç bitişten büyükse iki argümanın yerini değiştirir.

const dosya = "rapor-2026.pdf";

console.log(dosya.slice(0, 5)); // rapor
console.log(dosya.slice(-3)); // pdf
console.log(dosya.slice(6, -4)); // 2026

console.log(dosya.substring(0, 5)); // rapor
console.log(dosya.substring(-3)); // rapor-2026.pdf  (negatif 0 sayılır)
console.log(dosya.substring(5, 0)); // rapor  (argümanlar yer değiştirir)
console.log(JSON.stringify(dosya.slice(5, 0))); // ""  (boş metin)

at: sondan saymak

at(index) verilen konumdaki karakteri döndürür ve negatif indeks kabul eder; -1 son karakter demektir. Konum yoksa undefined döner. Köşeli parantezle negatif indeks çalışmaz, çünkü str[-1] "-1" adlı bir özelliği arar.

const kod = "TR-34";
console.log(kod.at(-1)); // 4
console.log(kod[-1]); // undefined
console.log(kod.at(10)); // undefined

includes, startsWith, endsWith: aramak

Bu üç metot true veya false döndürür ve büyük-küçük harfe duyarlıdır. İkinci argümanla aramanın başlayacağı konumu verebilirsiniz. Argüman olarak düzenli ifade verirseniz TypeError alırsınız; regex ile arama için test() veya match() kullanılır. Konum (indeks) gerekiyorsa indexOf() bulamadığında -1 döndürür.

const url = "https://www.ornek.com.tr/blog";

console.log(url.startsWith("https://")); // true
console.log(url.endsWith(".tr")); // false
console.log(url.includes("BLOG")); // false
console.log(url.toLowerCase().includes("blog")); // true
console.log(url.indexOf("/blog")); // 24

try {
  url.includes(/blog/);
} catch (e) {
  console.log(e.name); // TypeError
}

split ve join: bölmek ve birleştirmek

split(ayirici, limit) metni ayırıcıdan bölüp bir dizi döndürür. Ayırıcı metnin başında veya sonundaysa sonuçta boş metin öğeleri oluşur. limit verilirse en fazla o kadar öğe alınır, gerisi atılır. Dizinin join() metodu tersini yapar. İkisinin arasında dizi metotları kullanılarak metin dönüştürmeleri yazılır:

const etiketler = " js, node ,  react ";
const temiz = etiketler.split(",").map((e) => e.trim());
console.log(temiz); // [ 'js', 'node', 'react' ]
console.log(temiz.join(" | ")); // js | node | react

console.log("a,b,c,d".split(",", 2)); // [ 'a', 'b' ]
console.log(",a,".split(",")); // [ '', 'a', '' ]

// Basit slug üretimi
const baslik = "Yeni Sürüm Notları";
console.log(baslik.toLocaleLowerCase("tr").split(" ").join("-")); // yeni-sürüm-notları

Ayırıcı olarak düzenli ifade de verilebilir; bu durumda değişken uzunluktaki ayırıcılar tek seferde işlenir. Örneğin "a1b22c".split(/\d+/) sonucu ["a", "b", "c"] olur. Regex içinde yakalama grubu (parantez) kullanırsanız eşleşen ayırıcılar da sonuç dizisine eklenir. Regex sözdizimi için regex başlangıç rehberine bakabilirsiniz.

split("") emojileri böler

Ayırıcı olarak boş metin verildiğinde metin UTF-16 kod birimlerine bölünür. Emoji gibi iki kod biriminden oluşan karakterler ikiye ayrılır. Spread sözdizimi ve for...of ise kod noktalarına (code point) göre gezer:

const s = "a😀";
console.log(s.length); // 3
console.log(s.split("").length); // 3
console.log([...s].length); // 2
console.log([...s]); // [ 'a', '😀' ]

padStart ve padEnd: doldurmak

padStart(hedefUzunluk, dolgu) metnin başını, padEnd() sonunu verilen karakterlerle hedef uzunluğa kadar doldurur. Dolgu belirtilmezse boşluk kullanılır. Metin zaten hedef uzunlukta ya da daha uzunsa olduğu gibi döner.

console.log("7".padStart(3, "0")); // 007
console.log(String(42).padStart(6, "*")); // ****42
console.log("uzun-metin".padStart(4, "0")); // uzun-metin

// Kart numarasını maskelemek
const kart = "4111111111111234";
console.log(kart.slice(-4).padStart(kart.length, "*")); // ************1234

replace ve replaceAll: değiştirmek

replace() metin argümanıyla yalnızca ilk eşleşmeyi değiştirir. replaceAll() bütün eşleşmeleri değiştirir. MDN, kullanıcıdan gelen bir metni değiştirirken onu regex'e çevirmek yerine doğrudan replaceAll() metoduna vermeyi önerir; böylece metindeki özel karakterler regex olarak yorumlanmaz. replaceAll() metoduna regex verirseniz g bayrağı zorunludur.

const sablon = "Sayın {ad}, {ad} adına sipariş oluşturuldu.";
console.log(sablon.replace("{ad}", "Ece"));
// Sayın Ece, {ad} adına sipariş oluşturuldu.
console.log(sablon.replaceAll("{ad}", "Ece"));
// Sayın Ece, Ece adına sipariş oluşturuldu.

console.log("1.250.000".replaceAll(".", "")); // 1250000

try {
  "a-b-c".replaceAll(/-/, "+");
} catch (e) {
  console.log(e.name); // TypeError
}
console.log("a-b-c".replaceAll(/-/g, "+")); // a+b+c

trim, trimStart, trimEnd: boşluk temizlemek

trim() metnin iki ucundaki boşluk karakterlerini ve satır sonlarını siler; trimStart() yalnızca başı, trimEnd() yalnızca sonu temizler. Metnin ortasındaki boşluklara dokunmazlar. Form girdilerini kaydetmeden önce kullanmak yaygın bir alışkanlıktır.

const giris = "   ornek@alan.com \n";
console.log(JSON.stringify(giris.trim())); // "ornek@alan.com"
console.log(JSON.stringify(giris.trimStart())); // "ornek@alan.com \n"

Türkçe metinler: büyük-küçük harf ve sıralama

toUpperCase() ve toLowerCase() dilden bağımsız eşleme kullanır. Türkçe gibi bazı dillerde büyük-küçük harf eşlemesi varsayılandan farklı olduğu için toLocaleUpperCase("tr") ve toLocaleLowerCase("tr") kullanmanız gerekir.

console.log("istanbul".toUpperCase()); // ISTANBUL
console.log("istanbul".toLocaleUpperCase("tr")); // İSTANBUL
console.log("IŞIK".toLocaleLowerCase("tr")); // ışık

Sıralamada da aynı sorun vardır. Dizinin varsayılan sort() davranışı UTF-16 kod birimi sırasıdır; bu yüzden "Çorum" gibi Türkçe karakterle başlayan kelimeler sona düşer. localeCompare() metodu dile duyarlı karşılaştırma yapar ve öncelik sırasına göre negatif, pozitif veya 0 döndürür:

const iller = ["Zonguldak", "Çorum", "Ankara", "Şırnak", "Sakarya"];

console.log(iller.toSorted());
// [ 'Ankara', 'Sakarya', 'Zonguldak', 'Çorum', 'Şırnak' ]

console.log(iller.toSorted((a, b) => a.localeCompare(b, "tr")));
// [ 'Ankara', 'Çorum', 'Sakarya', 'Şırnak', 'Zonguldak' ]

Benzer metotların karşılaştırması

Sık Sorulan Sorular

Bir metnin uzunluğu neden beklediğimden fazla?

length karakter değil, UTF-16 kod birimi sayar. Emojiler ve bazı özel karakterler iki kod biriminden oluştuğu için uzunluğa 2 ekler. Kod noktası sayısı için [...metin].length kullanabilirsiniz.

Büyük-küçük harfe duyarsız karşılaştırma nasıl yapılır?

İki metni de toLocaleLowerCase("tr") ile küçültüp === ile karşılaştırabilirsiniz. Alternatif olarak localeCompare() metoduna Intl.Collator seçeneklerinden sensitivity: "base" verilirse yalnızca temel harf farkı dikkate alınır:

console.log("istanbul".toLocaleUpperCase("tr") === "İSTANBUL"); // true
console.log("a".localeCompare("A", "tr", { sensitivity: "base" })); // 0

Metindeki tüm boşlukları nasıl silerim?

trim() yalnızca uçları temizler. Bütün boşluk karakterlerini silmek için metin.replaceAll(" ", "") düz boşluklar için yeterlidir; sekme ve satır sonu da dahil her türlü boşluk için \s sınıfını kullanan, g bayraklı bir regex gerekir. Ayrıntı regex rehberinde.

Sayıyı metne nasıl çeviririm?

String(sayi), sayi.toString() ya da template literal kullanılabilir. Dönüşüm kurallarının ayrıntısı tip dönüşümü yazısında, sayı biçimlendirme sayılar ve BigInt yazısında.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: JavaScript öğrenme rehberi · Regex başlangıç rehberi · Template literal · Dizi metotları · Tip dönüşümü