[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-javascript-ile-metin-islemleri-split-slice-ve-sablon-literalleri":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},27445,"JavaScript ile Metin İşlemleri: Split, Slice ve Şablon Literalleri","Bu makale, javascript başlangıç kodları kapsamında split(), slice() ve şablon literalleri (template literals) ile metinleri nasıl kolayca parçalayıp, kesip ve biçimlendirebileceğinizi örneklerle gösterir. Temel kullanım, pratik örnekler, regex ile basit ayırma ve kısa bir kontrol listesi içerir.","\u003Ch2>Giriş\u003C/h2>\n\u003Cp>JavaScript'te metin (string) işlemleri günlük programlama görevlerinin büyük kısmını oluşturur: CSV satırlarını parçalayıp alanları almak, dosya uzantısını kesmek, kullanıcıya okunaklı mesajlar oluşturmak vb. Bu rehberde \u003Cstrong>split()\u003C/strong>, \u003Cstrong>slice()\u003C/strong> ve ES6 şablon literalleri (template literals) üzerine pratik örnekler ve kısa ipuçları bulacaksınız. Aşağıdaki örnekler hem tarayıcı hem de Node.js ortamında çalışır.\u003C/p>\n\n\u003Ch2>split() — Bir string'i diziye bölmek\u003C/h2>\n\u003Cp>\u003Cstrong>split()\u003C/strong> metodu bir string'i belirlediğiniz ayırıcıya göre böler ve bir dizi (array) döndürür. Ayırıcı bir metin veya düzenli ifade (RegExp) olabilir; isteğe bağlı \u003Cem>limit\u003C/em> parametresi ile sonuç sayısını kısıtlayabilirsiniz. Detaylı kullanım için W3Schools sayfasına bakabilirsiniz: \u003Ca href=\"https://www.w3schools.com/jsref/jsref_split.asp\">JavaScript String split() Method — W3Schools\u003C/a>.\u003C/p>\n\n\u003Ch3>Temel örnekler\u003C/h3>\n\u003Cp>Basit boşluk ile ayırma:\u003C/p>\n\u003Cp>const str = 'Merhaba dünya'; const parts = str.split(' '); // ['Merhaba', 'dünya']\u003C/p>\n\n\u003Cp>Virgül ile ayırıp boşlukları temizleme (trim):\u003C/p>\n\u003Cp>const csv = 'ali, ayşe, mehmet'; const names = csv.split(',').map(s => s.trim()); // ['ali','ayşe','mehmet']\u003C/p>\n\n\u003Cp>Karakter karakter ayırma:\u003C/p>\n\u003Cp>const chars = 'abc'.split(''); // ['a','b','c']\u003C/p>\n\n\u003Cp>Regex ile basit örnek — bir veya daha fazla boşlukla ayırma:\u003C/p>\n\u003Cp>const words = '  a   b c  '.split(/\\s+/).filter(Boolean); // ['a','b','c']\u003C/p>\n\n\u003Ch3>İleri ipuçları\u003C/h3>\n\u003Cul>\n  \u003Cli>Ayırıcı RegExp içinde parantez (capturing group) kullanırsanız, yakalanan parçalar çıktı dizisine de eklenir. Bu davranış dokümantasyonda belirtilir ve bazı durumlarda işe yarar.\u003C/li>\n  \u003Cli>\u003Cstrong>limit\u003C/strong> parametresi ile dönüş dizisinin uzunluğunu sınırlayabilirsiniz: \u003Cem>'a,b,c,d'.split(',', 2)\u003C/em> => ['a','b'].\u003C/li>\n  \u003Cli>Boş elemanları atlamak için \u003Cem>.filter(Boolean)\u003C/em> kullanmak pratik bir yöntemdir.\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\n\u003Ch2>slice() — Bir alt string/alt dizi almak\u003C/h2>\n\u003Cp>\u003Cstrong>slice()\u003C/strong> metodu bir string'in belirli bir bölümünü kesip yeni bir string döndürür; orijinal string değişmez. İki parametre alır: \u003Cem>start\u003C/em> (dahil) ve \u003Cem>end\u003C/em> (hariç). Negatif indeksler sona göre sayılır. Daha fazla örnek ve tanım için: \u003Ca href=\"https://www.w3schools.com/jsref/jsref_slice_string.asp\">JavaScript String slice() Method — W3Schools\u003C/a>.\u003C/p>\n\n\u003Ch3>Örnekler\u003C/h3>\n\u003Cp>Başlangıçtan belli bir uzunluğu almak:\u003C/p>\n\u003Cp>const s = 'Merhaba dünya'; s.slice(0, 7); // 'Merhaba' (end index hariç)\u003C/p>\n\n\u003Cp>Son 5 karakteri almak (negatif indeks):\u003C/p>\n\u003Cp>const last = s.slice(-5); // 'dünya'\u003C/p>\n\n\u003Cp>Dosya uzantısını almak (indexOf ile birlikte):\u003C/p>\n\u003Cp>const file = 'rapor.pdf'; const ext = file.slice(file.lastIndexOf('.') + 1); // 'pdf'\u003C/p>\n\n\u003Cp>Not: \u003Cstrong>slice()\u003C/strong> hem string'lerde hem dizilerde (array) çalışır; string için geri dönen değer yeni bir string'tir çünkü string'ler JavaScript'te değiştirilemez.\u003C/p>\n\n\u003Chr>\n\n\u003Ch2>Şablon Literalleri (Template Literals) — Daha okunaklı string oluşturma\u003C/h2>\n\u003Cp>ES6 ile gelen şablon literalleri, ters tırnak (backtick) içinde değişkenleri ve ifadeleri \u003Cstrong>${...}\u003C/strong> ile gömmenize olanak verir. Çok satırlı string oluşturmayı ve ifadeleri doğrudan yerleştirmeyi kolaylaştırır. (ES6/ES2015 desteği gerektirir.)\u003C/p>\n\n\u003Ch3>Örnekler\u003C/h3>\n\u003Cp>Basit interpolasyon:\u003C/p>\n\u003Cp>const ad = 'Ahmet'; const mesaj = `Merhaba, ${ad}!`; // 'Merhaba, Ahmet!'\u003C/p>\n\n\u003Cp>İfade kullanımı:\u003C/p>\n\u003Cp>const total = `Toplam: ${price * qty} TL`;\u003C/p>\n\n\u003Cp>Çok satırlı metin:\u003C/p>\n\u003Cp>const html = `\n  \u003Cdiv>\n    \u003Cp>${ad} hoş geldin\u003C/p>\n  \u003C/div>\n`;\u003C/p>\n\n\u003Cp>Uyarı: Şablon literalleri okunurluğu artırır fakat kullanıcıdan gelen ham verileri doğrudan HTML içine eklemeden önce uygun şekilde kaçırmak veya güvenli API kullanmak iyi bir uygulamadır; aksi halde istenmeyen sonuçlar ortaya çıkabilir.\u003C/p>\n\n\u003Chr>\n\n\u003Ch2>Pratik kombinasyon: CSV e‑maillerden alan çıkarmak ve biçimlendirmek\u003C/h2>\n\u003Cp>Aşağıdaki adımlar küçük bir uygulama örneğidir. Amaç: virgüllerle ayrılmış e‑posta listesinden alan adlarını alıp numaralandırmak.\u003C/p>\n\u003Col>\n  \u003Cli>CSV'yi \u003Cstrong>split(',')\u003C/strong> ile diziye çevirin.\u003C/li>\n  \u003Cli>Her elemanı \u003Cstrong>trim()\u003C/strong> ile temizleyin.\u003C/li>\n  \u003Cli>Her e‑postadan \u003Cstrong>indexOf('@')\u003C/strong> ile @ sonrası kısmı alın; bunu \u003Cstrong>slice()\u003C/strong> ile kesin.\u003C/li>\n  \u003Cli>Şablon literalleriyle okunaklı çıktı oluşturun.\u003C/li>\n\u003C/ol>\n\u003Cp>Örnek kod (okunması amaçlı tek satır formatı):\u003C/p>\n\u003Cp>const csv = 'ali@example.com, ayse@test.org, mehmet@domain.net';\nconst domains = csv.split(',').map(s => s.trim()).map(e => e.slice(e.indexOf('@') + 1));\nconst out = domains.map((d,i) => `${i+1}. ${d}`).join('\\n');\nconsole.log(out);\n\u003C/p>\n\n\u003Chr>\n\n\u003Ch2>Hızlı ipuçları ve sık karşılaşılan durumlar\u003C/h2>\n\u003Cul>\n  \u003Cli>\u003Cstrong>split('')\u003C/strong> ile karakter dizisine dönersiniz; bu, tek tek karakterleri işlemek için kullanışlıdır.\u003C/li>\n  \u003Cli>RegExp ile \u003Cstrong>split\u003C/strong> yaparken yakalanan gruplar (capturing groups) sonuç dizisine eklenir — bu davranış bazen işe yarar, bazen de istenmeyen boş elemanlar oluşturabilir.\u003C/li>\n  \u003Cli>\u003Cstrong>slice(-n)\u003C/strong> son n karakteri almak için pratik bir yoldur.\u003C/li>\n  \u003Cli>Metin parçalama sonrası gereksiz boşlukları kaldırmak için \u003Cstrong>.map(s => s.trim())\u003C/strong> yaygın kullanılan bir kombinasyondur.\u003C/li>\n  \u003Cli>Regex ile eşleştirme ve bölme güçlüdür ama desenin ne yaptığını bilmek önemlidir; basit bir \u003Cem>/\\s+/\u003C/em> örneği çoklu boşlukları tek boşluğa veya ayırıcıya dönüştürmede faydalıdır.\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Kontrol listesi (Hızlı Bakış)\u003C/h2>\n\u003Cul>\n  \u003Cli>Ayırıcı olarak string mi yoksa RegExp mi kullanılacak?\u003C/li>\n  \u003Cli>Boş öğeler oluşuyorsa \u003Cstrong>.filter(Boolean)\u003C/strong> ekle.\u003C/li>\n  \u003Cli>Negatif indeks kullanıyorsanız son karakterlere göre hesaplandığını unutmayın.\u003C/li>\n  \u003Cli>Şablon literallerinde kullanmadan önce kullanıcı girdilerini doğrulayın/kaçırın.\u003C/li>\n  \u003Cli>Tarayıcı/Node sürümünüzün ES6 desteği olduğundan emin olun (template literals için gereklidir).\u003C/li>\n\u003C/ul>\n\n\u003Chr>\n\n\u003Ch2>Kaynaklar ve daha fazla okuma\u003C/h2>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://www.w3schools.com/jsref/jsref_split.asp\">JavaScript String split() Method — W3Schools\u003C/a> (split kullanım detayları ve örnekler).\u003C/li>\n  \u003Cli>\u003Ca href=\"https://www.w3schools.com/jsref/jsref_slice_string.asp\">JavaScript String slice() Method — W3Schools\u003C/a> (slice davranışı ve negatif indeksler).\u003C/li>\n  \u003Cli>\u003Ca href=\"https://1kodum.com/javascriptte-split-metodu/\">JavaScript’te “split()” Metodu Kullanımı — 1Kodum\u003C/a> (Türkçe örneklerle açıklama).\u003C/li>\n  \u003Cli>\u003Ca href=\"https://www.webcebir.com/363-javascript-array-slice-string-slice-method-dersi.html\">JavaScript Array slice() - String slice() Method — Webcebir\u003C/a> (daha fazla örnek).\u003C/li>\n\u003C/ul>\n\n\u003Ch2>Sınırlamalar ve tavsiyeler\u003C/h2>\n\u003Cp>Bu rehber temel ve pratik kullanım örneklerine odaklanır. Regex ile çok karmaşık ayrıştırmalar yapacaksanız daha kapsamlı testler ve gerekli durumda özel parser kullanımı düşünün. Ayrıca farklı JavaScript çalışma ortamlarında (eski tarayıcılar veya çok eski Node sürümleri) ES6 özellik desteğini kontrol edin.\u003C/p>\n","JavaScript Metin İşlemleri: split, slice ve şablon literallı","Bu rehber, javascript başlangıç kodları ile split(), slice() ve şablon literalleri kullanarak metinleri nasıl işler; örnekler, pratik ipuçları ve kısa kontrol列表","javascript başlangıç kodları, string method örnekleri, template literals kullanım, regex basit örnekler, trim replace örnekleri, split slice javascript","javascript-ile-metin-islemleri-split-slice-ve-sablon-literalleri","2026-04-12T19:02:54.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/c1e01530361bbcc2a1911cc8c56d71af.jpg","/media/blog/c1e01530361bbcc2a1911cc8c56d71af_thumb.jpg","/media/blog/c1e01530361bbcc2a1911cc8c56d71af.webp","/media/blog/c1e01530361bbcc2a1911cc8c56d71af_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},4,757,0,"4 dk okuma süresi","/blog/js-string-islemleri/javascript-ile-metin-islemleri-split-slice-ve-sablon-literalleri",[],["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/c1e01530361bbcc2a1911cc8c56d71af.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/js-string-islemleri/javascript-ile-metin-islemleri-split-slice-ve-sablon-literalleri",{"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/javascript-ile-metin-islemleri-split-slice-ve-sablon-literalleri",["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":30,"name":7,"item":65}]