JavaScript String Metodları ve Kullanımları

JavaScript de string veri türleri ile kullanabildiğimiz birçok metod bulunuyor. Bugün aşağıdaki metodları tek tek uygulamalı olarak öğreneceğiz.

length Metodu
indexOf Metodu
lastIndexOf Metodu
search Metodu
toUpperCase Metodu
toLowerCase Metodu
trim Metodu
split Metodu
charAt Metodu
charCodeAt Metodu
concat Metodu
replace Metodu
slice Metodu
substring Metodu
substr Metodu

Şimdi sırasıyla JavaScript string metodlarını inceleyelim.

JavaScript String Metodları

1 – JavaScript length Metodunun Kullanımı

length metodu string bir değerin uzunluğunu döndürür. Örneğin;

<script>
var adi = "Mehsatek Blog Sitesi";
console.log(adi.length);
</script>

var adi = "Mehsatek Blog Sitesi";

console.log(adi.length);

</script>

Çıktısı : 20

“Mehsatek Blog Sitesi” boşluklar ile birlikte 20 karakterden oluştuğu için console ekranında 20 sonucunu görüyoruz.

2 – JavaScript indexOf Metodunun Kullanımı

indexOf metodu belirtilen string değerin index numarasını döndürür. Birinci karakterin index numarası 0’dır. Örneğin;

<script>
var adi = "Mehsatek Blog Sitesi";
console.log(adi.indexOf("Blog"));
</script>

var adi = "Mehsatek Blog Sitesi";

console.log(adi.indexOf("Blog"));

</script>

Çıktısı : 9

Blog değeri baştan 10. karakter de bulunuyor. 0’dan başlandığı için console ekranında 9 değerini görüyoruz.

3 – JavaScript lastIndexOf Metodunun Kullanımı

lastIndexOf metodu ise eğer belirtilen string değer birden fazla defa bulunuyorsa en sondakinin index numarasını döndürür. Birinci karakterin index numarası 0’dır. Örneğin;

<script>
var adi = "Mehsatek Blog Sitesi Blog";
console.log(adi.lastIndexOf("Blog"));
</script>

var adi = "Mehsatek Blog Sitesi Blog";

console.log(adi.lastIndexOf("Blog"));

</script>

Çıktısı : 21

“Blog” değeri 2 defa yazılmış olduğu için ikinci “Blog” yazısının bulunduğu index numarasını sonuç olarak console ekranında görüyoruz.

⇒ indexOf ve lastIndexOf metodları eğer verilen string değeri bulamazlarsa geriye -1 değerini döndürürler.

⇒ indexOf ve lastIndexOf metodları aramanın başlangıç konumu olarak ikinci bir parametreyi kabul eder. Örneğin;

<script>
var adi = "Mehsatek Blog Sitesi Blog Blog";
console.log(adi.indexOf("Blog",12));
</script>

var adi = "Mehsatek Blog Sitesi Blog Blog";

console.log(adi.indexOf("Blog",12));

</script>

Çıktısı : 21

Bu şekilde ikinci parametre olarak 12 değerini verdiğimizde indexOf metodu “Blog” değerini 12. indexten itibaren (12. index dahil) aramaya başlayacaktır.

4 – JavaScript search Metodunun Kullanımı

search metodu belirtilen string değerin index numarasını döndürür. Birinci karakterin index numarası 0’dır. Örneğin;

<script>
var adi = "Mehsatek Blog Sitesi";
console.log(adi.search("Blog"));
</script>

var adi = "Mehsatek Blog Sitesi";

console.log(adi.search("Blog"));

</script>

Çıktısı : 9

Blog değeri baştan 10. karakter de bulunuyor. 0’dan başlandığı için console ekranında 9 değerini görüyoruz.

⇒ indexOf ve search metodları aynı işe yarıyor. Aralarındaki fark, search metodu indexOf metodundaki gibi ikinci bir parametre alamıyor.

5 – JavaScript toUpperCase Metodunun Kullanımı

toUpperCase metodu verilen bir string değeri büyük harfe dönüştürür. Örneğin;

<script>
var adi = "Mehsatek Blog Sitesi"; 
console.log(adi.toUpperCase());
</script>

var adi = "Mehsatek Blog Sitesi";

console.log(adi.toUpperCase());

</script>

Çıktısı : MEHSATEK BLOG SITESI

6 – JavaScript toLowerCase Metodunun Kullanımı

toLowerCase metodu verilen bir string değeri küçük harfe dönüştürür. Örneğin;

<script>
var adi = "Mehsatek Blog Sitesi"; 
console.log(adi.toLowerCase());
</script>

var adi = "Mehsatek Blog Sitesi";

console.log(adi.toLowerCase());

</script>

Çıktısı : mehsatek blog sitesi

7 – JavaScript trim Metodunun Kullanımı

trim metodu bir string değerin başında ve sonunda bulunan boşluk karakterlerini kaldırır. Örneğin;

<script>
var adi = "             Mehsatek Blog Sitesi     "; 
console.log(adi.trim());
</script>

var adi = " Mehsatek Blog Sitesi ";

console.log(adi.trim());

</script>

Çıktısı : “Mehsatek Blog Sitesi”

8 – JavaScript split Metodunun Kullanımı

split metodu ile string bir değeri bir diziye dönüştürebiliriz. Örneğin;

<script>
var adi = "Mehsatek Blog Sitesi"; 
console.log(adi.split(" "));
</script>

var adi = "Mehsatek Blog Sitesi";

console.log(adi.split(" "));

</script>

Çıktısı : [“Mehsatek”, “Blog”, “Sitesi”]

Gördüğünüz gibi boşluk karakterlerinden (” “) ayırarak bir dizi haline dönüştürdük. Şimdi de virgül (,) karakterinden ayırarak bir örnek yapalım.

<script>
var adi = "Ali,Hasan,Mehmet,Osman"; 
console.log(adi.split(","));
</script>

var adi = "Ali,Hasan,Mehmet,Osman";

console.log(adi.split(","));

</script>

Çıktısı : [“Ali”, “Hasan”, “Mehmet”, “Osman”]

Yani split metodu ile istediğimiz karaktere göre ayırma işlemini gerçekleştirebiliriz.

9 – JavaScript charAt Metodunun Kullanımı

charAt metodu belirtilen index numarasında bulunan karakteri döndürür.

<script>
var adi = "Mehsatek Blog Sitesi"; 
console.log(adi.charAt(2));
</script>

var adi = "Mehsatek Blog Sitesi";

console.log(adi.charAt(2));

</script>

Çıktısı : h

10 – JavaScript charCodeAt Metodunun Kullanımı

charCodeAt metodu belirtilen index numarasında bulunan karakterin unicode bilgisini (UTF-16) döndürür.

<script>
var adi = "Mehsatek Blog Sitesi"; 
console.log(adi.charCodeAt(2));
</script>

var adi = "Mehsatek Blog Sitesi";

console.log(adi.charCodeAt(2));

</script>

Çıktısı : 104

11 – JavaScript concat Metodunun Kullanımı

concat metodu iki veya daha fazla string değeri birleştirir. Örneğin;

<script>
var adi = "Mehsatek"; 
console.log(adi.concat(" ","Blog"," ","Sitesi"));
</script>

var adi = "Mehsatek";

console.log(adi.concat(" ","Blog"," ","Sitesi"));

</script>

Çıktısı : Mehsatek Blog Sitesi

concat metodu yerine aslında + operatörünü de kullanabiliriz. Örneğin;

<script>
var text1 = "Merhaba" + " " + "Dünya!";
var text2 = "Merhaba".concat(" ", "Dünya!");
console.log(text1);
console.log(text2);
</script>

var text1 = "Merhaba" + " " + "Dünya!";

var text2 = "Merhaba".concat(" ", "Dünya!");

console.log(text1);

console.log(text2);

</script>

Çıktısı : Merhaba Dünya!

Console ekranına yazdırılacak iki sonuç da aynı olacaktır.

12 – JavaScript replace Metodunun Kullanımı

replace metodu, string bir değeri başka bir string değer ile değiştirmemizi sağlar. Örneğin;

<script>
var adi = "Mehsatek Blog Sitesi";
console.log(adi.replace("Mehsatek", "Web Tasarım"));
</script>

var adi = "Mehsatek Blog Sitesi";

console.log(adi.replace("Mehsatek", "Web Tasarım"));

</script>

Çıktısı : Web Tasarım Blog Sitesi

Varsayılan olarak replace metodu sadece ilk eşleşmenin yerini alır. Örneğin;

<script>
var adi = "Mehsatek Blog Sitesi Mehsatek";
console.log(adi.replace("Mehsatek", "Web Tasarım"));
</script>

var adi = "Mehsatek Blog Sitesi Mehsatek";

console.log(adi.replace("Mehsatek", "Web Tasarım"));

</script>

Çıktısı : Web Tasarım Blog Sitesi Mehsatek

Eğer tüm eşleşmelerin değiştirilmesini istiyorsanız şu şekilde yapabilirsiniz.

<script>
var adi = "Mehsatek Blog Sitesi Mehsatek";
console.log(adi.replace(/Mehsatek/g, "Web Tasarım"));
</script>

var adi = "Mehsatek Blog Sitesi Mehsatek";

console.log(adi.replace(/Mehsatek/g, "Web Tasarım"));

</script>

Çıktısı : Web Tasarım Blog Sitesi Web Tasarım

Varsayılan olarak replace metodu büyük/küçük harfe duyarlıdır. Büyük/küçük harfe duyarsız yapmak için şu şekilde kullanabilirsiniz.

<script>
var adi = "Mehsatek Blog Sitesi";
console.log(adi.replace(/MehSaTek/i, "Web Tasarım"));
</script>

var adi = "Mehsatek Blog Sitesi";

console.log(adi.replace(/MehSaTek/i, "Web Tasarım"));

</script>

Çıktısı : Web Tasarım Blog Sitesi

13 – JavaScript slice Metodunun Kullanımı

slice metodu ile string bir değerin bir kısmını ayıklayabiliriz. slice metodu 2 parametre alır:

slice(baslangic_indeksi, bitis_indeksi);

Başlangıç indeksi dahil iken bitiş indeksi dahil değildir. Örneğin;

<script>
var adi = "Mehsatek Blog Sitesi";
console.log(adi.slice(3,12));
</script>

var adi = "Mehsatek Blog Sitesi";

console.log(adi.slice(3,12));

</script>

Çıktısı : satek Blo

Eğer verilen parametreler negatif ise index konumu string değerin sonundan sayılır. Örneğin;

<script>
var adi = "Mehsatek Blog Sitesi";
console.log(adi.slice(-8,-2));
</script>

var adi = "Mehsatek Blog Sitesi";

console.log(adi.slice(-8,-2));

</script>

Çıktısı : g Site

Eğer ikinci parametre yazılmaz ise başlangıç indeksten başlar ve string değerin sonuna kadar ayıklar.

14 – JavaScript substring Metodunun Kullanımı

substring metodu ile string bir değerin bir kısmını ayıklayabiliriz. substring metodu 2 parametre alır:

substring(baslangic_indeksi, bitis_indeksi);

Başlangıç indeksi dahil iken bitiş indeksi dahil değildir. Örneğin;

<script>
var adi = "Mehsatek Blog Sitesi";
console.log(adi.substring(3,12));
</script>

var adi = "Mehsatek Blog Sitesi";

console.log(adi.substring(3,12));

</script>

Çıktısı : satek Blo

Eğer ikinci parametre yazılmaz ise başlangıç indeksten başlar ve string değerin sonuna kadar ayıklar.

slice metodu ile substring metodu arasındaki tek fark substring metodunun negatif parametre kabul etmemesidir.

15 – JavaScript substr Metodunun Kullanımı

substr metodu ile string bir değerin bir kısmını ayıklayabiliriz. substr metodu 2 parametre alır:

substr(baslangic_indeksi, ayiklanacak_parcanin_uzunlugu);

Örneğin;

<script>
var adi = "Mehsatek Blog Sitesi";
console.log(adi.substr(3,7));
</script>

var adi = "Mehsatek Blog Sitesi";

console.log(adi.substr(3,7));

</script>

Çıktısı : satek B

Eğer ikinci parametre yazılmaz ise başlangıç indeksten başlar ve string değerin sonuna kadar ayıklar.

Eğer ilk parametre negatif ise index konumu string değerin sonundan sayılır. Örneğin;

<script>
var adi = "Mehsatek Blog Sitesi"; 
console.log(adi.substr(-8,4));
</script>

var adi = "Mehsatek Blog Sitesi";

console.log(adi.substr(-8,4));

</script>

Çıktısı : g Si

JavaScript string metodları bu şekilde. Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılar da ilginizi çekebilir.

JavaScript Nesneler ve Nesne Tabanlı Programlama

Yeni bir yazımda görüşmek üzere.

Kaynaklar : www.w3schools.com

JavaScript String Metodları ve Kullanımları

JavaScript String Metodları

1 – JavaScript length Metodunun Kullanımı

2 – JavaScript indexOf Metodunun Kullanımı

3 – JavaScript lastIndexOf Metodunun Kullanımı

4 – JavaScript search Metodunun Kullanımı

5 – JavaScript toUpperCase Metodunun Kullanımı

6 – JavaScript toLowerCase Metodunun Kullanımı

7 – JavaScript trim Metodunun Kullanımı

8 – JavaScript split Metodunun Kullanımı

9 – JavaScript charAt Metodunun Kullanımı

10 – JavaScript charCodeAt Metodunun Kullanımı

11 – JavaScript concat Metodunun Kullanımı

12 – JavaScript replace Metodunun Kullanımı

13 – JavaScript slice Metodunun Kullanımı

14 – JavaScript substring Metodunun Kullanımı

15 – JavaScript substr Metodunun Kullanımı

Yazar Hakkında

Yorum Yazın

JavaScript String Metodları

1 – JavaScript length Metodunun Kullanımı

2 – JavaScript indexOf Metodunun Kullanımı

3 – JavaScript lastIndexOf Metodunun Kullanımı

4 – JavaScript search Metodunun Kullanımı

5 – JavaScript toUpperCase Metodunun Kullanımı

6 – JavaScript toLowerCase Metodunun Kullanımı

7 – JavaScript trim Metodunun Kullanımı

8 – JavaScript split Metodunun Kullanımı

9 – JavaScript charAt Metodunun Kullanımı

10 – JavaScript charCodeAt Metodunun Kullanımı

11 – JavaScript concat Metodunun Kullanımı

12 – JavaScript replace Metodunun Kullanımı

13 – JavaScript slice Metodunun Kullanımı

14 – JavaScript substring Metodunun Kullanımı

15 – JavaScript substr Metodunun Kullanımı

Benzer Yazılar

Yazar Hakkında

Yorum Yazın