ES6 Template Literals JavaScript'te Nasıl Kullanılır?
Programlamada terim “kelimesi kelimesine” ifade eder değerlerin gösterimi kodunda. Örneğin, bir dize değeri ile not etmek dize değişmez çift veya tek tırnak içine alınmış karakterlerdir ("Foo", 'bar', "Bu bir dize!").
Şablon değişmezleri tanıtıldı ECMAScript 6. String değişmezlerine oldukça benzer şekilde çalışırlar; Üretirler şablon değerleri ve ham şablon değerleri, ikisi de dizgedir.
Ancak, dize değişmezlerinin aksine, şablon değişmezleri çok çizgili dizeler, bir dize değişmezinde yalnızca elde edebileceğiniz bir şey yeni satır karakterleri ekleme (\ n) ona.
Şablon değişmezleri de olabilir diğer değerlere sahip dizeler oluşturmak kullanmak zorunda kalacağınız (ifadelerden türetilmiş) artı operatör bir dizgede"kimliğiniz:" + idNo; nerede kimlik Numarası sayısal bir değere sahip değişken bir ifadedir).
Tüm bu özellikler şablon değişmezlerini daha fazla tercih edilmesini sağlar dize değerleri oluşturmak.
Şablon değişmezlerinin sözdizimi
Bir şablon değişmezinin sınırlayıcısı, backtick ' karakter (ayrıca backquote karakteri veya mezar aksanı sembolü olarak da bilinir). Değişmez içindeki bir ifade (değeri çalışma zamanında değerlendirildi ve değişmez tarafından üretilen nihai değere dahil) kıvırcık parantez Birlikte önceki dolar işareti $.
'string $ someExpression daha fazla string'
İşte bazı şablon değişmezlerine örnekler üreten değişmemiş, ikame edilmiş (ifadeleri, değerlendirilen değerleriyle değiştirildi) ve Multi-kaplı Teller.
console.log ( 'HELLO'); // merhaba var adı = "Joan"; console.log ('hello $ name'); // merhaba Joan console.log ('Sevgili Joan, Hoş Geldiniz.'); // Sevgili Joan, // Hoşgeldiniz. Kaçan ve ham şablon değerleri
Bir hazır bilgi şablonunda ' (Ters tırnak), \ (ters eğik çizgi) ve $ (dolar işareti) karakterleri kaçmalı kullanmak kaçış karakteri \ eğer şablon değerlerine dahil edileceklerse.
Varsayılan olarak, bir şablon değişmezdeki tüm kaçış dizileri ihmal. Çıkışı içine eklemek istiyorsanız, onu kullanmanız gerekir. ham şablon değeri.
console.log ('işaretlemedeki satır içi kodu: \' code \ "); // işaretlemedeki satır içi kodu: 'code' var name =" Joan "; konsol.log ('hello \ $ name.'); / / hello $ isim. konsol.log (String.raw'hello \ $ name. '); // hello \ $ isim. String.raw yöntem ham şablon değerlerini verir (Bir değişmez şablonun ham dizgi biçimi). Yukarıdaki kodda, işlev çağrısı çiğ yöntem olarak adlandırılır “etiketli şablon”.
Etiketli şablonlar
Etiketli bir şablon işlev çağrısı nerede, olağan parantezlerin yerine (isteğe bağlı parametrelerle) işlev adının yanı sıra, hazır bir şablon var işlevin argümanlarını aldığı.
Yani, böyle bir işlevi çağırmak yerine:
fan (ArgumentsForFoo);
Buna şöyle denir:
foo'ATemplateStringProvidingArgumentsForFoo ';
İşlev foo denir etiket işlevi. Hazır şablondan alınan ilk argüman bir dizi aradı şablon nesnesi.
Şablon nesnesi (bir dizi) tutar tüm dize değerleri hazır şablondan yorumlanmış ve bir çiğ tutan özellik (başka bir dizi) tüm ham (çıkışsız) dize değerleri aynı kelimeden yorumlanmış.
Template nesnesinin ardından, tag işlevinin argümanları hepsi değerlendirilir dış değerler bu değişmezde (kaşlı ayraçlar içine alınmış olanlar) $ ).
Aşağıdaki kodda, foo işlevi için yaratıldı bağımsız değişkenlerini çıkar. İşlev daha sonra çağrılır. etiketli şablonda, İki ifadeyi taşıyan bir hazır bilgi şablonu ile (isim ve İD).
var name = "John"; var id = 478; foo'hello $ isim. kimliğiniz: $ id. '; foo () console.log ([argümanlar [0]) işlevi; // Dizi ["merhaba", ". Kimliğiniz:", "." ] console.log (bağımsız değişkenler [1]); // John console.log (argümanlar [2]); // 478
Çıktılan ilk argüman şablon nesnesi kelimenin tam anlamıyla yorumlanan tüm dizeleri taşıyan, ikinci ve üçüncü argümanlar değerlendirilen değerler ifadelerin, isim ve İD.
çiğ özellik
Daha önce belirtildiği gibi, şablon nesnesinin bir özellik denir çiğ hangi bir dizi içeren tüm ham (çıkışsız) dize değerleri kalıptan yorumlanır. Bu şekilde erişebilirsiniz çiğ özelliği:
var name1 = "John", name2 = "Joan"; foo'hello \ $ name1, $ name2, ikiniz de nasılsınız? '; foo () console.log ([argümanlar [0]) işlevi; // Array ["hello $ name1,", ", ikiniz nasılsınız?"] Console.log (arguments [0] .raw); // Array ["hello \ $ name1,", ", ikiniz de nasılsınız?"] Console.log (arguments [1]); // Joan
Etiketli şablon örneklerini kullanın
Etiketli şablonlar, gerektiğinde kullanışlıdır. dizeyi kırmak Bir URL'de veya bir dili ayrıştırırken çoğu zaman olduğu gibi ayrı bölümler halinde. Bir koleksiyon bulacaksınız burada etiketli şablon örnekleri.
IE dışında, şablon değişmezleri tüm büyük tarayıcılarda desteklenir.
Aşağıda, bazı etiket işlevi örneklerini bulabilirsiniz. farklı imzalar Argümanları temsil eden:
var name = "John"; foo'hello $ name, ikiniz de nasılsınız? '; bar'hello $ name, ikiniz de nasılsınız? '; foo işlevi (… args) console.log (args); // Array [Array ["merhaba", ", ikiniz nasılsınız?"], "John"] fonksiyon çubuğu (strVals,… exprVals) console.log (strVals); // Dizi ["merhaba", ", ikiniz de nasılsınız?" ] console.log (exprVals); // Dizi ["John"]
İçinde bar işlev, ilk parametre (strVals) şablon nesnesi ve ikincisi (spread sözdizimini kullanan) toplanan bir dizidir. değerlendirilen tüm ifade değerleri hazır bilgi şablonundan fonksiyona geçti.
Dizeyi bir araya getir
Eğer istersen cümlenin tamamını al (değişmezden türetilmiş) tag işlevi içinde, tüm değerleri birleştir şablon dizelerini taşıyan dizilerin ve değerlendirilen ifade değerlerinin listesi. Bunun gibi:
function foo (strs,… exprs) // değişmeze dahil edilmiş ifadeler varsa if (exprs.length! == 0) var n = strs.length - 1, result = "; (var i = 0 için) ; ben < n; i++) result += strs[i] + exprs[i]; result += strs[n]; console.log(result); //"Hello John." // if there are no expressions included in the literal else console.log(strs[0]); name = 'John'; foo'Hello $name.';
STRler dizi tutar tüm ipler değişmezde bulundu ve exprs tutar değerlendirilen tüm ifade değerleri kelimenin tam anlamıyla.
Bir ifade değeri bile mevcutsa, her bir dizi değerini birleştirir. STRler (sonuncusu hariç) aynı endeks değerine sahip exprs. Sonra, sonuna, son değerini ekleyin. STRler birleştirilmiş dizeye dizi, tam bir cümle kurma bu yoldan.
