概述 ？

標(biāo)記函數(shù)，也稱為標(biāo)記模板文字，是 ES6（2015）中引入的模板文字的高級(jí)功能。它們可以更好地控制模板文字的處理方式，允許自定義格式、解析甚至驗(yàn)證。

標(biāo)記模板文字的一個(gè)流行用例是在 GraphQL 中動(dòng)態(tài)構(gòu)建查詢字符串。

句法

定義

標(biāo)記模板文字是“標(biāo)記函數(shù)”和模板文字的組合。標(biāo)簽函數(shù)接收文字的字符串和插值作為參數(shù)，從而啟用自定義處理。

這是一個(gè)基本示例：

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.國(guó)際化（i18n）

標(biāo)記模板文字可用于動(dòng)態(tài)處理字符串以進(jìn)行本地化。

示例：

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 中，標(biāo)記模板文字廣泛用于定義和操作查詢字符串。

示例：

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

3. 使用標(biāo)記模板文字處理參數(shù)

標(biāo)記模板文字還可以通過(guò)將附加值傳遞給標(biāo)簽函數(shù)并在模板文字中應(yīng)用函數(shù)來(lái)處理參數(shù)。

示例：

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"

討論和見(jiàn)解？

標(biāo)記模板文字支持使用自定義邏輯進(jìn)行動(dòng)態(tài)字符串處理，使其成為查詢構(gòu)建、國(guó)際化和輸入清理等用例的理想選擇。它們提高了代碼的可讀性和可維護(hù)性，特別是在需要高級(jí)字符串操作的場(chǎng)景中。

參考

• MDN 網(wǎng)絡(luò)文檔：標(biāo)記模板
• ES6 規(guī)范
• GraphQL 官方文檔
• 標(biāo)記模板文字の TypeScript 推論

以上是TIL：標(biāo)記函數(shù)/標(biāo)記模板文字的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！