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ı:

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:

Ç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
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

9913

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.