web-dev-qa-db-fra.com

À quoi servent les littéraux de modèle (backticks) à la suite d'une définition de variable dans ES6?

Dans GraphQL, vous pouvez écrire quelque chose comme ceci pour définir une requête:

const USER_QUERY = gql`
  {
    user(id: 2) {
      name
    }
  }
`

Dans les composants stylisés, vous pouvez définir un composant stylisé comme ceci:

const Button = styled.button`
    background-color: papayawhip;
`

Quelle est cette syntaxe? Je sais qu'avec les littéraux de modèle, vous pouvez sous-traiter des variables avec cette syntaxe: ${foo} mais je n'ai jamais vu cela utilisé. Tout conseil serait apprécié.

javascriptecmascript-6graphqlstyled-componentstemplate-literals
25
Kurt William

Ce sont littéraux de modèle balisés . La partie avant les sacs à dos est une référence à une fonction qui sera appelée pour traiter la chaîne.

La fonction est passée les variables (le ${} parts) comme arguments ainsi que les morceaux de la chaîne qui entourent les variables divisées en un tableau. La valeur de retour de la fonction devient la valeur du modèle. En raison de ce format très généralisé, vous pouvez faire presque n'importe quoi avec la fonction. Voici un exemple rapide et sale qui prend les variables (rassemblées dans un tableau pour plus de commodité), les rend en majuscules et les remet dans la chaîne:

function upperV(strings, ...vars) {
  /* make vars uppercase */
  console.log("vars: ", vars)       // an array of the passed in variables
  console.log("strings:", strings)  // the string parts

  // put them together
  return vars.reduce((str, v, i) => str + v.toUpperCase() + strings[i+1], strings[0]);
}

let adverb = "boldly"
let output = upperV`to ${adverb} split infinitives that no ${'man'} had split before...`;
console.log(output)
25
Mark Meyer

Les littéraux de modèle ont une fonctionnalité supplémentaire appelée modèles balisés. C'est le préfixe avant le backtick d'ouverture. Le préfixe est en fait le nom d'une fonction - la fonction passe les parties constantes des chaînes de modèle et les valeurs interpolées (des trucs dans le ${} sections) et peut traiter la chaîne résultante en ce qu'elle veut (bien que généralement une autre chaîne ne soit pas nécessairement).

Voir cette page sur MDN pour plus de détails sur le fonctionnement des modèles balisés.

15
Chris Tavares