概要 ？

タグ付き関數(shù)は、タグ付きテンプレート リテラルとも呼ばれ、ES6 (2015) で導(dǎo)入されたテンプレート リテラルの高度な機能です。これらにより、テンプレート リテラルの処理方法をより詳細に制御できるようになり、カスタムの書式設(shè)定、解析、さらには検証も可能になります。

タグ付きテンプレート リテラルの一般的な使用例の 1 つは、クエリ文字列を動的に構(gòu)築するための GraphQL です。

構(gòu)文

意味

タグ付きテンプレート リテラルは、「タグ関數(shù)」とテンプレート リテラルを組み合わせたものです。タグ関數(shù)はリテラルの文字列と補間値を引數(shù)として受け取り、カスタム処理を可能にします。

これが基本的な例です:

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.グラフQL

GraphQL では、タグ付きテンプレート リテラルはクエリ文字列の定義と操作に広く使用されています。

例:

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

3. タグ付きテンプレートリテラルによる引數(shù)の処理

タグ付きテンプレート リテラルは、タグ関數(shù)に追加の値を渡し、テンプレート リテラル內(nèi)の関數(shù)を適用することで引數(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"

ディスカッションと洞察 ?

タグ付きテンプレート リテラルを使用すると、カスタム ロジックによる動的な文字列処理が可能になり、クエリの構(gòu)築、國際化、入力のサニタイズなどのユースケースに最適です。特に高度な文字列操作が必要なシナリオで、コードの可読性と保守性が向上します。

參考文獻

• MDN Web ドキュメント: タグ付きテンプレート
• ES6 仕様
• GraphQL 公式ドキュメント
• タグ付きテンプレート リテラルの TypeScript 推論

以上がTIL: タグ関數(shù) / タグ付きテンプレート リテラルの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。