概述 ？

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

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

句法

定義

標(biāo)記範(fàn)本文字是「標(biāo)記函數(shù)」和範(fàn)本文字的組合。標(biāo)籤函數(shù)接收文字的字串和插值作為參數(shù)，從而啟用自訂處理。

這是一個(gè)基本範(fàn)例：

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)記範(fàn)本文字可用於動(dòng)態(tài)處理字串以進(jìn)行本地化。

範(fà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)記模板文字廣泛用於定義和操作查詢(xún)字串。

範(fàn)例：

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

3. 使用標(biāo)記範(fàn)本文字處理參數(shù)

標(biāo)記範(fàn)本文字也可以透過(guò)將附加價(jià)值傳遞給標(biāo)籤函數(shù)並在範(fàn)本文字中應(yīng)用函數(shù)來(lái)處理參數(shù)。

範(fàn)例：

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)記範(fàn)本文字支援使用自訂邏輯進(jìn)行動(dòng)態(tài)字串處理，使其成為查詢(xún)建置、國(guó)際化和輸入清理等用例的理想選擇。它們提高了程式碼的可讀性和可維護(hù)性，特別是在需要高級(jí)字串操作的場(chǎng)景中。

參考

• MDN 網(wǎng)路文件：標(biāo)記範(fàn)本
• ES6 規(guī)範(fàn)
• GraphQL 官方文件
• 標(biāo)記模板文字の TypeScript 推論

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