javaScript Template Literal

Literal kullanılan değer anlamına gelir. Literal, değişkenler tarafından kullanılan bir değerdir. Değerler bir integer, float veya string olabilir.

ES6'da tanıtılan Template Literal, bir dize oluşturmanın yeni bir yoludur.

Template(Şablon) Literaller, gömülü ifadelere izin veren dize değişmezleridir. Çok satırlı dizeleri ve dize enterpolasyon özelliklerini bunlarla kullanabilirsiniz. ES 2015 açıklamasından önceki sürümlerinde "Tamplate string" olarak adlandırıldılar.

Şimdiye kadar dizeler için tek / çift tırnak kullanmışınızdır. Onlarla ilgili problem, karşılık gelen alıntılardan kaçmanız ve enterpolasyonun desteklenmemesi. Ancak, kurtarma için, ES 2015 (ES6) olan en son JavaScript sürümü, şablon literal kelimelerini JavaScript dilinin bir parçası olarak standartlaştırdı.

Bir şablon değişmezi oluşturmak için, tek tırnaklar ( ' ) veya çift tırnak ( " ) tırnak işaretleri yerine backtick( ` ) karakterini kullanırız. Bu yeni bir dizi oluşturacak ve istediğimiz şekilde kullanabiliriz.

ES6'da, iki türden literal tanıtıldı:

• Dize birleştirme ve dize gömme ifadesi için Şablon Literalleri
• Etiketli Şablonları güçlü dize dönüşümleri için kullanılabilir. Şablon dizesinden önce bir fonksiyon adı yerleştirerek Etiketli Şablon oluşturursunuz.

Backtick(ters tırnak) Klavyenizin altgr + , tuşlarına basınca çıkar.

Kullanımı:

let Metin = `Bu bir template literal`;

Template Literalleri temel olarak aşağıdaki amaçlar için kullanılır:

• Dize birleştirme
• Çok satırlı dizeleri tanımlamak için harika bir sözdizimi sunarlar.
• Dizeler içinde değişkenler ve ifadeler enterpolasyonu için kolay bir yol sağlar.
• Şablon etiketleri içeren DSL(Dynamic Script Loading)'ler oluşturmaya izin veriyor.

ÇOK SATIRLI DİZELER

Template Literals ile ilgili en önemli şey, artık çok satırlı dizeler oluşturabileceğimiz! Geçmişte, bir dizinin birden çok satırda olmasını istiyorsak, "\n" yeni satır karakterini kullanmak zorundaydık .

console .log ( "metin satırı 1 \n" +

 "metin satırı 2" );

// "metin satırı 1 

// metin satırı 2"

Bir Template Literal, backtick ile açıldığında, yeni bir satır oluşturmak için enter tuşuna basmanız yeterlidir, özel bir karakter içermez ve şu şekilde oluşturulur:

console.log ( `dize metin satırı 1 

               dize metin satırı 2 ` );
// "dize metin satırı 1 
// dize metin satırı 2"

İNTERPOLASYON

İnterpolasyon, dizenin içinde değişkenleri kullanmak anlamına gelir.

Normal dizeler içine ifadeler gömmek için aşağıdaki sözdizimini kullanırsınız:

var a = 5 ;
var b = 10 ;

var x = a+b;
var y =2*a+b;

console.log ("5 + 10 toplamı..:" +x+ " sonuç..:"+y);

Template literal, değişkenleri ve ifadeleri dizelere dönüştürmek için kolay bir yol sağlar.

${...} sözdizimini kullanarak bunu yaparsınız :

var a = 5 ;
var b = 10 ;

console.log (`${a}+${b} toplam.:"15" sonuç.:'${2*a+b}'`);

//5 + 10 toplamı..:"15"  sonuç..:'20'

Örnek:

function test(a,b){

 var result = `${a} ${a>b? "Büyüktür": "Küçüktür"} ${b}'den`;

 return result;
}
console.log(test(5, 8));//5 Küçüktür 8'den

console.log(test(7, 2));//7 Büyüktür 2'den 
 

HTML şablonu

Çok satırlı dizeleri kullanmak ve dizelerimize içerik eklemek için şablon ifadeleri kullanmak, kodumuzdaki HTML şablonlarını kullanmayı çok kolaylaştırır.

Aşşagıdaki kodları </body> etiketi altına <script> etiketi açın ve kopyalayın.

const ogrenci = {
  adi: 'Ali',
  sinif: '9/A',
  dersi: 'Matematik',
  notu: 90
}


const test = `
<div class="person">
 <h2>
     ${ogrenci.adi}
 </h2>
  <p style="color:blue">${ogrenci.sinif}</p>
  <p style="color:blue">${ogrenci.dersi}</p>
  <p class="notu">${ogrenci.notu}</p>
</div>
`;

document.body.innerHTML = test;

JavaScript'te güzel ve kullanımı kolay şablonlar oluşturmak için artık Hazır kütüphaneleri kullanmanız gerekmiyor.

Etiketli Şablon Literalleri

Etiketlenmiş şablon literali, dizeleri ve ifadeleri parametre olarak alan ve bu parametrelere dayalı bir değer döndüren fonksiyondur.

Dizeleri oluşturma ve ayrıştırma ile ilgili birçok görevi basitleştiren bir API.

Yani bir template literal enterpolasyonlu çok satırlı bir dizeyse, etiketlenmiş bir Template literal, bu dizgeyi ve enterpolasyon yoluyla iletilen değerleri işlemenin bir yoludur.

Daha gelişmiş bir Template(şablon) hazır bilgi biçimi Template Literal'le etiketlenir . Etiketler, Template literal bir fonksiyonla ayrıştırmanıza olanak tanır. Bir etiket fonksiyonun ilk argümanı bir dizi, dize değeri içerir. Kalan argümanlar enterpolasyon değişkenidir. fonksiyonun Sonunda, manipüle edilen string'i çıktı olarak döndürür veya tamamen farklı bir şey döndürebilir. Etiket için kullanılan fonksiyonun adını, istediğiniz herhangi bir ad verebilirsiniz.

Template lieteral Tag'ı(Etiket) destekler. Bir dizeye nasıl dönüştürüldüğünü kontrol etmek için Şablon yetkilerinin önüne bir fonksiyon adı yerleştirebiliriz .

tag`Merhaba ${name} Hoş geldiniz ! ${country}'`;

Biz bu gibi bir Etiket fonksiyonu oluşturabilir ve bu Template literal değerler geçirebilirsiniz. Etiket fonksiyonu aşağıdaki parametreleri alacak.

function tag(string, ...variables) {}

Yukarıdaki örnek aslı, Şöyle olacak

function tag(['Merhaba ','Hoş geldiniz', ''ya'],['Ali', 'Ankara']) {}

Örnek:

function tag(string, ...variable) {
 
console.log(string[0]); //merhaba

console.log(string[1]);// hoş geldiniz

console.log(string[2]);// 'ya'

console.log(variable[0]); // Ali

console.log(variable[1]); // Ankara

return `${string[0]}${variable[0]}${string[1]}${variable[1]}${string[2]}`;
}

const name = "Ali";
const country = "Ankara";
const result = tag`Merhaba ${name} Hoş geldiniz ${country}'ya`;
console.log(result);

Örnek:

function test(strings, ...values) {
 console.log(strings[0] === 'a'); //false
 console.log(strings[0] === 'a ');//true
 console.log(strings[1] === 'b'); //true
 console.log(values[0] === 0); //false
 return 'hangileri true';
}
var x = test `a ${ 45 }b`;
console.log(x);
  

Tarayıcı Desteği

Element
<T. Literal>	41	12	34	9	28