{"id":34972,"date":"2025-11-24T08:40:43","date_gmt":"2025-11-24T05:40:43","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=34972"},"modified":"2025-11-24T08:40:43","modified_gmt":"2025-11-24T05:40:43","slug":"template-literals-in-javascript-es6-es2015-modern-string-isleme-sanati","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/template-literals-in-javascript-es6-es2015-modern-string-isleme-sanati\/","title":{"rendered":"Template Literals in JavaScript (ES6 \/ ES2015): Modern String \u0130\u015fleme Sanat\u0131"},"content":{"rendered":"

<\/p>\n

Template Literals in JavaScript (ES6 \/ ES2015): Modern String \u0130\u015fleme Sanat\u0131<\/h2>\n

Giri\u015f: JavaScript’te Dizelerin Evrimi<\/h3>\n
JavaScript, web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri olarak s\u00fcrekli evrim ge\u00e7iren bir dildir. ES6 (ECMAScript 2015) ile gelen bir\u00e7ok yenilik, dilin modern ihtiya\u00e7lara daha iyi yan\u0131t vermesini sa\u011flam\u0131\u015ft\u0131r. Bu yeniliklerden biri de “Template Literals” veya T\u00fcrk\u00e7e ad\u0131yla “\u015eablon Dizeleri”dir. \u015eablon Dizeleri, JavaScript’te dizelerle \u00e7al\u0131\u015fma \u015feklimizi k\u00f6kten de\u011fi\u015ftirerek, daha okunabilir, esnek ve g\u00fc\u00e7l\u00fc bir yap\u0131 sunmu\u015ftur. Geleneksel dize birle\u015ftirme y\u00f6ntemlerinin (art\u0131 operat\u00f6r\u00fcyle `+<\/code> veya concat()<\/code> metoduyla) getirdi\u011fi zorluklar, \u00f6zellikle \u00e7ok sat\u0131rl\u0131 dizelerde ve de\u011fi\u015fkenlerin dize i\u00e7ine yerle\u015ftirilmesinde (interpolation) kendini g\u00f6steriyordu. Bu zorluklar, kodun karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 art\u0131r\u0131yor, hata yapma olas\u0131l\u0131\u011f\u0131n\u0131 y\u00fckseltiyor ve okunabilirli\u011fi d\u00fc\u015f\u00fcr\u00fcyordu.<\/p>\n`
\u015eablon Dizeleri, bu sorunlara zarif bir \u00e7\u00f6z\u00fcm getirerek, geli\u015ftiricilere dizelerle \u00e7al\u0131\u015fma konusunda yeni bir paradigma sunmu\u015ftur. Art\u0131k \u00e7ok sat\u0131rl\u0131 dizeleri kolayca olu\u015fturabilir, de\u011fi\u015fkenleri ve ifadeleri do\u011frudan dize i\u00e7ine yerle\u015ftirebilir ve hatta dizeleri \u00f6zel fonksiyonlarla i\u015fleyebiliriz. Bu makalede, \u015eablon Dizelerinin temel s\u00f6zdiziminden ileri d\u00fczey kullan\u0131m alanlar\u0131na, performans etkilerinden en iyi uygulama y\u00f6ntemlerine kadar her y\u00f6n\u00fcn\u00fc detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

\u015eablon Dizelerinin Temel S\u00f6zdizimi: Ters T\u0131rnaklar (Backticks)<\/h3>\n\u015eablon Dizeleri, geleneksel tek t\u0131rnak ('<\/code>) veya \u00e7ift t\u0131rnak (\"<\/code>) yerine ters t\u0131rnak (` <\/code> `) karakteri kullan\u0131larak tan\u0131mlan\u0131r. Bu basit s\u00f6zdizimi de\u011fi\u015fikli\u011fi, \u015eablon Dizelerinin sundu\u011fu t\u00fcm g\u00fc\u00e7l\u00fc \u00f6zelliklerin kap\u0131s\u0131n\u0131 a\u00e7ar.<\/p>\n
\/\/ Geleneksel dize\nconst gelenekselDize = 'Merhaba d\u00fcnya!';\n\n\/\/ \u015eablon Dizesi\nconst sablonDizesi = <\/code>Merhaba d\u00fcnya!;\n\nconsole.log(gelenekselDize); \/\/ Merhaba d\u00fcnya!\nconsole.log(sablonDizesi);   \/\/ Merhaba d\u00fcnya!<\/code><\/pre>\n\u0130lk bak\u0131\u015fta aralar\u0131nda bir fark yok gibi g\u00f6r\u00fcnse de, ters t\u0131rnaklar\u0131n kullan\u0131m\u0131 \u015eablon Dizelerinin temelini olu\u015fturur ve di\u011fer t\u00fcm \u00f6zelliklerinin anahtar\u0131d\u0131r.<\/p>\n
\u00c7ok Sat\u0131rl\u0131 Dizeler (Multi-line Strings)<\/h3>\nGeleneksel JavaScript dizelerinde \u00e7ok sat\u0131rl\u0131 metin olu\u015fturmak olduk\u00e7a zahmetliydi. Her sat\u0131r\u0131n sonunda <\/code>\\n (yeni sat\u0131r) karakteri kullanmak veya dizeleri birle\u015ftirmek gerekiyordu. Bu durum, \u00f6zellikle uzun metin bloklar\u0131 veya HTML\/XML yap\u0131lar\u0131 olu\u015ftururken kodun okunabilirli\u011fini ciddi \u015fekilde d\u00fc\u015f\u00fcr\u00fcyordu.<\/p>\n
\/\/ Geleneksel \u00e7ok sat\u0131rl\u0131 dize\nconst gelenekselCokSatirli = 'Bu ilk sat\u0131r.\\n' +\n                             'Bu ikinci sat\u0131r.\\n' +\n                             'Bu da \u00fc\u00e7\u00fcnc\u00fc sat\u0131r.';\nconsole.log(gelenekselCokSatirli);\n\n\/* \u00c7\u0131kt\u0131:\nBu ilk sat\u0131r.\nBu ikinci sat\u0131r.\nBu da \u00fc\u00e7\u00fcnc\u00fc sat\u0131r.\n*\/<\/code><\/pre>\n\u015eablon Dizeleri ile \u00e7ok sat\u0131rl\u0131 metin olu\u015fturmak ise son derece basittir. Ters t\u0131rnaklar aras\u0131na yazd\u0131\u011f\u0131n\u0131z metin, aynen yazd\u0131\u011f\u0131n\u0131z gibi yeni sat\u0131r karakterlerini korur.<\/p>\n
\/\/ \u015eablon Dizesi ile \u00e7ok sat\u0131rl\u0131 dize\nconst sablonCokSatirli = <\/code>Bu ilk sat\u0131r.\nBu ikinci sat\u0131r.\nBu da \u00fc\u00e7\u00fcnc\u00fc sat\u0131r.;\nconsole.log(sablonCokSatirli);\n\n\/* \u00c7\u0131kt\u0131:\nBu ilk sat\u0131r.\nBu ikinci sat\u0131r.\nBu da \u00fc\u00e7\u00fcnc\u00fc sat\u0131r.\n*\/<\/code><\/pre>\nBu \u00f6zellik, \u00f6zellikle kod i\u00e7inde k\u00fc\u00e7\u00fck HTML par\u00e7alar\u0131, SQL sorgular\u0131 veya uzun metin mesajlar\u0131 tan\u0131mlarken okunabilirli\u011fi ve yaz\u0131m kolayl\u0131\u011f\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n
Dize \u0130\u00e7ine De\u011fer Yerle\u015ftirme (String Interpolation \/ Expression Interpolation)<\/h3>\n\u015eablon Dizelerinin en g\u00fc\u00e7l\u00fc ve en \u00e7ok kullan\u0131lan \u00f6zelliklerinden biri, dize i\u00e7ine do\u011frudan de\u011fi\u015fkenleri veya JavaScript ifadelerini yerle\u015ftirebilme yetene\u011fidir. Bu \u00f6zelli\u011fe \"Dize \u0130\u00e7ine De\u011fer Yerle\u015ftirme\" veya \"\u0130fade Yerle\u015ftirme\" denir. Geleneksel olarak, de\u011fi\u015fkenleri bir dizeye eklemek i\u00e7in art\u0131 (<\/code>+) operat\u00f6r\u00fcn\u00fc kullanmak gerekiyordu, bu da karma\u015f\u0131k dizelerde kafa kar\u0131\u015ft\u0131r\u0131c\u0131 ve hataya a\u00e7\u0131k bir yap\u0131 olu\u015fturuyordu.<\/p>\n
\/\/ Geleneksel dize birle\u015ftirme\nconst isim = 'Ali';\nconst yas = 30;\nconst mesajGeleneksel = 'Merhaba, benim ad\u0131m ' + isim + ' ve ben ' + yas + ' ya\u015f\u0131nday\u0131m.';\nconsole.log(mesajGeleneksel); \/\/ Merhaba, benim ad\u0131m Ali ve ben 30 ya\u015f\u0131nday\u0131m.<\/code><\/pre>\n\u015eablon Dizeleri ile dize i\u00e7ine de\u011fer yerle\u015ftirme, <\/code>${ifade} s\u00f6zdizimi kullan\u0131larak yap\u0131l\u0131r. Bu sayede, de\u011fi\u015fkenler, aritmetik i\u015flemler, fonksiyon \u00e7a\u011fr\u0131lar\u0131 veya herhangi bir JavaScript ifadesi do\u011frudan dize i\u00e7ine g\u00f6m\u00fclebilir.<\/p>\n
\/\/ \u015eablon Dizesi ile dize i\u00e7ine de\u011fer yerle\u015ftirme\nconst isim = 'Ali';\nconst yas = 30;\nconst mesajSablon = <\/code>Merhaba, benim ad\u0131m ${isim} ve ben ${yas} ya\u015f\u0131nday\u0131m.;\nconsole.log(mesajSablon); \/\/ Merhaba, benim ad\u0131m Ali ve ben 30 ya\u015f\u0131nday\u0131m.<\/code><\/pre>\nBu \u00f6zellik, kodun daha temiz, daha okunabilir ve daha anla\u015f\u0131l\u0131r olmas\u0131n\u0131 sa\u011flar. Sadece de\u011fi\u015fkenler de\u011fil, her t\u00fcrl\u00fc JavaScript ifadesi kullan\u0131labilir:<\/p>\n
*   Aritmetik \u0130\u015flemler:<\/strong><\/p>\n
const fiyat = 10;\n    const miktar = 3;\n    const toplam = <\/code>Toplam maliyet: ${fiyat * miktar} TL.;\n    console.log(toplam); \/\/ Toplam maliyet: 30 TL.<\/code><\/pre>\n*   Fonksiyon \u00c7a\u011fr\u0131lar\u0131:<\/strong><\/p>\n
function selamlama(ad) {\n        return <\/code>Merhaba, ${ad}!;\n    }\n    const kullanici = 'Ay\u015fe';\n    const selamlamaMesaji = <\/code>Kullan\u0131c\u0131ya mesaj: ${selamlama(kullanici)};\n    console.log(selamlamaMesaji); \/\/ Kullan\u0131c\u0131ya mesaj: Merhaba, Ay\u015fe!<\/code><\/pre>\n*   Ternary Operat\u00f6rleri (Ko\u015fullu \u0130fadeler):<\/strong><\/p>\n
const durum = true;\n    const mesajDurum = <\/code>Durum: ${durum ? 'Aktif' : 'Pasif'};\n    console.log(mesajDurum); \/\/ Durum: Aktif<\/code><\/pre>\n*   Nesne \u00d6zellikleri ve Dizi Elemanlar\u0131:<\/strong><\/p>\n
const urun = { ad: 'Laptop', fiyat: 1200 };\n    const renkler = ['k\u0131rm\u0131z\u0131', 'mavi'];\n    const urunDetay = <\/code>\u00dcr\u00fcn ad\u0131: ${urun.ad}, Fiyat: ${urun.fiyat} TL, Mevcut renk: ${renkler[1]}.;\n    console.log(urunDetay); \/\/ \u00dcr\u00fcn ad\u0131: Laptop, Fiyat: 1200 TL, Mevcut renk: mavi.<\/code><\/pre>\nDize i\u00e7ine de\u011fer yerle\u015ftirme, \u00f6zellikle dinamik i\u00e7erik olu\u015ftururken (\u00f6rne\u011fin, bir web sayfas\u0131nda kullan\u0131c\u0131 ad\u0131n\u0131 g\u00f6sterme, bir e-posta tasla\u011f\u0131 olu\u015fturma) vazge\u00e7ilmez bir ara\u00e7 haline gelmi\u015ftir.<\/p>\n
\u0130\u00e7 \u0130\u00e7e \u015eablon Dizeleri (Nested Template Literals)<\/h3>\n\u00c7ok s\u0131k kullan\u0131lmasa da, \u015eablon Dizeleri i\u00e7 i\u00e7e de kullan\u0131labilir. Bu, \u00f6zellikle karma\u015f\u0131k veya dinamik olarak olu\u015fturulan dize par\u00e7ac\u0131klar\u0131n\u0131 birle\u015ftirmek gerekti\u011finde faydal\u0131 olabilir. \u0130\u00e7 i\u00e7e kullan\u0131m, bir \u015eablon Dizesi i\u00e7indeki bir ifadenin ( <\/code>${} i\u00e7inde) ba\u015fka bir \u015eablon Dizesi d\u00f6nd\u00fcrmesiyle ger\u00e7ekle\u015fir.<\/p>\n
const anahtarKelime = 'JavaScript';\nconst versiyon = 'ES6';\n\nconst icerik = <\/code>Bu makale ${anahtarKelime} hakk\u0131nda.\n${\u00d6zellikle ${versiyon} ile gelen yeniliklere odaklan\u0131lm\u0131\u015ft\u0131r.<\/code>};\n\nconsole.log(icerik);\n\/* \u00c7\u0131kt\u0131:\nBu makale JavaScript hakk\u0131nda.\n\u00d6zellikle ES6 ile gelen yeniliklere odaklan\u0131lm\u0131\u015ft\u0131r.\n*\/<\/code><\/pre>\nBu \u00f6rnekte, ikinci sat\u0131rdaki <\/code>${} ifadesi i\u00e7inde ba\u015fka bir \u015eablon Dizesi tan\u0131mlanm\u0131\u015ft\u0131r. Bu, daha mod\u00fcler ve okunabilir dize olu\u015fturma stratejileri geli\u015ftirmek i\u00e7in kullan\u0131labilir.<\/p>\n
Ters T\u0131rnak ve Dolar \u0130\u015fareti Ka\u00e7\u0131\u015f\u0131 (Escaping Backticks and Dollar Signs)<\/h3>\nBir \u015eablon Dizesi i\u00e7inde kelimenin tam anlam\u0131yla bir ters t\u0131rnak (<\/code> <\/code> `) veya bir dolar i\u015fareti ve a\u00e7\u0131l\u0131\u015f k\u00fcme parantezi (<\/code>${) kullanmak isterseniz, bu karakterleri ka\u00e7\u0131\u015f karakteri (<\/code>\\) ile belirtmeniz gerekir.<\/p>\n
*   Ters T\u0131rnak Ka\u00e7\u0131\u015f\u0131:<\/strong><\/p>\n
const mesaj = <\/code>Bu bir ters t\u0131rnak: \\.<\/code>;\n    console.log(mesaj); \/\/ Bu bir ters t\u0131rnak: .<\/code><\/pre>\n*   Dolar \u0130\u015fareti ve K\u00fcme Parantezi Ka\u00e7\u0131\u015f\u0131:<\/strong><\/p>\n
const fiyatBilgisi = <\/code>\u00dcr\u00fcn fiyat\u0131 \\$${100}.00 de\u011fil, sadece 100.00 TL.;\n    console.log(fiyatBilgisi); \/\/ \u00dcr\u00fcn fiyat\u0131 $100.00 de\u011fil, sadece 100.00 TL.<\/code><\/pre>\n    Bu \u00f6rnekte, <\/code>${100} ifadesi normal bir interpolasyon olarak i\u015flenirken, <\/code>\\$ ifadesi literal bir dolar i\u015fareti olarak yazd\u0131r\u0131lm\u0131\u015ft\u0131r.<\/p>\n
Etiketli \u015eablonlar (Tagged Templates)<\/h3>\n\u015eablon Dizelerinin en geli\u015fmi\u015f ve g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri \"Etiketli \u015eablonlar\"d\u0131r. Etiketli \u015eablonlar, bir \u015eablon Dizesini \u00f6zel bir fonksiyon arac\u0131l\u0131\u011f\u0131yla ayr\u0131\u015ft\u0131rman\u0131za (parse etmenize) olanak tan\u0131r. Bu fonksiyon, dizeyi olu\u015fturan statik metin par\u00e7alar\u0131n\u0131 ve dize i\u00e7ine yerle\u015ftirilen ifadelerin de\u011ferlerini al\u0131r.<\/p>\n
S\u00f6zdizimi, bir fonksiyon ad\u0131n\u0131n hemen ard\u0131ndan bir \u015eablon Dizesinin gelmesiyle olu\u015fur: <\/code>tagFonksiyonu <\/code>\u015fablon dizesi.<\/p>\n
function etiketleyici(strings, ...values) {\n    console.log(strings); \/\/ Dizelerin bir dizisi\n    console.log(values);  \/\/ \u0130fadelerin de\u011ferlerinin bir dizisi\n    return \"\u0130\u015flenmi\u015f dize!\";\n}\n\nconst isim = 'Mehmet';\nconst yas = 25;\nconst sonuc = etiketleyici<\/code>Merhaba, benim ad\u0131m ${isim} ve ben ${yas} ya\u015f\u0131nday\u0131m.;\n\nconsole.log(sonuc);\n\/* \u00c7\u0131kt\u0131:\n[ 'Merhaba, benim ad\u0131m ', ' ve ben ', ' ya\u015f\u0131nday\u0131m.', '' ]\n[ 'Mehmet', 25 ]\n\u0130\u015flenmi\u015f dize!\n*\/<\/code><\/pre>\n<\/code>etiketleyici fonksiyonu iki ana arg\u00fcman al\u0131r:
\n1.  <\/code>strings: Bu, \u015eablon Dizesindeki t\u00fcm statik metin par\u00e7alar\u0131n\u0131 i\u00e7eren bir dizidir. \u0130fade yerle\u015ftirme noktalar\u0131 bu diziyi b\u00f6ler. Yukar\u0131daki \u00f6rnekte <\/code>strings dizisi <\/code>[‘Merhaba, benim ad\u0131m ‘, ‘ ve ben ‘, ‘ ya\u015f\u0131nday\u0131m.’, ”] \u015feklindedir. Dikkat ederseniz, son eleman bo\u015f bir dizedir, \u00e7\u00fcnk\u00fc son ifadeden sonra metin devam etmemektedir.
\n2.  <\/code>…values: Bu, dize i\u00e7ine yerle\u015ftirilen t\u00fcm ifadelerin de\u011ferlerini i\u00e7eren bir dizidir. Rest parametresi (<\/code>…) kullan\u0131larak toplan\u0131r. Yukar\u0131daki \u00f6rnekte <\/code>values dizisi <\/code>[‘Mehmet’, 25] \u015feklindedir.<\/p>\n
Etiketli \u015eablonlar, dizeler \u00fczerinde \u00e7ok \u00e7e\u015fitli \u00f6zel i\u015flemler yapmak i\u00e7in kullan\u0131labilir.<\/p>\n
Etiketli \u015eablonlar\u0131n Kullan\u0131m Alanlar\u0131:<\/h4>\n*   Dize Temizleme (Sanitization) ve G\u00fcvenlik:<\/strong> Kullan\u0131c\u0131 girdilerini i\u00e7eren HTML dizelerini XSS (Cross-Site Scripting) sald\u0131r\u0131lar\u0131na kar\u015f\u0131 temizlemek i\u00e7in kullan\u0131labilir. \u00d6rne\u011fin, kullan\u0131c\u0131dan al\u0131nan verileri HTML'e yerle\u015ftirmeden \u00f6nce \u00f6zel karakterleri (<\/code><, <\/code>>, <\/code>&, <\/code>‘, <\/code>“) ka\u00e7\u0131\u015f karakterlerine d\u00f6n\u00fc\u015ft\u00fcrmek.<\/p>\n
function htmlEscape(str) {\n        return str.replace(\/&\/g, '&')\n                  .replace(\/<\/g, '<')\n                  .replace(\/>\/g, '>')\n                  .replace(\/'\/g, ''')\n                  .replace(\/\"\/g, '"');\n    }\n\n    function safeHTML(strings, ...values) {\n        let result = strings[0];\n        for (let i = 0; i < values.length; i++) {\n            result += htmlEscape(String(values[i])) + strings[i + 1];\n        }\n        return result;\n    }\n\n    const kullaniciYorumu = <\/code>