Quartz 🪬

Tagged Template Literals

2 min read

Đoạn code bên dưới gọi hàm hightlight nhưng không dùng toán tử call () mà lại dùng dấu backtick `` để chứa một template string làm đối số.

function hightlight([...strings], ...values) {
  console.log(strings) // Array ["Reading ", " is good for ", "!"]
  console.log(values) // Array ["book", "brain"]
}
 
let book = "book"
let brain = "brain"
 
hightlight`Reading ${book} is good for ${brain}!`

Nhận thấy rằng, các ký tự hoặc chuỗi không phải là biến trong template string thì truyền vào tham số strings. Các biến template string sẽ là các phần tử còn lại, được truyền vào tham số values.

Với:

  • Tham số ...strings giúp gom nhóm các đối số có dạng chuỗi.
  • Tham số ...values giúp gom nhóm các biến template string.

Cả hai đều sử dụng rest operator.

Ta có thể sử dụng hàm hightlight để thay đổi style của các biến trong template string tùy thích với sự hỗ trợ của hàm reduce:

// first is "Reading"
function hightlight([first, ...strings], ...values) {
  return (
    values
      // New string include: previous string + variable + non-variable
      .reduce((acc, curr) => [...acc, `<em>${curr}</em>`, strings.shift()], [first])
      .join("")
  )
}
 
let book = "book"
let brain = "brain"
 
const quote = hightlight`Reading ${book} is good for ${brain}!`
console.log(quote) // Reading <em>book</em> is good for <em>brain</em>!

Để đổi style thì chỉ cần chỉnh sửa tag <em> tùy ý.

Ứng dụng thực tế của tagged template literals là thư viện Styled Components.

Resources