TIL : fonction de balise/littéraux de modèle balisés

Aperçu ?

Les fonctions balisées, également connues sous le nom de littéraux de modèle balisés, sont une fonctionnalité avancée des littéraux de modèle introduites dans ES6 (2015). Ils permettent plus de contrôle sur la façon dont les littéraux des modèles sont traités, permettant un formatage, une analyse ou même une validation personnalisés.

Un cas d'utilisation populaire des littéraux de modèles balisés est celui de GraphQL pour la création dynamique de chaînes de requête.

---

Syntaxe

Définition

Un littéral de modèle balisé est une combinaison d'une "fonction de balise" et d'un littéral de modèle. La fonction tag reçoit les chaînes du littéral et les valeurs interpolées comme arguments, permettant un traitement personnalisé.

Voici un exemple de base :

const bar = "var bar";

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

Utilisation

tag`foo ${bar} baz`;

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

---

Cas d'utilisation

1. Internationalisation (i18n)

Les littéraux de modèles balisés peuvent être utilisés pour traiter les chaînes de manière dynamique pour la localisation.

Exemple :

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

Dans GraphQL, les littéraux de modèles balisés sont largement utilisés pour définir et manipuler des chaînes de requête.

Exemple :

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

3. Gestion des arguments avec des littéraux de modèle balisés

Les littéraux de modèle balisés peuvent également traiter les arguments en transmettant une valeur supplémentaire à la fonction de balise et en appliquant des fonctions dans le littéral de modèle.

Exemple :

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"

---

Discussion et idées ?

Les littéraux de modèles balisés permettent le traitement dynamique des chaînes avec une logique personnalisée, ce qui les rend idéaux pour des cas d'utilisation tels que la création de requêtes, l'internationalisation et la vérification des entrées. Ils améliorent la lisibilité et la maintenabilité du code, en particulier dans les scénarios nécessitant une manipulation avancée des chaînes.

---

Références

• MDN Web Docs : modèles balisés
• Spécification ES6
• Documentation officielle de GraphQL
• Littéraux de modèles balisés の TypeScript推論

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!