JavaScript'teki dizeler, Python veya Ruby gibi dillerden beklenen özelliklere sahip olmadığından geçmişte sınırlıydı. ES6 Template Strings (Chrome 41 ve sonraki sürümlerde kullanılabilir) bu durumu temelden değiştirir. Bu özellik, alan adlarına özgü dillerle (DSL'ler) dizeler tanımlama olanağı sunarak daha iyi sonuçlar elde etmenizi sağlar:
- Dize interpolasyonu
- Yerleştirilmiş ifadeler
- Çözüm olmadan çok satırlı dizeler
- Dize biçimlendirmesi
- Güvenli HTML kaçışı, yerelleştirme ve daha fazlası için dize etiketleme.
Şablon dizeleri, günümüzde bildiğimiz dizelere bir özellik daha eklemek yerine bu sorunları çözmek için tamamen farklı bir yöntem sunar.
Söz dizimi
Şablon dizeleri, normal dizelerde kullandığımız tek veya çift tırnak yerine ters tırnak (``) kullanır. Bu nedenle, bir şablon dizesi aşağıdaki gibi yazılabilir:
var greeting = `Yo World!`;
Şimdiye kadar, şablon dizeleri bize normal dizelerin sunduğundan daha fazlasını sunmadı. Bunu değiştirelim.
Dize Değiştirme
İlk gerçek avantajlarından biri dize değiştirme özelliğidir. Değiştirme, herhangi bir geçerli JavaScript ifadesini (örneğin, değişkenlerin eklenmesi) almamıza olanak tanır ve Şablon Literali içinde sonuç aynı dizenin bir parçası olarak çıkışa verilir.
Şablon dizeleri, aşağıdaki örnekte gösterildiği gibi ${ } söz dizimi kullanılarak dize değiştirme için yer tutucular içerebilir:
// Simple string substitution
var name = "Brendan";
console.log(`Yo, ${name}!`);
// => "Yo, Brendan!"
Şablon dizelerindeki tüm dize değiştirmeleri JavaScript ifadeleri olduğundan değişken adlarından çok daha fazlasını değiştirebiliriz. Örneğin, aşağıda okunabilir satır içi matematik için yerleştirmek üzere ifade enterpolasyonu kullanabiliriz:
var a = 10;
var b = 10;
console.log(`JavaScript first appeared ${a+b} years ago. Wow!`);
//=> JavaScript first appeared 20 years ago. Wow!
console.log(`The number of JS MVC frameworks is ${2 * (a + b)} and not ${10 * (a + b)}.`);
//=> The number of JS frameworks is 40 and not 200.
Ayrıca, ifadelerdeki işlevler için de çok faydalıdırlar:
function fn() { return "I am a result. Rarr"; }
console.log(`foo ${fn()} bar`);
//=> foo I am a result. Rarr bar.
${}, üye ifadeleri ve yöntem çağrıları da dahil olmak üzere her türlü ifadeyle sorunsuz çalışır:
var user = {name: 'Caitlin Potter'};
console.log(`Thanks for getting this into V8, ${user.name.toUpperCase()}.`);
// => "Thanks for getting this into V8, CAITLIN POTTER";
// And another example
var thing = 'template strings';
console.log(`Say hello to ${thing}.`);
// => Say hello to template strings
Dizinizde ters tırnak kullanmanız gerekiyorsa ters eğik çizgi karakteri \ ile aşağıdaki şekilde kod dışında bırakılabilir:
var greeting = `\`Yo\` World!`;
Çok Satırlı Dizeler
JavaScript'teki çok satırlı dizeler bir süredir geçici çözümler gerektiriyordu. Mevcut çözümler, dizelerin tek bir satırda olmasını veya her yeni satırdan önce \ (ters eğik çizgi) kullanılarak çok satırlı dizelere bölünmesini gerektirir. Örneğin:
var greeting = "Yo \
World";
Bu yöntem çoğu modern JavaScript motorunda sorunsuz çalışsa da davranışın kendisi hâlâ biraz hack'tir. Çok satırlı desteği taklit etmek için dize birleştirme de kullanılabilir ancak bu da aynı şekilde eksik kalır:
var greeting = "Yo " +
"World";
Şablon dizeleri, çok satırlı dizeleri önemli ölçüde basitleştirir. Gerekli yerlere yeni satırlar eklemeniz yeterlidir. Aşağıda bununla ilgili bir örnek verilmiştir:
Ters tırnak söz diziminin içindeki tüm boşluklar da dizenin bir parçası olarak kabul edilir.
console.log(`string text line 1
string text line 2`);
Etiketlenmiş Şablonlar
Şimdiye kadar, dize değiştirme ve çok satırlı dizeler oluşturmak için şablon dizelerini kullanmayı inceledik. Bu platformların sunduğu bir diğer güçlü özellik ise etiketlenmiş şablonlardır. Etiketlenmiş şablonlar, şablon dizesinin önüne bir işlev adı yerleştirerek şablon dizesini dönüştürür. Örneğin:
fn`Hello ${you}! You're looking ${adjective} today!`
Etiketlenmiş bir şablon dizesinin semantiği, normal bir şablon dizesinin semantiğinden çok farklıdır. Bunlar aslında özel bir işlev çağrısı türüdür: Yukarıdaki ifade, aşağıdaki gibi "basitleştirilir".
fn(["Hello ", "! You're looking ", " today!"], you, adjective);
(n + 1). bağımsız değişkenin, dize dizisindeki n. ve (n + 1). girişler arasında gerçekleşen değiştirmeye karşılık geldiğini unutmayın. Bu özellik, her türlü durumda faydalı olabilir ancak en basit kullanım alanlarından biri, enterpolasyon yapılan değişkenlerin otomatik olarak kaçış karakteriyle değiştirilmesidir.
Örneğin, HTML karakterlerinden kaçma işlevi yazabilirsiniz.
html`<p title="${title}">Hello ${you}!</p>`
Uygun değişkenlerin yerine konduğu ancak HTML'de güvenli olmayan tüm karakterlerin değiştirildiği bir dize döndürür. Hadi yapalım. HTML kaçış işlevimiz iki bağımsız değişken alır: kullanıcı adı ve yorum. Her ikisi de HTML'de güvenli olmayan karakterler (yani ', ", <, > ve &) içerebilir. Örneğin, kullanıcı adı "Domenic Denicola" ve yorum "& is a fun tag" ise şu çıkışı vermeliyiz:
<b>Domenic Denicola says:</b> "& is a fun tag"
Bu nedenle, etiketlenmiş şablon çözümümüz şu şekilde yazılabilir:
// HTML Escape helper utility
var util = (function () {
// Thanks to Andrea Giammarchi
var
reEscape = /[&<>'"]/g,
reUnescape = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g,
oEscape = {
'&': '&',
'<': '<',
'>': '>',
"'": ''',
'"': '"'
},
oUnescape = {
'&': '&',
'&': '&',
'<': '<',
'<': '<',
'>': '>',
'>': '>',
''': "'",
''': "'",
'"': '"',
'"': '"'
},
fnEscape = function (m) {
return oEscape[m];
},
fnUnescape = function (m) {
return oUnescape[m];
},
replace = String.prototype.replace
;
return (Object.freeze || Object)({
escape: function escape(s) {
return replace.call(s, reEscape, fnEscape);
},
unescape: function unescape(s) {
return replace.call(s, reUnescape, fnUnescape);
}
});
}());
// Tagged template function
function html(pieces) {
var result = pieces[0];
var substitutions = [].slice.call(arguments, 1);
for (var i = 0; i < substitutions.length; ++i) {
result += util.escape(substitutions[i]) + pieces[i + 1];
}
return result;
}
var username = "Domenic Denicola";
var tag = "& is a fun tag";
console.log(html`<b>${username} says</b>: "${tag}"`);
//=> <b>Domenic Denicola says</b>: "& is a fun tag"
Diğer olası kullanımlar arasında otomatik kaçış, biçimlendirme, yerelleştirme ve genel olarak daha karmaşık değiştirmeler yer alır:
// Contextual auto-escaping
qsa`.${className}`;
safehtml`<a href="${url}?q=${query}" onclick="alert('${message}')" style="color: ${color}">${message}</a>`;
// Localization and formatting
l10n`Hello ${name}; you are visitor number ${visitor}:n! You have ${money}:c in your account!`
// Embedded HTML/XML
jsx`<a href="${url}">${text}</a>` // becomes React.DOM.a({ href: url }, text)
// DSLs for code execution
var childProcess = sh`ps ax | grep ${pid}`;
Özet
Şablon dizeleri Chrome 41 beta+, IE Tech Preview, Firefox 35+ ve io.js'de kullanılabilir. Pratik olarak, bunları bugün üretimde kullanmak isterseniz Traceur ve 6to5 dahil olmak üzere başlıca ES6 Transpiler'larda desteklenir. Bu özellikleri denemek isterseniz Chrome örnekleri deposundaki Template Strings örneğimize göz atın. Ayrıca, ES5'teki ES6 Karşılıkları başlıklı makaleyi de inceleyebilirsiniz. Bu makalede, ES5 kullanarak bugün Şablon Dizeleri'nin getirdiği bazı kolaylıkların nasıl elde edileceği gösterilmektedir.
Şablon dizeleri, JavaScript'e birçok önemli özellik kazandırır. Bunlar arasında dize ve ifade enterpolasyonu yapmanın daha iyi yolları, çok satırlı dizeler ve kendi DSL'lerinizi oluşturma özelliği yer alır.
Bu araçların sunduğu en önemli özelliklerden biri, etiketlenmiş şablonlardır. Bu özellik, bu tür DSL'lerin oluşturulması için kritik öneme sahiptir. Şablon dizelerinin bölümlerini bağımsız değişken olarak alırlar. Ardından, dizelerin ve değiştirmelerin nihai çıktısını belirlemek için bunları nasıl kullanacağınıza karar verebilirsiniz.