JavaScript Academy · Pelajaran

Fungsi Templat Bertag

Proses bagian templat dengan fungsi tag.

Fungsi Templat Bertag adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa Itu Fungsi Penanda

Templat berpenanda adalah pemanggilan fungsi yang menempatkan nama fungsi tepat sebelum literal templat. Fungsi tersebut menerima bagian-bagian templat yang telah diuraikan dan dapat mengubahnya.

function tag(strings, value) {
  return strings[0] + value.toUpperCase() + strings[1]
}
console.log(tag(["Hi ", "!"], "bob"))

Larik Teks

Argumen pertama yang diterima fungsi penanda adalah larik bagian teks literal. Bagian-bagian ini adalah potongan teks yang berada di antara dan di sekitar penampung.

function tag(strings) {
  return strings.join("|")
}
console.log(tag(["a", "b", "c"]))

Nilai-Nilai

Setelah larik teks, fungsi penanda menerima setiap nilai hasil interpolasi sebagai argumen terpisah. Dengan menggunakan parameter sisa, Anda dapat mengumpulkannya ke dalam sebuah larik.

function tag(strings, ...values) {
  return values.join(",")
}
console.log(tag(["", " and ", ""], "x", "y"))

Merangkai Ulang Teks

Penanda pada umumnya menelusuri larik teks dan menyisipkan setiap nilai di antara bagian-bagiannya, lalu membangun ulang teks akhir dengan transformasi apa pun yang Anda inginkan.

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))

Aturan Panjang Larik Teks

Larik teks selalu memiliki tepat satu elemen lebih banyak daripada larik nilai. Selalu ada teks sebelum penampung pertama dan setelah penampung terakhir, meskipun beberapa bagian kosong.

function tag(strings, ...values) {
  return "strings=" + strings.length + " values=" + values.length
}
console.log(tag(["", "", ""], 1, 2))

Mengubah Nilai

Karena fungsi penanda mengatur cara nilai disisipkan, Anda dapat memformatnya. Di sini setiap nilai numerik digandakan sebelum disisipkan.

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))

Mengembalikan Nilai Selain Teks

Fungsi penanda tidak harus mengembalikan teks. Fungsi tersebut dapat mengembalikan nilai apa pun, seperti objek atau larik yang dibangun dari bagian-bagian templat.

function parts(strings, ...values) {
  return { strings: strings, values: values }
}
const r = parts(["a", "b"], 9)
console.log(r.values[0])

Properti raw

Larik teks juga memiliki properti raw, yang menyimpan teks tanpa memproses urutan pelolosan. Inilah cara kerja String.raw.

console.log(String.raw({ raw: ["a\\n", "b"] }, "X"))

Mengubah Interpolasi Menjadi Huruf Besar

Tag demo yang umum mengubah setiap nilai interpolasi menjadi huruf besar, sementara teks statis tetap utuh.

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"))

Mengapa Menggunakan Tag

Fungsi tag memungkinkan pola yang kuat: pelolosan input yang tidak tepercaya, internasionalisasi, pembuatan SQL atau kueri, dan pemformatan khusus, semuanya didorong oleh struktur templat.

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))

Mengabaikan Nilai

Tag dapat memilih untuk sepenuhnya mengabaikan nilai interpolasi dan menghasilkan keluaran hanya berdasarkan bagian statis, yang berguna untuk analisis atau pencatatan.

function onlyStatic(strings) {
  return strings.filter(function (s) { return s.length > 0 }).join(" ")
}
console.log(onlyStatic(["Hello ", " world ", ""]))

Pemeriksaan Singkat

Uji pengetahuan Anda tentang fungsi tag.

Ringkasan

Ringkasan: Templat bertag memanggil fungsi dengan bagian templat yang telah diurai.

Argumen pertama adalah larik string
Argumen yang tersisa adalah nilai interpolasi
Larik string memiliki satu elemen lebih banyak daripada nilai
Properti raw berisi teks yang belum diproses

function tag(s, ...v) { return s[0] + v[0] }
console.log(tag(["go "], "fast"))

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Fungsi Templat Bertag” gratis?

Ya — teks lengkap “Fungsi Templat Bertag” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Fungsi Templat Bertag”?

Proses bagian templat dengan fungsi tag. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Fungsi Templat Bertag” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy