Javascript'de String Nesnesi ~ Webkolog

Merhaba Webkolog Geliştiricileri!

Bugün JavaScript'in metinsel verilerle çalışmak için bize sunduğu en temel ve en çok kullandığımız yapılardan biri olan String Nesnesini mercek altına alacağız. Web sayfalarında metinleri göstermekten kullanıcı girdilerini işlemeye, veri manipülasyonundan arama fonksiyonlarına kadar her alanda string'lerle iç içeyiz. JavaScript'in String nesnesi ve barındırdığı hazır metotlar, bu işlemleri inanılmaz derecede kolaylaştırıyor. Hadi, kelimelerin gücünü keşfedelim!

String Nedir ve Neden Önemlidir?

JavaScript'te bir string (metin dizisi), sıfır veya daha fazla karakterden oluşan bir dizi veri tipidir. Metinleri temsil etmek için kullanılırız. String'ler değişmezdir (immutable), yani bir string oluşturulduktan sonra içeriği değiştirilemez; herhangi bir metotla yapılan değişiklikler yeni bir string oluşturulmasına neden olur.

String'ler, web geliştirmede neredeyse her alanda karşımıza çıkar:

Kullanıcı arayüzünde metin gösterme
Formlardan alınan verileri işleme
URL'leri manipüle etme
JSON verilerini ayrıştırma
Arama ve filtreleme işlemleri

String Oluşturma Yöntemleri

String oluşturmanın birkaç yolu vardır:

1. String Literali (Tavsiye Edilen)

Tek tırnak (' '), çift tırnak (" ") veya ters tırnak (backtick - ` `) kullanarak string oluşturabilirsiniz.


    let ad = "Ali";
    let soyad = 'Mantar';
    let tamIsim = `Benim adım ${ad} ${soyad}.`; // Template Literals (ES6+)

    console.log(tamIsim); // Benim adım Ali Mantar.

2. `new String()` Yapıcı Fonksiyonu (Genellikle Önerilmez)

Bu yöntemle oluşturulan string'ler bir String nesnesi döndürür, ilkel string değeri değil. Bu, bazı durumlarda beklenmedik davranışlara yol açabilir.


    let mesajObjesi = new String("Merhaba");
    console.log(typeof mesajObjesi); // object
    let mesajPrimitive = "Merhaba";
    console.log(typeof mesajPrimitive); // string

    // Genellikle String nesnesi kullanmak yerine primitive string'ler tercih edilir.

String Özellikleri

1. `length` Özelliği

Bir string'in uzunluğunu (içindeki karakter sayısını) döndürür.


    let cumle = "Webkolog çok faydalı!";
    console.log(cumle.length); // 20

Temel String Metotları

1. Karakterlere Erişme ve Kodları Alma

charAt(index): Belirtilen indeksteki karakteri döndürür.


            let harf = "Webkolog".charAt(0); // W
            console.log(harf);

charCodeAt(index): Belirtilen indeksteki karakterin Unicode değerini döndürür.


            let unicodeDeger = "Ali".charCodeAt(1); // 'l' karakterinin Unicode değeri (108)
            console.log(unicodeDeger);

String.fromCharCode(code1, code2, ...): Verilen Unicode değerlerinden bir string oluşturur. Bu bir String nesne metodudur, bireysel string örneği metodu değildir.
```
            let olusturulanMetin = String.fromCharCode(65, 108, 105); // Ali
            console.log(olusturulanMetin);
        
```

2. String Birleştirme

concat(string1, string2, ...): Bir veya daha fazla string'i mevcut string'e ekleyerek yeni bir string döndürür. Genellikle + operatörü tercih edilir.


            let ad = "Ali";
            let soyad = "Mantar";
            let site = "(Webkolog)";
            let tamAd = ad.concat(" ", soyad, " ", site); // Ali Mantar (Webkolog)
            console.log(tamAd);

3. String İçinde Arama ve Konum Bulma

indexOf(searchValue, fromIndex): Bir string'in içinde belirli bir değerin ilk geçtiği indeksini döndürür. Bulamazsa -1 döndürür.


            let metin = "JavaScript öğreniyorum.";
            console.log(metin.indexOf("Script"));  // 4
            console.log(metin.indexOf("kod"));     // -1

lastIndexOf(searchValue, fromIndex): Bir string'in içinde belirli bir değerin son geçtiği indeksini döndürür. Bulamazsa -1 döndürür.
```
            let metin = "elma armut elma muz";
            console.log(metin.lastIndexOf("elma")); // 11
        
```
search(regexp): Bir string'deki belirli bir değeri (düzenli ifade ile de) arar ve eşleşmenin başlangıç indeksini döndürür. Bulamazsa -1 döndürür. indexOf'tan farkı regex alabilmesidir.
```
            let metin = "Ali ve Veli geldi.";
            console.log(metin.search(/Veli/)); // 7
            console.log(metin.search("Deli")); // -1
        
```

match(regexp): Bir string'i düzenli bir ifadeye göre eşleştirir ve eşleşmeleri içeren bir dizi döndürür.


            let metin = "Merhaba Dünya, JavaScript harika!";
            let eslesmeler = metin.match(/[A-Z]/g); // Tüm büyük harfleri bul
            console.log(eslesmeler); // ["M", "D", "J", "S"]

4. String Bölme ve Kesme

slice(startIndex, endIndex): Bir string'in belirli bir bölümünü yeni bir string olarak döndürür. endIndex dahil değildir. Negatif indeksler, string'in sonundan itibaren sayar.


            let metin = "Webkolog Dersleri";
            console.log(metin.slice(0, 7));  // Webkolo
            console.log(metin.slice(8));    // Dersleri (8. indeksten sona kadar)
            console.log(metin.slice(-8));   // Dersleri (Sondan 8. karakterden sona kadar)

substring(startIndex, endIndex): slice()'a benzer, ancak negatif indeksleri sıfır olarak kabul eder.


            let metin = "Merhaba Dünya";
            console.log(metin.substring(0, 7)); // Merhaba
            console.log(metin.substring(7, 0)); // Merhaba (startIndex ve endIndex yer değiştirebilir)

substr(startIndex, length): Belirtilen başlangıç indeksinden itibaren belirli bir uzunluktaki karakterleri döndürür.


            let metin = "Dokuz at bir kazığa bağlanmaz.";
            console.log(metin.substr(6, 2));  // at
            console.log(metin.substr(-4, 2)); // ma (Sondan 4. karakterden itibaren 2 karakter)
            console.log(metin.substr(1));    // okuz at bir kazığa bağlanmaz.

split(separator, limit): Bir string'i belirtilen ayırıcıya göre bölerek bir diziye dönüştürür. İkinci parametre (limit) döndürülecek dizi elemanı sayısını sınırlar.


            let meyveler = "elma,armut,çilek";
            let dizi = meyveler.split(",");
            console.log(dizi); // ["elma", "armut", "çilek"]

            let cumle = "Merhaba dünya nasılsın?";
            let kelimeler = cumle.split(" ", 2);
            console.log(kelimeler); // ["Merhaba", "dünya"]

5. String Değiştirme

replace(searchValue, replaceValue): Bir string'deki belirli bir değeri (veya regex eşleşmesini) başka bir değerle değiştirerek yeni bir string döndürür. Sadece ilk eşleşmeyi değiştirir, tüm eşleşmeleri değiştirmek için regex ile /g (global) bayrağını kullanmalısınız.


            let metin = "Kedi koştu, kedi uyudu.";
            console.log(metin.replace("kedi", "köpek"));  // Köpek koştu, kedi uyudu. (Sadece ilkini değiştirir)
            console.log(metin.replace(/kedi/g, "köpek")); // Köpek koştu, köpek uyudu. (Tümünü değiştirir)

            // Birden fazla kelimeyi değiştirmek (Regex ile)
            let yazi = "Ali ve Veli buradaydı.";
            console.log(yazi.replace(/Ali|Veli/g, 'Deli')); // Deli ve Deli buradaydı.

6. Büyük/Küçük Harf Dönüşümü

toLowerCase(): Bir string'in tüm karakterlerini küçük harfe dönüştürür.


            console.log("HELLO WEBkolog".toLowerCase()); // hello webkolog

toUpperCase(): Bir string'in tüm karakterlerini büyük harfe dönüştürür.


            console.log("hello Webkolog".toUpperCase()); // HELLO WEBKOLOG

7. Boşlukları Kırpma

trim(): Bir string'in başındaki ve sonundaki boşluk karakterlerini kaldırır.


            let mesaj = "   Merhaba Dünya!   ";
            console.log(mesaj.trim()); // "Merhaba Dünya!"

ES6 (ECMAScript 2015) ile Gelen Yenilikler

1. String Arama Metotları (Daha Okunabilir)

indexOf'a alternatif olarak, bir string'in başka bir string'i içerip içermediğini veya belirli bir konumda başlayıp başlamadığını kontrol etmek için daha modern metotlar geldi:

startsWith(searchString, position): Bir string'in belirtilen bir string ile başlayıp başlamadığını kontrol eder.


            console.log("Webkolog".startsWith("Web"));   // true
            console.log("Webkolog".startsWith("kolog", 3)); // true (3. indeksten itibaren kontrol)

endsWith(searchString, length): Bir string'in belirtilen bir string ile bitip bitmediğini kontrol eder. İkinci parametre, string'in hangi uzunluğa kadar kontrol edileceğini belirtir.


            console.log("Webkolog".endsWith("log"));   // true
            console.log("Webkolog".endsWith("Webk", 4)); // true (String'in ilk 4 karakteri "Webk" ile mi bitiyor?)

includes(searchString, position): Bir string'in içinde belirli bir string'in bulunup bulunmadığını kontrol eder.


            console.log("Webkolog".includes("kolo"));  // true
            console.log("Webkolog".includes("ebk", 1)); // true (1. indeksten itibaren "ebk" var mı?)
            console.log("Webkolog".includes("ebk", 2)); // false (2. indeksten itibaren "ebk" yok)

2. `repeat(count)` Metodu

Bir string'i belirtilen sayıda tekrar ederek yeni bir string döndürür.


    console.log("Ali".repeat(3)); // AliAliAli
    console.log("*-".repeat(5));  // *-*-*-*-*-

3. Template Literals (Ters Tırnaklar - ` `)

Daha önce de bahsettiğim gibi, ES6 ile gelen template literals, çok satırlı string'ler yazmayı ve değişkenleri kolayca string içine gömmeyi (string interpolation) sağlar.


    let urunAdi = "Klavye";
    let fiyat = 250;
    let mesaj = `Ürün Adı: ${urunAdi}
    Fiyat: ${fiyat} TL.
    Stoklarımızda mevcuttur.`;

    console.log(mesaj);
    /* Çıktı:
    Ürün Adı: Klavye
    Fiyat: 250 TL.
    Stoklarımızda mevcuttur.
    */

Eski ve Daha Az Kullanılan HTML Biçimlendirme Metotları

JavaScript'in String nesnesinde, metinleri HTML etiketleriyle sarmak için bazı eski metotlar da bulunur. Ancak bunlar genellikle modern web geliştirmede doğrudan kullanılmaz; CSS veya DOM manipülasyonu tercih edilir.

anchor("name"): <a name="..."> etiketi oluşturur.
big(), small(), bold(), italics(), strike(), sub(), sup(): İlgili HTML etiketlerini (<big>, , , , <strike>, , ) oluşturur.
fontcolor("color"), fontsize(size): HTML  etiketini oluşturur.
link("url"): <a href="..."> etiketi oluşturur.
blink(), fixed(): Çoğu tarayıcıda desteklenmeyen veya görsel olarak iyi durmayan HTML etiketlerini oluşturur.


    let isim = "Webkolog";
    console.log(isim.link("https://www.webkolog.net")); // <a href="https://www.webkolog.net">Webkolog</a>
    console.log(isim.bold()); // <b>Webkolog</b>

Bu metotlar genellikle doğrudan kullanılmaz, ancak var olduklarını bilmek faydalı olabilir.

Sonuç

JavaScript'teki String nesnesi, metinsel verilerle çalışırken size inanılmaz bir esneklik ve güç sunar. Karakterlere erişmekten, metinleri birleştirmeye, arama yapmaktan, bölmeye veya biçimlendirmeye kadar birçok işlemi kolayca yapabilirsiniz. Özellikle ES6 ile gelen startsWith, endsWith, includes ve template literals gibi yenilikler, string manipülasyonunu daha da keyifli ve okunabilir hale getirmiştir.

Kendi projelerinizde string metotlarını aktif olarak kullanın ve her birinin ne işe yaradığını deneyimleyerek öğrenin. Metinlerle ne kadar rahat çalışırsanız, web geliştirme serüveniniz de o kadar akıcı olacaktır!

Webkolog'u takipte kalın!

Hepinize bol kodlu ve başarılı projeler dilerim!

31 Mayıs 2016 Salı