TIL：標記函數/標記模板文字

概述 ？

標記函數，也稱為標記模板文字，是 ES6（2015）中引入的模板文字的高級功能。它們可以更好地控制模板文字的處理方式，允許自訂格式、解析甚至驗證。

標記模板文字的一個流行用例是在 GraphQL 中動態建立查詢字串。

---

句法

定義

標記範本文字是「標記函數」和範本文字的組合。標籤函數接收文字的字串和插值作為參數，從而啟用自訂處理。

這是一個基本範例：

const bar = "var bar";

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

用法

tag`foo ${bar} baz`;

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

---

使用案例

1.國際化（i18n）

標記範本文字可用於動態處理字串以進行本地化。

範例：

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.GraphQL

在 GraphQL 中，標記模板文字廣泛用於定義和操作查詢字串。

範例：

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

3. 使用標記範本文字處理參數

標記範本文字也可以透過將附加價值傳遞給標籤函數並在範本文字中應用函數來處理參數。

範例：

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"

---

討論和見解？

標記範本文字支援使用自訂邏輯進行動態字串處理，使其成為查詢建置、國際化和輸入清理等用例的理想選擇。它們提高了程式碼的可讀性和可維護性，特別是在需要高級字串操作的場景中。

---

參考

• MDN 網路文件：標記範本
• ES6 規範
• GraphQL 官方文件
• 標記模板文字の TypeScript 推論

以上是TIL：標記函數/標記模板文字的詳細內容。更多資訊請關注PHP中文網其他相關文章！