TIL: Fungsi Tag / Huruf Templat Bertag

Gambaran keseluruhan ?

Fungsi Templat, juga dikenali sebagai Literal Templat Teg, ialah ciri lanjutan literal templat yang diperkenalkan dalam ES6 (2015). Ia membolehkan lebih banyak kawalan ke atas cara literal templat diproses, membenarkan pemformatan tersuai, penghuraian atau pun pengesahan.

Satu kes penggunaan popular untuk literal templat berteg adalah dalam GraphQL untuk membina rentetan pertanyaan secara dinamik.

---

Sintaks

Definisi

Tersurat templat berteg ialah gabungan "fungsi teg" dan literal templat. Fungsi teg menerima rentetan literal dan nilai interpolasi sebagai argumen, membolehkan pemprosesan tersuai.

Berikut ialah contoh asas:

const bar = "var bar";

function tag(strings, ...values) {
  console.log(strings); // Array of string literals
  console.log(values);  // Array of interpolated values
}

Penggunaan

tag`foo ${bar} baz`;

// Output:
// ['foo ', ' baz']  // Array of strings
// ['var bar']       // Array of values

---

Kes Penggunaan

1. Pengantarabangsaan (i18n)

Tersurat templat bertanda boleh digunakan untuk memproses rentetan secara dinamik untuk penyetempatan.

Contoh:

function i18n(strings, ...values) {
  const translations = {
    "Hello, ": "Hola, "
  };

  return strings.reduce((acc, str, i) => {
    const translatedStr = translations[str] || str; // Translate if possible
    return acc + translatedStr + (values[i] || '');
  }, '');
}

const name = "Alice";
const result = i18n`Hello, ${name}!`;
console.log(result);
// Output: "Hola, Alice!"

2. GrafQL

Dalam GraphQL, literal templat berteg digunakan secara meluas untuk mentakrif dan memanipulasi rentetan pertanyaan.

Contoh:

const query = gql`
  query {
    user(id: 1) {
      name
      age
    }
  }
`;

3. Mengendalikan Hujah dengan Hujah Templat Bertag

Tersurat templat berteg juga boleh memproses hujah dengan menghantar nilai tambahan kepada fungsi teg dan menggunakan fungsi dalam literal templat.

Contoh:

function tagged(baseValue) {
  return function(strings, ...functions) {
    return strings.reduce((acc, str, i) => {
      const value = typeof functions[i] === 'function' ? functions[i](baseValue) : '';
      return acc + str + value;
    }, '');
  };
}

const result = tagged(2)`foo${n => n * 0}bar${n => n * 1}baz${n => n * 2}`;
console.log(result);
// Output:
// "foo0bar2baz4"

---

Perbincangan dan Wawasan ?

Templat literal berteg membolehkan pemprosesan rentetan dinamik dengan logik tersuai, menjadikannya sesuai untuk kes penggunaan seperti pembinaan pertanyaan, pengantarabangsaan dan pembersihan input. Ia meningkatkan kebolehbacaan dan kebolehselenggaraan kod, terutamanya dalam senario yang memerlukan manipulasi rentetan lanjutan.

---

Rujukan

• Dokumen Web MDN: Templat Berteg
• Spesifikasi ES6
• Dokumentasi Rasmi GraphQL
• Templat Literal Berteg の TypeScript推論

Atas ialah kandungan terperinci TIL: Fungsi Tag / Huruf Templat Bertag. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!