Etiketli Şablon İşlevleri
Şablon parçalarını etiket işlevleriyle işleyin.
Etiketli Şablon İşlevleri, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.
Etiket İşlevi Nedir
Etiketli şablon, işlev adının doğrudan bir şablon dizesinin önüne yerleştirildiği bir işlev çağrısıdır. İşlev, şablonun ayrıştırılmış parçalarını alır ve bunları dönüştürebilir.
function tag(strings, value) {
return strings[0] + value.toUpperCase() + strings[1]
}
console.log(tag(["Hi ", "!"], "bob"))Dizeler Dizisi
Bir etiket işlevinin aldığı first bağımsız değişken, sabit dize parçalarından oluşan bir dizidir. Bunlar, yer tutucuların arasında ve çevresinde bulunan metin parçalarıdır.
function tag(strings) {
return strings.join("|")
}
console.log(tag(["a", "b", "c"]))Değerler
Dizeler dizisinden sonra etiket işlevi, enterpolasyonla eklenen her değeri ayrı bir bağımsız değişken olarak alır. Kalan parametreleri kullanmak, bu değerleri bir dizi içinde toplar.
function tag(strings, ...values) {
return values.join(",")
}
console.log(tag(["", " and ", ""], "x", "y"))Dizeyi Yeniden Oluşturma
Tipik bir etiket, dizeler dizisini dolaşır ve her değeri parçaların arasına yerleştirerek istediğiniz dönüşümle son dizeyi yeniden oluşturur.
function tag(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? values[i] : "")
})
return out
}
console.log(tag(["A", "B", "C"], 1, 2))Dizelerin Uzunluk Kuralı
Dizeler dizisi, değerler dizisinden her zaman tam olarak bir öğe daha fazla içerir. Bazı parçalar boş olsa bile first yer tutucudan önce ve son yer tutucudan sonra metin bulunur.
function tag(strings, ...values) {
return "strings=" + strings.length + " values=" + values.length
}
console.log(tag(["", "", ""], 1, 2))Değerleri Dönüştürme
Etiket, değerlerin nasıl ekleneceğini denetlediği için onları biçimlendirebilirsiniz. Burada her sayısal değer eklenmeden önce ikiyle çarpılır.
function dbl(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? values[i] * 2 : "")
})
return out
}
console.log(dbl(["", " ", ""], 3, 4))Dize Olmayan Değerler Döndürme
Bir etiket işlevinin dize döndürmesi zorunlu değildir. Şablon parçalarından oluşturulan bir nesne veya dizi gibi herhangi bir değeri döndürebilir.
function parts(strings, ...values) {
return { strings: strings, values: values }
}
const r = parts(["a", "b"], 9)
console.log(r.values[0])raw Özelliği
Dizeler dizisi ayrıca, kaçış dizileri işlenmeden önceki dizeleri tutan bir raw özelliği taşır. String.raw bu şekilde çalışır.
console.log(String.raw({ raw: ["a\\n", "b"] }, "X"))Araya Yerleştirilen Değerleri Büyük Harfe Dönüştürme
Yaygın bir tanıtım etiketi, sabit metni değiştirmeden araya yerleştirilen her değeri büyük harfe dönüştürür.
function loud(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? String(values[i]).toUpperCase() : "")
})
return out
}
console.log(loud(["name is ", "."], "alice"))Etiketler Neden Kullanılır
Etiket işlevleri güçlü kalıplar sağlar: güvenilmeyen girdiden kaçışlama, uluslararasılaştırma, SQL veya sorgu oluşturma ve özel biçimlendirme. Bunların tümü şablon yapısı tarafından yönlendirilir.
function highlight(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? "[" + values[i] + "]" : "")
})
return out
}
console.log(highlight(["score: ", " pts"], 42))Değerleri Yok Sayma
Bir etiket, araya yerleştirilen değerleri tamamen yok sayıp yalnızca sabit bölümlere dayalı bir çıktı üretebilir; bu, çözümleme veya günlükleme için kullanışlıdır.
function onlyStatic(strings) {
return strings.filter(function (s) { return s.length > 0 }).join(" ")
}
console.log(onlyStatic(["Hello ", " world ", ""]))Hızlı Kontrol
Etiket işlevleriyle ilgili bilginizi sınayın.
Özet
Özet: Etiketli şablonlar, çözümlenmiş şablon bölümleriyle bir işlev çağırır.
- İlk bağımsız değişken dizeler dizisidir
- Kalan bağımsız değişkenler araya yerleştirilen değerlerdir
- Dizeler, değerlerden bir fazla öğe içerir
- raw özelliği işlenmemiş metni tutar
function tag(s, ...v) { return s[0] + v[0] }
console.log(tag(["go "], "fast"))Sıkça Sorulan Sorular
“Etiketli Şablon İşlevleri” dersi ücretsiz mi?
Evet — “Etiketli Şablon İşlevleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.
“Etiketli Şablon İşlevleri” dersinde ne öğreneceğim?
Şablon parçalarını etiket işlevleriyle işleyin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Etiketli Şablon İşlevleri” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Dize Aradeğiştirme Temelleri
- Çok Satırlı Dizeler
- Etiketli Şablon İşlevleri
- Etiketli Şablonların Pratik Kullanım Alanları