Un guide sur les littéraux de modèle JavaScript

Introduits dans ES2015, alias ES6, Template Literals offre une nouvelle façon de déclarer des chaînes, mais aussi de nouvelles constructions intéressantes qui sont déjà très populaires.

Introduction aux littéraux de modèle

Les littéraux de modèle sont une nouvelle fonctionnalité ES2015 / ES6 qui vous permet de travailler avec des chaînes d'une manière nouvelle par rapport à ES5 et inférieur.

La syntaxe à première vue est très simple, utilisez simplement des contre-indications au lieu de guillemets simples ou doubles:

const a_string = `something`

Ils sont uniques car ils fournissent de nombreuses fonctionnalités que les chaînes normales construites avec des guillemets ne le font pas, en particulier:

  • ils offrent une excellente syntaxe pour définir des chaînes multilignes
  • ils fournissent un moyen simple d'interpoler des variables et des expressions dans des chaînes
  • ils vous permettent de créer des DSL avec des balises de modèle (DSL signifie un langage spécifique au domaine, et il est par exemple utilisé dans React by Styled Components, pour définir le CSS pour un composant)

Plongeons-nous dans chacun d'eux en détail.

Chaînes multilignes

Avant ES6, pour créer une chaîne s'étendant sur deux lignes, vous deviez utiliser le\caractère à la fin d'une ligne:

const string =
  'first part \
second part'

Cela permet de créer une chaîne sur 2 lignes, mais elle est rendue sur une seule ligne:

first part second part

Pour rendre la chaîne sur plusieurs lignes également, vous devez explicitement ajouter\nà la fin de chaque ligne, comme ceci:

const string =
  'first line\n \
second line'

ou

const string = 'first line\n' + 'second line'

Les littéraux de modèle simplifient beaucoup les chaînes multilignes.

Une fois qu'un modèle littéral est ouvert avec le backtick, il vous suffit d'appuyer sur Entrée pour créer une nouvelle ligne, sans caractères spéciaux, et elle est rendue telle quelle:

const string = `Hey
this

string
is awesome!`

Gardez à l'esprit que l'espace est significatif, alors faites ceci:

const string = `First
                Second`

va créer une chaîne comme celle-ci:

First
                Second

an easy way to fix this problem is by having an empty first line, and appending the trim() method right after the closing backtick, which will eliminate any space before the first character:

const string = `
First
Second`.trim()

Interpolation

Template literals provide an easy way to interpolate variables and expressions into strings.

You do so by using the ${...} syntax:

const myVariable = 'test'
const string = `something ${myVariable}` //something test

inside the ${} you can add anything, even expressions:

const string = `something ${1 + 2 + 3}`
const string2 = `something ${doSomething() ? 'x' : 'y'}`

Template tags

Tagged templates is one feature that might sound less useful at first for you, but it’s actually used by lots of popular libraries around, like Styled Components or Apollo, the GraphQL client/server lib, so it’s essential to understand how it works.

In Styled Components template tags are used to define CSS strings:

const Button = styled.button`
  font-size: 1.5em;
  background-color: black;
  color: white;
`

In Apollo template tags are used to define a GraphQL query schema:

const query = gql`
  query {
    ...
  }
`

The styled.button and gql template tags highlighted in those examples are just functions:

function gql(literals, ...expressions) {}

this function returns a string, which can be the result of any kind of computation.

literals is an array containing the template literal content tokenized by the expressions interpolations.

expressions contains all the interpolations.

If we take an example above:

const string = `something ${1 + 2 + 3}`

literals is an array with two items. The first is something, the string until the first interpolation, and the second is an empty string, the space between the end of the first interpolation (we only have one) and the end of the string.

expressions in this case is an array with a single item, 6.

A more complex example is:

const string = `something
another ${'x'}
new line ${1 + 2 + 3}
test`

in this case literals is an array where the first item is:

;`something
another `

the second is:

;`
new line `

and the third is:

;`
test`

expressions in this case is an array with two items, x and 6.

The function that is passed those values can do anything with them, and this is the power of this kind feature.

The most simple example is replicating what the string interpolation does, by joining literals and expressions:

const interpolated = interpolate`I paid ${10}€`

and this is how interpolate works:

function interpolate(literals, ...expressions) {
  let string = ``
  for (const [i, val] of expressions.entries()) {
    string += literals[i] + val
  }
  string += literals[literals.length - 1]
  return string
}

More js tutorials: