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 = `

${ogrenci.adi}

${ogrenci.sinif}

${ogrenci.dersi}

${ogrenci.notu}

`; 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ınlacaktır.

883

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.