JavaScript Academy · Leçon

Fonctions de gabarit balisées

Traitez les parties d’un gabarit avec des fonctions d’étiquetage.

Fonctions de gabarit balisées est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Qu’est-ce qu’une fonction d’étiquetage

Un gabarit balisé est un appel de fonction dans lequel le nom de la fonction est placé directement avant un littéral de gabarit. La fonction reçoit les éléments analysés du gabarit et peut les transformer.

function tag(strings, value) {
  return strings[0] + value.toUpperCase() + strings[1]
}
console.log(tag(["Hi ", "!"], "bob"))

Le tableau de chaînes

Le premier argument qu’une fonction d’étiquetage reçoit est un tableau des parties de chaîne littérales. Il s’agit des fragments de texte placés entre les emplacements réservés et autour d’eux.

function tag(strings) {
  return strings.join("|")
}
console.log(tag(["a", "b", "c"]))

Les valeurs

Après le tableau de chaînes, la fonction d’étiquetage reçoit chaque valeur interpolée comme argument distinct. L’utilisation de paramètres rest permet de les rassembler dans un tableau.

function tag(strings, ...values) {
  return values.join(",")
}
console.log(tag(["", " and ", ""], "x", "y"))

Reconstruire la chaîne

Une fonction d’étiquetage classique parcourt le tableau de chaînes et insère chaque valeur entre les parties, afin de reconstruire la chaîne finale avec la transformation de votre choix.

function tag(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? values[i] : "")
  })
  return out
}
console.log(tag(["A", "B", "C"], 1, 2))

Règle de longueur des chaînes

Le tableau de chaînes contient toujours un élément de plus que le tableau de valeurs. Il y a du texte avant le premier emplacement réservé et après le dernier, même si certains fragments sont vides.

function tag(strings, ...values) {
  return "strings=" + strings.length + " values=" + values.length
}
console.log(tag(["", "", ""], 1, 2))

Transformer les valeurs

Comme la fonction d’étiquetage contrôle la manière dont les valeurs sont insérées, vous pouvez les mettre en forme. Ici, chaque valeur numérique est doublée avant son insertion.

function dbl(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? values[i] * 2 : "")
  })
  return out
}
console.log(dbl(["", " ", ""], 3, 4))

Retourner autre chose qu’une chaîne

Une fonction d’étiquetage n’est pas obligée de renvoyer une chaîne. Elle peut renvoyer n’importe quelle valeur, par exemple un objet ou un tableau construit à partir des parties du gabarit.

function parts(strings, ...values) {
  return { strings: strings, values: values }
}
const r = parts(["a", "b"], 9)
console.log(r.values[0])

La propriété raw

Le tableau de chaînes possède également une propriété raw, qui contient les chaînes sans traitement des séquences d’échappement. C’est ainsi que fonctionne String.raw.

console.log(String.raw({ raw: ["a\\n", "b"] }, "X"))

Mise en majuscules des interpolations

Une balise de démonstration courante met en majuscules chaque valeur interpolée tout en laissant le texte statique intact.

function loud(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? String(values[i]).toUpperCase() : "")
  })
  return out
}
console.log(loud(["name is ", "."], "alice"))

Pourquoi utiliser des balises

Les fonctions de balise permettent des usages puissants : échapper les entrées non fiables, gérer l’internationalisation, construire des requêtes ou appliquer une mise en forme personnalisée, le tout guidé par la structure du modèle.

function highlight(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? "[" + values[i] + "]" : "")
  })
  return out
}
console.log(highlight(["score: ", " pts"], 42))

Ignorer les valeurs

Une balise peut choisir d’ignorer complètement les valeurs interpolées et de produire une sortie fondée uniquement sur les parties statiques, ce qui est utile pour l’analyse ou la journalisation.

function onlyStatic(strings) {
  return strings.filter(function (s) { return s.length > 0 }).join(" ")
}
console.log(onlyStatic(["Hello ", " world ", ""]))

Vérification rapide

Vérifiez vos connaissances sur les fonctions de balise.

Récapitulatif

Récapitulatif : les modèles balisés appellent une fonction avec les parties analysées du modèle.

Le premier argument est le tableau de chaînes
Les arguments restants sont les valeurs interpolées
Le tableau des chaînes comporte un élément de plus que celui des valeurs
La propriété raw contient le texte non traité

function tag(s, ...v) { return s[0] + v[0] }
console.log(tag(["go "], "fast"))

Questions Fréquemment Posées

La leçon « Fonctions de gabarit balisées » est-elle gratuite ?

Oui — le texte complet de « Fonctions de gabarit balisées » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Fonctions de gabarit balisées » ?

Traitez les parties d’un gabarit avec des fonctions d’étiquetage. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Fonctions de gabarit balisées » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy