TIL: タグ関数 / タグ付きテンプレート リテラル

概要 ？

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

タグ付きテンプレート リテラルの一般的な使用例の 1 つは、クエリ文字列を動的に構築するための 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.グラフQL

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 Web ドキュメント: タグ付きテンプレート
• ES6 仕様
• GraphQL 公式ドキュメント
• タグ付きテンプレート リテラルの TypeScript 推論

以上がTIL: タグ関数 / タグ付きテンプレート リテラルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。