กรณีใช้งานแม่แบบติดแท็กจริง

แท็กในโลกจริง

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

ปัญหาการหลีกอักขระ

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

ตัวช่วยหลีกอักขระ

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

แท็ก HTML ที่ปลอดภัย

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

เหตุผลที่ส่วนคงที่ยังเป็นข้อความดิบ

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

แท็กผลลัพธ์ที่จัดรูปแบบ

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

การสร้างสตริงแบบสอบถาม

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

การผันรูปเอกพจน์และพหูพจน์

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

การตัดการเยื้อง

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

การประกอบแท็ก

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

กรณีที่ไม่ควรใช้แท็ก

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

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทบทวน

function safe(s, v) { return s[0] + String(v).replace(/</g, "&lt;") }
console.log(safe(["x="], "<a>"))