ECMAScript 6, sınırlayıcı olarak backtick'i kullanan yeni bir dize değişmezi türü ile gelir. Bu değişmez değerler, daha sonra otomatik olarak ayrıştırılan ve değerlendirilen temel dize enterpolasyon ifadelerinin gömülmesine izin verir.
let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };
let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
"<p>I am " + person.age + " old</p>\n" +
"<strong>\"" + person.greeting + "\" is what I usually say</strong>";
let newHtmlStr =
`<p>My name is ${person.name},</p>
<p>I am ${person.age} old</p>
<p>"${person.greeting}" is what I usually say</strong>`;
console.log(usualHtmlStr);
console.log(newHtmlStr);
Gördüğünüz `gibi, dizgi değişmezi olarak yorumlanan bir dizi karakteri kullandık , ancak formun herhangi bir ifadesi ${..}hemen satır içi ayrıştırılıp değerlendirildi.
Enterpolasyonlu dize değişmezlerinin gerçekten güzel bir yararı, birden çok satıra bölünmesine izin verilmesidir:
var Actor = {"name": "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log(text);
// Now is the time for all good men
// to come to the aid of their
// country!
Enterpolasyonlu İfadeler
Geçerli ${..}çağrıların, işlev çağrıları, satır içi işlev ifade çağrıları ve hatta diğer enterpolasyonlu dize hazır değerleri de dahil olmak üzere enterpolasyonlu bir dize değişmezinde görünmesine izin verilir !
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper("warm")} welcome
to all of you ${upper(`${who}s`)}!`;
console.log(text);
// A very WARM welcome
// to all of you READERS!
Burada, iç `${who}s`enterpolasyonlu dize değişmezi, whodeğişkeni "s"dize ile birleştirirken, aksine, bizim için biraz daha kolay oldu who + "s". Ayrıca bir not tutmak için enterpolasyonlu bir dize hazır bilgisi, göründüğü yerde sadece dinamik olarak kapsamlandırılır, herhangi bir şekilde dinamik olarak kapsamlandırılmaz:
function foo(str) {
var name = "foo";
console.log(str);
}
function bar() {
var name = "bar";
foo(`Hello from ${name}!`);
}
var name = "global";
bar(); // "Hello from bar!"
HTML için şablon değişmezini kullanmak, rahatsızlığı azaltarak kesinlikle daha okunabilir.
Düz eski yol:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
ECMAScript 6 ile:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- Dizeniz birden çok satıra yayılabilir.
- Tırnak karakterlerinden kaçmak zorunda değilsiniz.
- '">' Gibi gruplamalardan kaçınabilirsiniz.
- Artı operatörünü kullanmak zorunda değilsiniz.
Etiketli Şablon Değişmezleri
Bir şablon dizesini de etiketleyebiliriz, bir şablon dizesi etiketlendiğinde değişmez değerler ve ikameler sonuçta ortaya çıkan değeri döndüren işleve geçirilir.
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`; //["test"]
function myTaggedLiteral(strings, value, value2) {
console.log(strings, value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Burada yayma işlecini birden çok değer iletmek için kullanabiliriz. İlk argüman - buna dizeler adını verdik - tüm düz dizelerin (enterpolasyonlu ifadeler arasındaki şeyler) bir dizisidir.
Sonra kullanarak bir dizi olarak adlandırılan değerlere sonraki tüm argümanları toplayıp ... gather/rest operatorkurs ait olabilir yukarıda yaptığımız gibi parametre dizeleri (şu bireysel adlandırılmış parametreleri olarak bunları bırakmış olsa value1, value2vs.).
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Değerler dizimize toplanan bağımsız değişkenler, dizgi değişmezinde bulunan önceden değerlendirilmiş enterpolasyon ifadelerinin sonuçlarıdır. Etiketli dize hazır bilgisi, enterpolasyonlar değerlendirildikten sonra, ancak son dize değeri derlenmeden önce bir işlem adımı gibidir; bu, değişmez değerden dize oluşturma üzerinde daha fazla kontrol sahibi olmanızı sağlar. Yeniden kullanılabilir şablonlar oluşturma örneğine bakalım.
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${'name'} is a Actor</h3>
<p>You can find his movies at ${'store'}.</p>
</article>`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
Ham Dizeler
Etiket işlevlerimiz, dizeler olarak adlandırdığımız bir dizi olan ilk argümanı alır. Ancak ek veri de var: tüm dizelerin ham işlenmemiş versiyonları. Bu ham dize değerlerine şu .rawözelliği kullanarak erişebilirsiniz :
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hello\nWorld`;
Gördüğünüz gibi, dizenin ham sürümü kaçan \ndiziyi korurken, dizenin işlenmiş sürümü ona çıkışsız bir gerçek yeni satır gibi davranır. ECMAScript 6 dize etiketi olarak kullanılabilir yerleşik bir işleve sahiptir: String.raw(..). Sadece dizelerin ham sürümlerinden geçer:
console.log(`Hello\nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"