JavaScript, web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri olarak s\u00fcrekli evrim ge\u00e7irmekte ve geli\u015ftiricilerin daha temiz, daha okunabilir ve daha verimli kod yazmas\u0131n\u0131 sa\u011flayacak yeni \u00f6zellikler sunmaktad\u0131r. Bu \u00f6zelliklerden biri de ECMAScript 2015 (ES6) ile tan\u0131t\u0131lan “\u015eablon Dizileri” (Template Literals) veya bazen “\u015eablon Dizgileri” olarak da an\u0131lan yap\u0131d\u0131r. Geleneksel dize olu\u015fturma ve birle\u015ftirme y\u00f6ntemlerine k\u0131yasla \u00e7ok daha esnek ve g\u00fc\u00e7l\u00fc bir alternatif sunan \u015fablon dizileri, \u00f6zellikle dinamik i\u00e7erik olu\u015fturma, \u00e7ok sat\u0131rl\u0131 metinler yazma ve dize i\u00e7inde de\u011fi\u015fkenleri kullanma gibi yayg\u0131n senaryolarda geli\u015ftiricilerin hayat\u0131n\u0131 kolayla\u015ft\u0131rm\u0131\u015ft\u0131r.<\/p>\n
\u015eablon dizileri, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, belirli bir \u015fablonu takip ederek dizeler olu\u015fturmam\u0131z\u0131 sa\u011flayan \u00f6zel bir s\u00f6zdizimine sahiptir. Geleneksel y\u00f6ntemlerde kar\u015f\u0131la\u015f\u0131lan t\u0131rnak i\u015fareti karma\u015fas\u0131, sat\u0131r sonu sorunlar\u0131 ve de\u011fi\u015fken birle\u015ftirme zorluklar\u0131 gibi pek \u00e7ok s\u0131k\u0131nt\u0131y\u0131 ortadan kald\u0131r\u0131r. Bu makalede, \u015fablon dizilerinin temel kullan\u0131m\u0131ndan ba\u015flayarak, ifade yerle\u015ftirme, \u00e7ok sat\u0131rl\u0131 dizeler, etiketli \u015fablonlar (tagged templates) gibi geli\u015fmi\u015f \u00f6zelliklerine kadar t\u00fcm y\u00f6nlerini derinlemesine inceleyece\u011fiz. Amac\u0131m\u0131z, bu g\u00fc\u00e7l\u00fc arac\u0131n ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 ve modern JavaScript geli\u015ftirmedeki \u00f6nemini kapsaml\u0131 bir \u015fekilde a\u00e7\u0131klamakt\u0131r.<\/p>\n
\u015eablon dizileri, geleneksel tek t\u0131rnak ( Bir \u015fablon dizesi olu\u015fturmak i\u00e7in tek yapman\u0131z gereken, metninizi backtick i\u015faretleri aras\u0131na almakt\u0131r:<\/p>\n Bu basit \u00f6rnek, geleneksel dizelerden pek farkl\u0131 g\u00f6r\u00fcnmese de, backtick i\u015faretinin sa\u011flad\u0131\u011f\u0131 as\u0131l g\u00fc\u00e7, sonraki b\u00f6l\u00fcmlerde ortaya \u00e7\u0131kacakt\u0131r.<\/p>\n Geleneksel JavaScript’te \u00e7ok sat\u0131rl\u0131 bir dize olu\u015fturmak olduk\u00e7a zahmetliydi. Her sat\u0131r\u0131n sonuna bir ka\u00e7\u0131\u015f karakteri ( Bu \u00f6zellik, \u00f6zellikle HTML par\u00e7alar\u0131, SQL sorgular\u0131 veya uzun metin bloklar\u0131 olu\u015ftururken kodun okunabilirli\u011fini ve yaz\u0131m kolayl\u0131\u011f\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n \u015eablon dizilerinin en g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, dize i\u00e7ine do\u011frudan JavaScript ifadelerini yerle\u015ftirebilme yetene\u011fidir. Bu, Dize i\u00e7ine de\u011fi\u015fken de\u011ferlerini eklemek art\u0131k \u00e7ok daha sezgiseldir:<\/p>\n Geleneksel dize birle\u015ftirmede kullan\u0131lan Sadece de\u011fi\u015fkenler de\u011fil, dize i\u00e7inde basit aritmetik i\u015flemler de yapabilirsiniz:<\/p>\n \u0130fade yerle\u015ftirme i\u00e7inde fonksiyon \u00e7a\u011fr\u0131lar\u0131 da yap\u0131labilir ve fonksiyonun d\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011fer dizeye dahil edilir:<\/p>\n Ko\u015fullu ifadeler (\u00fc\u00e7l\u00fc operat\u00f6r) kullanarak dize i\u00e7inde dinamik metin olu\u015fturmak da m\u00fcmk\u00fcnd\u00fcr:<\/p>\n Nesnelerin \u00f6zelliklerine veya dizilerin elemanlar\u0131na do\u011frudan eri\u015filebilir:<\/p>\n G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, \u015eablon dizilerinin avantajlar\u0131n\u0131 daha iyi anlamak i\u00e7in, geleneksel dize birle\u015ftirme y\u00f6ntemleriyle aralar\u0131ndaki farklar\u0131 incelemek faydal\u0131 olacakt\u0131r.<\/p>\n ES6 \u00f6ncesinde, dizeleri ve de\u011fi\u015fkenleri birle\u015ftirmek i\u00e7in genellikle Bu y\u00f6ntem, \u00f6zellikle \u00e7ok say\u0131da de\u011fi\u015fken veya karma\u015f\u0131k bir metinle \u00e7al\u0131\u015f\u0131rken okunabilirli\u011fi ciddi \u015fekilde d\u00fc\u015f\u00fcr\u00fcr. T\u0131rnak i\u015faretleri ve JavaScript’in Bu y\u00f6ntem, \u015eablon dizileri, geleneksel y\u00f6ntemlere g\u00f6re belirgin avantajlar sunar:<\/p>\n 1. Okunabilirlik:<\/strong> De\u011fi\u015fkenler ve ifadeler do\u011frudan dize i\u00e7ine yerle\u015ftirildi\u011fi i\u00e7in, dize yap\u0131s\u0131 \u00e7ok daha net ve anla\u015f\u0131l\u0131rd\u0131r. Kodun amac\u0131n\u0131 anlamak i\u00e7in Bu avantajlar, \u015fablon dizilerini modern JavaScript geli\u015ftirme i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline getirmi\u015ftir.<\/p>\n \u015eablon dizilerinin belki de en geli\u015fmi\u015f ve g\u00fc\u00e7l\u00fc \u00f6zelli\u011fi “etiketli \u015fablonlar”d\u0131r. Etiketli \u015fablonlar, bir fonksiyonun bir \u015fablon dizesini i\u015flemesine olanak tan\u0131r. Bu, dizeyi olu\u015fturmadan \u00f6nce veya olu\u015fturulduktan sonra \u00fczerinde \u00f6zel i\u015flemler yapmam\u0131z\u0131 sa\u011flar.<\/p>\n Etiketli \u015fablonlar, bir \u015fablon dizesinin \u00f6n\u00fcne bir fonksiyon ad\u0131n\u0131 (etiket) ekleyerek kullan\u0131l\u0131r. Etiket fonksiyonu, \u015fablon dizesini ayr\u0131\u015ft\u0131r\u0131r ve dize par\u00e7alar\u0131 ile yerle\u015ftirilen ifadelerin de\u011ferlerini ayr\u0131 ayr\u0131 arg\u00fcmanlar olarak al\u0131r.<\/p>\n S\u00f6zdizimi \u015fu \u015fekildedir: \u00d6rnek bir etiket fonksiyonu tan\u0131m\u0131 \u015f\u00f6yle olabilir:<\/p>\n Bu \u00f6rnekte, Etiketli \u015fablonlar, \u00e7ok \u00e7e\u015fitli senaryolarda inan\u0131lmaz derecede faydal\u0131d\u0131r:<\/p>\n Kullan\u0131c\u0131 taraf\u0131ndan girilen verileri do\u011frudan HTML’e veya SQL sorgular\u0131na yerle\u015ftirmek g\u00fcvenlik a\u00e7\u0131klar\u0131 (\u00f6rn. XSS, SQL Enjeksiyonu) yaratabilir. Etiketli \u015fablonlar, bu t\u00fcr verileri otomatik olarak ka\u00e7\u0131\u015f karakterlerine d\u00f6n\u00fc\u015ft\u00fcrmek veya filtrelemek i\u00e7in kullan\u0131labilir.<\/p>\n'<\/code>) veya \u00e7ift t\u0131rnak (\"<\/code>) yerine backtick (<\/code>) i\u015fareti kullan\u0131larak tan\u0131mlan\u0131r. Bu k\u00fc\u00e7\u00fck de\u011fi\u015fiklik, dizelerle \u00e7al\u0131\u015fma \u015feklimizde b\u00fcy\u00fck farklar yarat\u0131r.<\/p>\nBacktick (<\/code>) \u0130\u015fareti ile Tan\u0131mlama<\/h4>\n
\nconst mesaj = Merhaba d\u00fcnya!<\/code>;\nconsole.log(mesaj); \/\/ \u00c7\u0131kt\u0131: Merhaba d\u00fcnya!\n<\/code><\/pre>\n\u00c7ok Sat\u0131rl\u0131 Dizeler (Multi-line Strings)<\/h4>\n
\\<\/code>) eklemek veya dize birle\u015ftirme operat\u00f6r\u00fcn\u00fc (+<\/code>) kullanmak gerekiyordu. \u015eablon dizileri bu sorunu ortadan kald\u0131r\u0131r; metninizi backtick i\u00e7ine yazd\u0131\u011f\u0131n\u0131z gibi birden fazla sat\u0131ra yayabilirsiniz:<\/p>\n\n\/\/ Geleneksel y\u00f6ntem (zorlu)\nconst gelenekselCokSatirli = 'Bu ilk sat\u0131r.\\n' +\n 'Bu ikinci sat\u0131r.\\n' +\n 'Bu \u00fc\u00e7\u00fcnc\u00fc sat\u0131r.';\nconsole.log(gelenekselCokSatirli);\n\n\/\/ \u015eablon dizileri ile (kolay)\nconst sablonCokSatirli = Bu ilk sat\u0131r.\nBu ikinci sat\u0131r.\nBu \u00fc\u00e7\u00fcnc\u00fc sat\u0131r.<\/code>;\nconsole.log(sablonCokSatirli);\n<\/code><\/pre>\n\u0130fade Yerle\u015ftirme (Expression Interpolation)<\/h4>\n
${expression}<\/code> s\u00f6zdizimi kullan\u0131larak yap\u0131l\u0131r. expression<\/code> yerine herhangi bir ge\u00e7erli JavaScript ifadesi yaz\u0131labilir.<\/p>\nDe\u011fi\u015fken Yerle\u015ftirme<\/h5>\n
\nconst ad = \"Ay\u015fe\";\nconst yas = 30;\n\nconst selamlama = Merhaba, benim ad\u0131m ${ad} ve ben ${yas} ya\u015f\u0131nday\u0131m.<\/code>;\nconsole.log(selamlama); \/\/ \u00c7\u0131kt\u0131: Merhaba, benim ad\u0131m Ay\u015fe ve ben 30 ya\u015f\u0131nday\u0131m.\n<\/code><\/pre>\n+<\/code> operat\u00f6r\u00fcyle kar\u015f\u0131la\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda, bu y\u00f6ntem \u00e7ok daha temiz ve okunabilirdir.<\/p>\nAritmetik \u0130\u015flemler<\/h5>\n
\nconst fiyat = 10;\nconst miktar = 3;\n\nconst toplam = \u00dcr\u00fcnlerin toplam fiyat\u0131: ${fiyat * miktar} TL.<\/code>;\nconsole.log(toplam); \/\/ \u00c7\u0131kt\u0131: \u00dcr\u00fcnlerin toplam fiyat\u0131: 30 TL.\n<\/code><\/pre>\nFonksiyon \u00c7a\u011fr\u0131lar\u0131<\/h5>\n
\nfunction adSoyadBirlestir(ad, soyad) {\n return ${ad} ${soyad}<\/code>;\n}\n\nconst kullaniciAdi = Ho\u015f geldiniz, ${adSoyadBirlestir(\"Mehmet\", \"Y\u0131lmaz\")}!<\/code>;\nconsole.log(kullaniciAdi); \/\/ \u00c7\u0131kt\u0131: Ho\u015f geldiniz, Mehmet Y\u0131lmaz!\n<\/code><\/pre>\nKo\u015fullu \u0130fadeler (Ternary Operator)<\/h5>\n
\nconst stoktaVar = true;\nconst durumMesaji = \u00dcr\u00fcn ${stoktaVar ? \"stokta mevcut\" : \"t\u00fckendi\"}.<\/code>;\nconsole.log(durumMesaji); \/\/ \u00c7\u0131kt\u0131: \u00dcr\u00fcn stokta mevcut.\n<\/code><\/pre>\nNesne \u00d6zellikleri ve Array Elemanlar\u0131<\/h5>\n
\nconst urun = { ad: \"Laptop\", marka: \"ABC\", fiyat: 1200 };\nconst sepet = [\"Elma\", \"Armut\"];\n\nconst urunBilgisi = \u00dcr\u00fcn: ${urun.marka} ${urun.ad}, Fiyat: ${urun.fiyat} TL.<\/code>;\nconst sepetBilgisi = Sepetinizdeki ilk \u00fcr\u00fcn: ${sepet[0]}.<\/code>;\n\nconsole.log(urunBilgisi); \/\/ \u00c7\u0131kt\u0131: \u00dcr\u00fcn: ABC Laptop, Fiyat: 1200 TL.\nconsole.log(sepetBilgisi); \/\/ \u00c7\u0131kt\u0131: Sepetinizdeki ilk \u00fcr\u00fcn: Elma.\n<\/code><\/pre>\n${}<\/code> yap\u0131s\u0131 i\u00e7ine yerle\u015ftirilebilecek ifadelerin s\u0131n\u0131r\u0131 yoktur, bu da \u015fablon dizilerini inan\u0131lmaz derecede esnek k\u0131lar.<\/p>\nGeleneksel Dizelerle Kar\u015f\u0131la\u015ft\u0131rma<\/h3>\n
+<\/code> Operat\u00f6r\u00fc ile Dize Birle\u015ftirme<\/h4>\n+<\/code> operat\u00f6r\u00fc kullan\u0131l\u0131rd\u0131:<\/p>\n\nconst ad = \"Zeynep\";\nconst yas = 25;\nconst meslek = \"M\u00fchendis\";\n\nconst bilgi = \"Merhaba, benim ad\u0131m \" + ad + \", \" + yas + \" ya\u015f\u0131nday\u0131m ve \" + meslek + \" olarak \u00e7al\u0131\u015f\u0131yorum.\";\nconsole.log(bilgi);\n<\/code><\/pre>\n+<\/code> operat\u00f6rleri aras\u0131nda kaybolmak kolayd\u0131r. Ayr\u0131ca, \u00e7ok sat\u0131rl\u0131 dizeler olu\u015fturmak i\u00e7in her sat\u0131r\u0131n sonuna \\n<\/code> eklemek veya her sat\u0131r\u0131 ayr\u0131 ayr\u0131 birle\u015ftirmek gerekiyordu, bu da kodu daha da karma\u015f\u0131k hale getiriyordu.<\/p>\nconcat()<\/code> Metodu<\/h4>\nString<\/code> prototipinde bulunan concat()<\/code> metodu da dizeleri birle\u015ftirmek i\u00e7in kullan\u0131labilir:<\/p>\n\nconst ad = \"Deniz\";\nconst soyad = \"Can\";\nconst tamAd = ad.concat(\" \", soyad);\nconsole.log(tamAd); \/\/ \u00c7\u0131kt\u0131: Deniz Can\n<\/code><\/pre>\n+<\/code> operat\u00f6r\u00fcne g\u00f6re biraz daha d\u00fczenli olsa da, yine de birden fazla de\u011fi\u015fkeni veya karma\u015f\u0131k bir metni birle\u015ftirirken \u015fablon dizilerinin sundu\u011fu esneklik ve okunabilirlikten yoksundur. \u00d6zellikle \u00e7ok say\u0131da arg\u00fcman\u0131 birle\u015ftirirken concat()<\/code> \u00e7a\u011fr\u0131lar\u0131 i\u00e7 i\u00e7e ge\u00e7ebilir ve kodu yine karma\u015f\u0131k hale getirebilir.<\/p>\nAvantajlar: Okunabilirlik, Yaz\u0131m Kolayl\u0131\u011f\u0131, Hata Azaltma<\/h4>\n
+<\/code> operat\u00f6rleri veya t\u0131rnak i\u015faretleri aras\u0131nda gezinmeye gerek kalmaz.
\n2. Yaz\u0131m Kolayl\u0131\u011f\u0131:<\/strong> \u00d6zellikle \u00e7ok sat\u0131rl\u0131 dizeler ve birden fazla de\u011fi\u015fken i\u00e7eren dizeler i\u00e7in yaz\u0131m s\u00fcresini ve \u00e7abas\u0131n\u0131 azalt\u0131r. Ka\u00e7\u0131\u015f karakterleri veya s\u00fcrekli +<\/code> operat\u00f6r\u00fc kullanma ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r.
\n3. Hata Azaltma:<\/strong> T\u0131rnak i\u015faretlerini yanl\u0131\u015f yerle\u015ftirme veya +<\/code> operat\u00f6r\u00fcn\u00fc unutma gibi yayg\u0131n hatalar\u0131n \u00f6n\u00fcne ge\u00e7er. Yaz\u0131m hatalar\u0131n\u0131 azaltarak geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r.
\n4. Esneklik:<\/strong> \u0130fade yerle\u015ftirme \u00f6zelli\u011fi sayesinde, dize i\u00e7inde sadece de\u011fi\u015fkenleri de\u011fil, ayn\u0131 zamanda fonksiyon \u00e7a\u011fr\u0131lar\u0131n\u0131, aritmetik i\u015flemleri ve ko\u015fullu ifadeleri de kullanabilirsiniz.<\/p>\nEtiketli \u015eablonlar (Tagged Templates)<\/h3>\n
Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h4>\n
etiketFonksiyonu<\/code> dize metni ${ifade1} dize metni ${ifade2} ...<\/code><\/p>\netiketFonksiyonu<\/code> a\u015fa\u011f\u0131daki arg\u00fcmanlar\u0131 al\u0131r:
\n1. strings<\/code> (Dizeler):<\/strong> Bu, \u015fablon dizesinin statik dize par\u00e7alar\u0131n\u0131 i\u00e7eren bir dizidir. Her zaman ilk arg\u00fcmand\u0131r ve bir Array<\/code> tipindedir. Bu dizi, yerle\u015ftirilen ifadelerin aras\u0131na giren t\u00fcm metinleri i\u00e7erir.
\n2. ...values<\/code> (De\u011ferler):<\/strong> Bu, \u015fablon dizesindeki ${}<\/code> i\u00e7ine yerle\u015ftirilen t\u00fcm ifadelerin de\u011ferlendirilmi\u015f de\u011ferleridir. Bunlar, strings<\/code> dizisinden sonraki arg\u00fcmanlar olarak gelir.<\/p>\n\nfunction benimEtiketim(strings, ...values) {\n \/\/ strings: [\"Merhaba \", \", bug\u00fcn hava \", \" ve saat \", \"!\", raw: Array(4)]\n \/\/ values: [\"Ahmet\", \"g\u00fcne\u015fli\", \"14:30\"]\n console.log(strings);\n console.log(values);\n\n let sonuc = \"\";\n for (let i = 0; i < strings.length; i++) {\n sonuc += strings[i];\n if (i < values.length) {\n sonuc += values[i];\n }\n }\n return sonuc;\n}\n\nconst ad = \"Ahmet\";\nconst havaDurumu = \"g\u00fcne\u015fli\";\nconst saat = \"14:30\";\n\nconst mesaj = benimEtiketimMerhaba ${ad}, bug\u00fcn hava ${havaDurumu} ve saat ${saat}!<\/code>;\nconsole.log(mesaj); \/\/ \u00c7\u0131kt\u0131: Merhaba Ahmet, bug\u00fcn hava g\u00fcne\u015fli ve saat 14:30!\n<\/code><\/pre>\nbenimEtiketim<\/code> fonksiyonu \u015fablon dizesini i\u015fleyerek ayn\u0131 \u00e7\u0131kt\u0131y\u0131 \u00fcretir. Ancak as\u0131l g\u00fc\u00e7, etiket fonksiyonunun dize par\u00e7alar\u0131n\u0131 ve de\u011ferleri ayr\u0131 ayr\u0131 manip\u00fcle edebilmesidir.<\/p>\nKullan\u0131m Alanlar\u0131<\/h4>\n
1. G\u00fcvenlik ve Ka\u00e7\u0131\u015f Karakterleri (Sanitizing)<\/h5>\n
\nfunction htmlEscape(strings, ...values) {\n let str = '';\n strings.forEach((s, i) => {\n str += s;\n if (i < values.length) {\n const val = String(values[i]); \/\/ De\u011feri string'e \u00e7evir\n str += val\n .replace(\/&\/g, '&')\n .replace(\/<\/g, '<')\n .replace(\/>\/g, '>')\n .replace(\/\"\/g, '\"')\n .replace(\/'\/g, ''');\n }\n });\n return str;\n}\n\nconst kullaniciYorumu =