0Pricing
JavaScript Academy · Pelajaran

Kasus Penggunaan Praktis Templat Bertag

Buat HTML aman dan string bergaya dengan tag.

Kasus Penggunaan Praktis Templat Bertag adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Tag di Dunia Nyata

Templat bertag menjadi dasar bagi banyak pustaka: pelolosan HTML, komponen bergaya, kueri GraphQL, dan internasionalisasi. Gagasan yang sama adalah mencegat nilai interpolasi untuk memprosesnya dengan aman.

function tag(s, ...v) { return s[0] + v[0] + s[1] }
console.log(tag(["<", ">"], "b"))

Masalah Pelolosan

Saat Anda membuat HTML dari input pengguna, karakter khusus seperti tanda kurang dari dapat menyisipkan markup. Fungsi tag dapat secara otomatis meloloskan karakter ini hanya dalam nilai interpolasi.

const danger = "<script>"
console.log("raw: " + danger)

Pembantu Pelolosan

Pertama-tama, kita mendefinisikan pembantu yang mengganti karakter berbahaya dengan entitas HTML yang aman.

function escapeHtml(str) {
  return String(str)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
}
console.log(escapeHtml("<b>"))

Tag HTML Aman

Sekarang kita membuat tag yang meloloskan setiap nilai interpolasi, tetapi membiarkan bagian templat statis apa adanya karena bagian tersebut berasal dari pengembang tepercaya.

function escapeHtml(str) {
  return String(str).replace(/</g, "&lt;").replace(/>/g, "&gt;")
}
function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? escapeHtml(values[i]) : "")
  })
  return out
}
console.log(safe(["<p>", "</p>"], "<script>"))

Mengapa Bagian Statis Tetap Raw

Hanya nilai interpolasi yang merupakan data pengguna tidak tepercaya. Bagian templat literal ditulis oleh pengembang, sehingga tetap tidak diloloskan agar markup yang dimaksud tetap berfungsi.

function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const safer = values[i] !== undefined ? String(values[i]).replace(/</g, "&lt;") : ""
    out += s + safer
  })
  return out
}
console.log(safe(["<b>", "</b>"], "<i>x</i>"))

Tag Keluaran Bergaya

Pola lain membungkus nilai interpolasi dengan penanda pemformatan, misalnya untuk menyoroti angka dalam laporan.

function money(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? "$" + Number(values[i]).toFixed(2) : "")
  })
  return out
}
console.log(money(["Total: ", ""], 9.5))

Membuat String Kueri

Tag dapat menyandikan nilai untuk URL, dengan meloloskan setiap bagian interpolasi agar struktur statis tetap utuh sementara data disandikan dengan aman.

function url(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? encodeURIComponent(values[i]) : "")
  })
  return out
}
console.log(url(["/search?q=", ""], "a b&c"))

Penjamakan

Tag dapat memeriksa suatu nilai dan menyesuaikan teks di sekitarnya, misalnya dengan memilih kata dalam bentuk tunggal atau jamak.

function plural(strings, count) {
  const noun = count === 1 ? "item" : "items"
  return strings[0] + count + " " + noun
}
console.log(plural(["You have "], 1))
console.log(plural(["You have "], 3))

Merapikan Indentasi

Tag dapat merapikan templat multibaris dengan menghapus indentasi awal dari setiap baris, sehingga menghasilkan keluaran yang rapi.

function dedent(strings) {
  return strings[0].split("\n").map(function (l) { return l.trim() }).join("\n")
}
console.log(dedent(["  a\n  b\n  c"]))

Menggabungkan Tag

Anda dapat melapiskan perilaku dengan membuat satu tag memanggil pembantu. Di sini, tag tersebut membungkus sekaligus menekankan nilai.

function emph(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const v = values[i] !== undefined ? "**" + values[i] + "**" : ""
    out += s + v
  })
  return out
}
console.log(emph(["Note: ", "!"], "important"))

Kapan Tidak Menggunakan Tag

Untuk string sederhana, literal templat biasa sudah cukup. Gunakan fungsi tag hanya saat Anda memerlukan transformasi nilai interpolasi yang konsisten, seperti pelolosan atau pelokalan.

const name = "Lee"
console.log("Welcome, " + name)

Pemeriksaan Singkat

Uji pengetahuan praktis Anda tentang tag.

Ringkasan

Ringkasan: Templat bertag memungkinkan keluaran yang aman dan terformat.

  • Loloskan hanya nilai interpolasi untuk keamanan HTML
  • Bagian statis tetap tepercaya dan raw
  • Gunakan tag untuk penataan gaya, penyandian, dan penjamakan
  • Utamakan literal biasa jika tidak diperlukan transformasi
function safe(s, v) { return s[0] + String(v).replace(/</g, "&lt;") }
console.log(safe(["x="], "<a>"))

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Kasus Penggunaan Praktis Templat Bertag” gratis?

Ya — teks lengkap “Kasus Penggunaan Praktis 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 “Kasus Penggunaan Praktis Templat Bertag”?

Buat HTML aman dan string bergaya dengan 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 4 dari 4.

Berapa lama pelajaran “Kasus Penggunaan Praktis 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

  1. Dasar-Dasar Interpolasi String
  2. String Multibaris
  3. Fungsi Templat Bertag
  4. Kasus Penggunaan Praktis Templat Bertag
← Kembali ke JavaScript Academy