JavaScript'teki dizeler tarih boyunca sınırlıydı ve Python veya Ruby gibi dillerden gelmelerini bekleyebileceği özelliklerden yoksun kaldılar. ES6 Template Strings (Chrome 41 ve sonraki sürümlerde mevcuttur) bu ayarı tamamen değiştirin. Alana özgü dillerle (DSL'ler) dizeleri tanımlamanın bir yolunu sunarak aşağıdakileri daha iyi hale getirdiler:
- Dize interpolasyonu
- Yerleştirilmiş ifadeler
- Başarılı olmayan çok satırlı dizeler
- Dize biçimlendirmesi
- Güvenli HTML çıkışları, yerelleştirme ve daha fazlası için dize etiketleme.
Dizelere bugün bildiğimiz şekliyle başka bir özelliği doldurmak yerine, Şablon Dizeleri bu sorunları çözmek için bambaşka bir yol sunar.
Söz dizimi
Şablon Dizeleri, normal dizelerde alışık olduğumuz tek veya çift tırnak yerine arka tırnak işaretleri (``) kullanır. Dolayısıyla bir şablon dizesi aşağıdaki gibi yazılabilir:
var greeting = `Yo World!`;
Şu ana kadar Şablon Dizeleri bize normal dizelerden fazlasını vermedi. Bunu değiştirelim.
Dize Değiştirme
İlk gerçek avantajlarından biri dize değişimidir. Değiştirme işlemi, herhangi bir geçerli JavaScript ifadesini (örneğin, değişkenlerin eklenmesi dahil) almamıza olanak tanır ve bir Şablon Değişken Değeri içinde, sonuç aynı dizenin bir parçası olarak alınır.
Şablon Dizeleri, aşağıda gösterildiği gibi ${ } söz dizimini kullanarak dize değişikliği 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şiklikleri JavaScript ifadeleri olduğundan, değişken adlarından çok daha fazlasını değiştirebiliriz. Örneğin, okunabilir satır içi matematik işlemleri için ifade interpolasyonunu 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.
Bunlar, ifadelerin içindeki işlevler için de çok yararlıdır:
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 tüm ifade türlerinde sorunsuz bir şekilde ç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
Dizenizin içinde aksan işareti olmasını istiyorsanız ters eğik çizgi karakteri \ kullanılarak aşağıdaki gibi koddan kaçınılabilir:
var greeting = `\`Yo\` World!`;
Çok Satırlı Dizeler
JavaScript'teki çok satırlı dizeler, bir süredir bilgisayar korsanlığıyla ilgili geçici çözümler gerektirmektedir. Bu sorunların mevcut çözümleri, dizelerin tek bir satırda bulunması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";
Bunun çoğu modern JavaScript motorunda sorunsuz çalışması gerekse de, davranışın kendisi hâlâ küçük bir saldırıdır. Dize birleştirmeyi sahte çoklu satır desteği için de kullanabilirsiniz. Ancak bu durumda arzulanan bir şey ortaya çıkar:
var greeting = "Yo " +
"World";
Şablon Dizeleri çok satırlı dizeleri önemli ölçüde basitleştirir. Yeni satırları gerektiğinde olmaları yeterlidir. Aşağıda bir örnek verilmiştir:
Vurgu işareti söz diziminin içindeki boşluklar da dizenin bir parçası olarak kabul edilir.
console.log(`string text line 1
string text line 2`);
Etiketli Şablonlar
Şu ana kadar, dize yerine kullanmak ve çok satırlı dizeler oluşturmak için Şablon Dizelerini kullanmayı inceledik. Sundukları bir başka güçlü özellik de etiketli şablonlardır. Etiketli Ş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!`
Etiketli bir şablon dizesinin anlamı, normal bir dizenin anlamından çok farklıdır. Aslında, yukarıdakiler özel bir işlev çağrısı türüdür:
fn(["Hello ", "! You're looking ", " today!"], you, adjective);
(n + 1). bağımsız değişkenin, dize dizisindeki n'inci ve (n + 1). girişler arasında yapılan değişikliğe nasıl karşılık geldiğini unutmayın. Bu her türlü işlem için yararlı olabilir, ancak en basit yöntemlerden biri interpolasyon amaçlı değişkenlerde otomatik olarak çıkış yapılmasıdır.
Örneğin, şöyle bir HTML çıkış işlevi yazabilirsiniz:
html`<p title="${title}">Hello ${you}!</p>`
uygun değişkenlerin değiştirildiği ancak tüm HTML güvenli olmayan karakterlerinin değiştirildiği bir dize döndürür. Bunu yapalım. HTML çıkış işlevimiz iki bağımsız değişken alır: bir kullanıcı adı ve bir açıklama. Her ikisi de güvenli olmayan HTML karakterleri (', ", <, > ve &) içerebilir. Örneğin, kullanıcı adı "Domenic Denicola" ise ve yorum "& eğlenceli bir etiket" ise çıktıyı şu şekilde vermemiz gerekir:
<b>Domenic Denicola says:</b> "& is a fun tag"
Etiketli şablon çözümümüz aşağıdaki gibi 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 çıkış, biçimlendirme, yerelleştirme ve genel olarak daha karmaşık değişiklikler 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 ve üzeri beta, IE Tech Preview, Firefox 35 ve üstü sürümlerde ve io.js'dedir. Pratikte günümüzde üretimde kullanmak istiyorsanız bu araçlar Traceur ve 6to5 dahil olmak üzere başlıca ES6 Transpiler cihazlarında desteklenmektedir. Denemek isterseniz Chrome örnekleri deposundaki Şablon Dizeleri örneğimize göz atın. Ayrıca, günümüzde ES5 kullanarak çeşitli şablon dizelerine nasıl ulaşabileceğinizi gösteren ES6 Equivalents in ES5 konusu da ilginizi çekebilir.
Şablon Dizeleri, JavaScript'e birçok önemli özellik katar. Bunlar arasında dize ve ifade interpolasyonunun daha iyi yolları, çok satırlı dizeler ve kendi DSL'lerinizi oluşturma özelliği bulunur.
Sunulan en önemli özelliklerden biri, bu tür DSL'lerin yazılması için kritik bir özellik olan etiketli şablonlardır. Bunlar, bir Şablon Dizesinin parçalarını bağımsız değişken olarak alır ve siz de dizenizin son çıkışını belirlemek için dizeleri ve değişiklikleri nasıl kullanacağınıza karar verebilirsiniz.