[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-js-string-islemleri-kesme-arama-degistirme-ve-template-literal-ornekleri":3},{"dataItem":4,"heading":36,"metaData":38,"schema":81},["Reactive",5],{"id":6,"title":7,"summary":8,"content":9,"seo_title":10,"seo_description":11,"seo_keywords":12,"slug":13,"createdAt":14,"updatedAt":14,"blog_categories":15,"authors":19,"image":24,"thumb":25,"image_webp":26,"thumb_webp":27,"rating":28,"heading_title":7,"heading_sub_title":17,"readingTime":29,"url":34,"comments":35,"meta_cover":24},23808,"JS string işlemleri: kesme, arama, değiştirme ve template literal örnekleri","Bu yazıda JavaScript'te string kesme (substring, slice), arama (includes, indexOf, match), değiştirme (replace, replaceAll) ve template literal kullanımını örneklerle açıklıyorum. Ayrıca kısa regex notları ve pratik ipuçları bulunuyor.","\u003Ch2>JS String İşlemleri: kesme, arama, değiştirme ve template literal örnekleri\u003C/h2>\n\u003Cp>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 \u003Cstrong>kesme\u003C/strong> (substring, slice), \u003Cstrong>arama\u003C/strong> (includes, indexOf, match), \u003Cstrong>değiştirme\u003C/strong> (replace, replaceAll) ve \u003Cstrong>template literal\u003C/strong> kullanımını bulacaksınız. Ana referans olarak MDN dokümanlarına bağlantılar verilmiştir.\u003C/p>\n\n\u003Ch3>Kesme: substring() vs slice()\u003C/h3>\n\u003Cp>\u003Cstrong>substring(start[, end])\u003C/strong> ve \u003Cstrong>slice(start[, end])\u003C/strong> benzer görünse de davranışları farklıdır:\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Cstrong>substring\u003C/strong>: Negatif değerleri 0 olarak ele alır. Eğer \u003Cem>start\u003C/em> > \u003Cem>end\u003C/em> ise argümanları takas eder (swap).\u003C/li>\n  \u003Cli>\u003Cstrong>slice\u003C/strong>: Negatif indeksleri son karaktere göre sayar (ör. -1 son karakter). Argümanları takas etmez; start > end ise boş string döner.\u003C/li>\n\u003C/ul>\n\u003Cp>Daha fazla teknik detay için MDN String dokümanına bakabilirsiniz: \u003Ca href=\"https://developer.mozilla.org/pt-PT/docs/Web/JavaScript/Reference/Global_Objects/String\">https://developer.mozilla.org/pt-PT/docs/Web/JavaScript/Reference/Global_Objects/String\u003C/a> (MDN).\u003C/p>\n\n\u003Cblockquote>\n\u003Cstrong>Örnek:\u003C/strong>\u003Cbr>\nconst s = \"Hello World\";\u003Cbr>\n// substring: argümanlar takas edilir\u003Cbr>\nconsole.log(s.substring(6, 0)); // \"Hello \"\u003Cbr>\n// slice: negatif indeks kullanımı\u003Cbr>\nconsole.log(s.slice(-5)); // \"World\"\u003Cbr>\n// slice ile aralık (start > end) boş döner\u003Cbr>\nconsole.log(s.slice(8, 2)); // \"\"\n\u003C/blockquote>\n\n\u003Ch3>Arama: includes(), indexOf(), match() ve kısa regex notları\u003C/h3>\n\u003Cp>Aşağıdaki fonksiyonlar yaygın arama ihtiyaçlarını karşılar:\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Cstrong>includes(searchString[, position])\u003C/strong> — boolean döner; aranan alt-string var mı?\u003C/li>\n  \u003Cli>\u003Cstrong>indexOf(searchValue[, fromIndex])\u003C/strong> — bulunan ilk konumu (sıfır tabanlı) döner; yoksa -1.\u003C/li>\n  \u003Cli>\u003Cstrong>match(regex)\u003C/strong> — 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.\u003C/li>\n\u003C/ul>\n\n\u003Cblockquote>\n\u003Cstrong>Örnek:\u003C/strong>\u003Cbr>\nconst s = \"Hello World\";\u003Cbr>\nconsole.log(s.includes(\"World\")); // true\u003Cbr>\nconsole.log(s.indexOf(\"World\")); // 6\u003Cbr>\nconsole.log(s.match(/o/g)); // [\"o\", \"o\"]\n\u003C/blockquote>\n\n\u003Cp>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.\u003C/p>\n\n\u003Ch3>Değiştirme: replace() vs replaceAll()\u003C/h3>\n\u003Cp>\u003Cstrong>replace(searchValue, replaceValue)\u003C/strong> ve \u003Cstrong>replaceAll(searchValue, replaceValue)\u003C/strong> arasındaki önemli farklar:\u003C/p>\n\u003Cul>\n  \u003Cli>\u003Cstrong>replace\u003C/strong>: Eğer \u003Cem>searchValue\u003C/em> bir string ise yalnızca ilk eşleşmeyi değiştirir. Ancak \u003Cem>searchValue\u003C/em> bir regex ve içinde \u003Ccode>/g\u003C/code> (global) varsa tüm eşleşmeleri değiştirir.\u003C/li>\n  \u003Cli>\u003Cstrong>replaceAll\u003C/strong>: Tüm eşleşmeleri hedefler. Eğer \u003Cem>searchValue\u003C/em> bir regex ise bu regex'in \u003Cstrong>global\u003C/strong> (/g) bayrağına sahip olması gerekir; aksi halde hata fırlatabilir. (Ayrıntılar için MDN: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll\">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll\u003C/a>.)\u003C/li>\n\u003C/ul>\n\n\u003Cblockquote>\n\u003Cstrong>Örnek:\u003C/strong>\u003Cbr>\nconst text = \"foo Foo foo\";\u003Cbr>\n// replace ile ilk eşleşme\u003Cbr>\nconsole.log(text.replace('foo', 'bar')); // \"bar Foo foo\"\u003Cbr>\n// replaceAll ile tüm küçük \"foo\"'lar değişir\u003Cbr>\nconsole.log(text.replaceAll('foo', 'bar')); // \"bar Foo bar\"\u003Cbr>\n// regex ile tüm eşleşmeleri değiştirmek\u003Cbr>\nconsole.log(text.replace(/foo/gi, 'bar')); // \"bar bar bar\"\u003Cbr>\n// replaceAll ile regex kullanıyorsanız /g gerekli\u003Cbr>\nconsole.log(text.replaceAll(/foo/gi, 'bar')); // \"bar bar bar\"\n\u003C/blockquote>\n\n\u003Cp>Not: \u003Cstrong>replaceAll\u003C/strong> 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 \u003Ccode>/g\u003C/code> bayrağını unutmayın.\u003C/p>\n\n\u003Ch3>Template literal'lar: geri-tırnak (`) ve interpolasyon\u003C/h3>\n\u003Cp>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: \u003Ccode>${expression}\u003C/code>. MDN'de template literal'ların kapsamlı açıklaması bulunur: \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals?retiredLocale=vi\">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals\u003C/a>.\u003C/p>\n\n\u003Cblockquote>\n\u003Cstrong>Örnek:\u003C/strong>\u003Cbr>\nconst name = 'Ada';\u003Cbr>\nconst greeting = `Merhaba ${name}! Bugün: ${new Date().toLocaleDateString()}`;\u003Cbr>\nconsole.log(greeting);\u003Cbr>\n// Çok satırlı string\u003Cbr>\nconst poem = `Birinci satır\nİkinci satır`;\u003Cbr>\nconsole.log(poem);\n\u003C/blockquote>\n\n\u003Cp>Template literal'lar ayrıca \u003Cem>tagged templates\u003C/em> 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.\u003C/p>\n\n\u003Chr>\n\n\u003Ch3>Pratik ipuçları ve kontrol listesi\u003C/h3>\n\u003Cul>\n  \u003Cli>Negatif indeks gereksinimi varsa \u003Cstrong>slice\u003C/strong> kullanın.\u003C/li>\n  \u003Cli>Sadece boolean kontrolü için \u003Cstrong>includes\u003C/strong> daha okunaklıdır; index kontrolü gerekiyorsa \u003Cstrong>indexOf\u003C/strong> kullanılabilir.\u003C/li>\n  \u003Cli>Tüm eşleşmeleri değiştirmek istiyorsanız \u003Cstrong>replaceAll\u003C/strong> veya \u003Cstrong>replace\u003C/strong> ile global bir regex (/\u003Cem>pattern\u003C/em>/g) kullanın.\u003C/li>\n  \u003Cli>Regex kullanırken özel karakterleri kaçırmanız gerektiğini unutmayın; aksi hâlde beklenmeyen eşleşmeler olur.\u003C/li>\n  \u003Cli>\u003Cstrong>replaceAll\u003C/strong> ile regex kullanıyorsanız regex'in \u003Ccode>/g\u003C/code> bayrağı olduğundan emin olun; aksi hâlde hata riski vardır. (MDN referansı ektedir.)\u003C/li>\n  \u003Cli>Tarayıcı/çalışma zamanı uyumluluğunu kontrol edin; yeni eklenen metodlar farklı ortamlarda farklı destek seviyelerine sahip olabilir.\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Kısa görevler (quick tasks) — örnek çözümler\u003C/h3>\n\u003Col>\n  \u003Cli>\n    \u003Cstrong>Bir stringdeki fazla boşlukları tek boşluğa indirgeme:\u003C/strong>\n    \u003Cblockquote>\n    const text = \"Bu   bir   örnek\";\u003Cbr>\n    const normalized = text.replace(/\\s+/g, ' ').trim();\u003Cbr>\n    console.log(normalized); // \"Bu bir örnek\"\n    \u003C/blockquote>\n  \u003C/li>\n  \u003Cli>\n    \u003Cstrong>CSV'de nokta (.) yerine virgül (,) kullanılmış sayıları düzeltme:\u003C/strong>\n    \u003Cblockquote>\n    const csv = \"3,14; 2,71\";\u003Cbr>\n    const fixed = csv.replace(/,/g, '.'); // basit örnek\n    console.log(fixed); // \"3.14; 2.71\"\n    \u003C/blockquote>\n  \u003C/li>\n  \u003Cli>\n    \u003Cstrong>İsim listesindeki her ismin baş harfini büyük yapmak:\u003C/strong>\n    \u003Cblockquote>\n    const names = [\"ali\", \"ayşe\"];\u003Cbr>\n    const cap = names.map(n => `${n[0].toUpperCase()}${n.slice(1)}`);\u003Cbr>\n    console.log(cap); // [\"Ali\", \"Ayşe\"]\n    \u003C/blockquote>\n  \u003C/li>\n\u003C/ol>\n\n\u003Ch3>Sınırlamalar ve dikkat edilmesi gerekenler\u003C/h3>\n\u003Cp>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 \u003Cstrong>replaceAll\u003C/strong> ve bazı yeni özelliklerin ortam desteğini kontrol etmek iyi bir uygulamadır. Detaylı teknik referanslar için MDN sayfalarını inceleyin.\u003C/p>\n\n\u003Ch3>Kaynaklar\u003C/h3>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals?retiredLocale=vi\">Template literals — MDN\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll\">String.prototype.replaceAll() — MDN\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://developer.mozilla.org/pt-PT/docs/Web/JavaScript/Reference/Global_Objects/String\">String (global object) — MDN\u003C/a>\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Sıkça sorulan sorular\u003C/h3>\n\u003Cul>\n  \u003Cli>\u003Cstrong>replace() ile replaceAll() arasındaki en net fark nedir?\u003C/strong> — 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.)\u003C/li>\n  \u003Cli>\u003Cstrong>substring() negatif değerleri nasıl işler?\u003C/strong> — substring() negatif değerleri 0 olarak ele alır; negatif indeks desteği için slice() tercih edilmelidir.\u003C/li>\n  \u003Cli>\u003Cstrong>Template literal içinde hangi tür ifadeler kullanılabilir?\u003C/strong> — ${} 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.\u003C/li>\n\u003C/ul>\n","JS String İşlemleri — substring, slice, includes, replace/​/","JavaScript'te stringleri nasıl keseceğinizi, arayacağınızı ve değiştireceğinizi örneklerle öğrenin. substring, slice, includes, replace/replaceAll ve template-l","JS String İşlemleri, substring, slice, includes, replace, replaceAll, template literals, regex temel","js-string-islemleri-kesme-arama-degistirme-ve-template-literal-ornekleri","2026-04-02T12:06:02.000Z",{"id":16,"title":17,"slug":18},215,"JS String İşlemleri","js-string-islemleri",{"id":20,"name":21,"nickname":22,"slug":23},93,"Onur Tekin","CodeCraftsman","onur-tekin","/media/blog/9075d778acb7b76ec851380ec58b5911.jpg","/media/blog/9075d778acb7b76ec851380ec58b5911_thumb.jpg","/media/blog/9075d778acb7b76ec851380ec58b5911.webp","/media/blog/9075d778acb7b76ec851380ec58b5911_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},5,843,0,"5 dk okuma süresi","/blog/js-string-islemleri/js-string-islemleri-kesme-arama-degistirme-ve-template-literal-ornekleri",[],["Reactive",37],{"title":7,"subTitle":17,"image":24},["Reactive",39],{"title":10,"meta":40,"link":75},[41,43,45,48,51,54,57,60,63,66,69,71,73],{"hid":42,"name":42,"content":11},"description",{"hid":44,"name":44,"content":12},"keywords",{"hid":46,"name":46,"content":47},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":49,"name":49,"content":50},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":52,"property":52,"content":53},"og:type","website",{"hid":55,"property":55,"content":56},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":58,"property":58,"content":59},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":61,"property":61,"content":62},"og:image","https://kodogreniyorum.com/media/blog/9075d778acb7b76ec851380ec58b5911.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/js-string-islemleri/js-string-islemleri-kesme-arama-degistirme-ve-template-literal-ornekleri",{"hid":67,"name":67,"content":68},"twitter:card","summary_large_image",{"hid":70,"name":70,"content":56},"twitter:title",{"hid":72,"name":72,"content":59},"twitter:description",{"hid":74,"name":74,"content":62},"twitter:image",[76,78],{"rel":77,"href":65},"canonical",{"rel":79,"href":80},"amphtml","https://amp.kodogreniyorum.com/blog/js-string-islemleri/js-string-islemleri-kesme-arama-degistirme-ve-template-literal-ornekleri",["Reactive",82],{"@context":83,"@graph":84},"https://schema.org",[85,98],{"@type":86,"headline":10,"image":62,"author":87,"publisher":90,"datePublished":14,"dateModified":14,"mainEntityOfPage":96,"description":11},"BlogPosting",{"@type":88,"name":21,"url":89},"Person","https://kodogreniyorum.com/yazarlar/onur-tekin",{"@type":91,"name":47,"logo":92},"Organization",{"@type":93,"url":94,"width":95,"height":95},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":97,"@id":65},"WebPage",{"@type":99,"itemListElement":100},"BreadcrumbList",[101,106,110,113],{"@type":102,"position":103,"name":104,"item":105},"ListItem",1,"Ana Sayfa","https://kodogreniyorum.com",{"@type":102,"position":107,"name":108,"item":109},2,"Blog","https://kodogreniyorum.com/blog",{"@type":102,"position":111,"name":17,"item":112},3,"https://kodogreniyorum.com/blog/js-string-islemleri",{"@type":102,"position":114,"name":7,"item":65},4]