JavaScript Academy · Leçon

Cas pratiques des gabarits balisés

Créez du HTML sûr et des chaînes stylisées avec des balises.

Cas pratiques des gabarits balisés est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Balises dans le monde réel

Les modèles balisés sont utilisés par de nombreuses bibliothèques : échappement HTML, composants mis en forme, requêtes GraphQL et internationalisation. L’idée commune consiste à intercepter les valeurs interpolées pour les traiter de manière sûre.

function tag(s, ...v) { return s[0] + v[0] + s[1] }
console.log(tag(["<", ">"], "b"))

Le problème de l’échappement

Lorsque vous construisez du HTML à partir de données saisies par l’utilisateur, des caractères spéciaux comme le signe inférieur peuvent injecter du balisage. Une fonction de balise peut échapper automatiquement ces caractères, uniquement dans les valeurs interpolées.

const danger = "<script>"
console.log("raw: " + danger)

Une fonction auxiliaire d’échappement

Nous commençons par définir une fonction auxiliaire qui remplace les caractères dangereux par des entités HTML sûres.

function escapeHtml(str) {
  return String(str)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
}
console.log(escapeHtml("<b>"))

Balise HTML sûre

Nous construisons maintenant une balise qui échappe chaque valeur interpolée, mais laisse les parties statiques du modèle telles quelles, puisqu’elles proviennent du développeur et sont fiables.

function escapeHtml(str) {
  return String(str).replace(/</g, "&lt;").replace(/>/g, "&gt;")
}
function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? escapeHtml(values[i]) : "")
  })
  return out
}
console.log(safe(["<p>", "</p>"], "<script>"))

Pourquoi les parties statiques restent brutes

Seules les valeurs interpolées sont des données utilisateur non fiables. Les parties littérales du modèle sont écrites par le développeur ; elles restent donc sans échappement afin de préserver le balisage prévu.

function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const safer = values[i] !== undefined ? String(values[i]).replace(/</g, "&lt;") : ""
    out += s + safer
  })
  return out
}
console.log(safe(["<b>", "</b>"], "<i>x</i>"))

Balise de sortie mise en forme

Un autre modèle consiste à entourer les valeurs interpolées de marqueurs de mise en forme, par exemple pour mettre des nombres en évidence dans un rapport.

function money(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? "$" + Number(values[i]).toFixed(2) : "")
  })
  return out
}
console.log(money(["Total: ", ""], 9.5))

Construire des chaînes de requête

Les balises peuvent encoder les valeurs destinées aux adresses web et échapper chaque élément interpolé, afin que la structure statique reste intacte tout en encodant les données de manière sûre.

function url(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? encodeURIComponent(values[i]) : "")
  })
  return out
}
console.log(url(["/search?q=", ""], "a b&c"))

Gestion du pluriel

Une balise peut examiner une valeur et adapter le texte environnant, par exemple en choisissant une formulation au singulier ou au pluriel.

function plural(strings, count) {
  const noun = count === 1 ? "item" : "items"
  return strings[0] + count + " " + noun
}
console.log(plural(["You have "], 1))
console.log(plural(["You have "], 3))

Supprimer l’indentation

Les balises peuvent nettoyer les modèles multilignes en supprimant l’indentation initiale de chaque ligne, afin de produire une sortie bien organisée.

function dedent(strings) {
  return strings[0].split("\n").map(function (l) { return l.trim() }).join("\n")
}
console.log(dedent(["  a\n  b\n  c"]))

Composer des balises

Vous pouvez superposer des comportements en faisant appel à des fonctions auxiliaires depuis une balise. Ici, la balise entoure les valeurs et les met également en évidence.

function emph(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const v = values[i] !== undefined ? "**" + values[i] + "**" : ""
    out += s + v
  })
  return out
}
console.log(emph(["Note: ", "!"], "important"))

Quand ne pas utiliser de balises

Pour les chaînes simples, un littéral de modèle ordinaire suffit. Utilisez une fonction de balise uniquement lorsque vous avez besoin d’une transformation cohérente des valeurs interpolées, par exemple pour l’échappement ou la localisation.

const name = "Lee"
console.log("Welcome, " + name)

Vérification rapide

Vérifiez vos connaissances pratiques sur les balises.

Récapitulatif

Récapitulatif : les modèles balisés permettent de produire une sortie sûre et mise en forme.

Échappez uniquement les valeurs interpolées pour garantir la sécurité du HTML
Les parties statiques restent fiables et brutes
Utilisez les balises pour la mise en forme, l’encodage et la gestion du pluriel
Préférez les littéraux simples lorsqu’aucune transformation n’est nécessaire

function safe(s, v) { return s[0] + String(v).replace(/</g, "&lt;") }
console.log(safe(["x="], "<a>"))

Questions Fréquemment Posées

La leçon « Cas pratiques des gabarits balisés » est-elle gratuite ?

Oui — le texte complet de « Cas pratiques des gabarits balisés » 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 « Cas pratiques des gabarits balisés » ?

Créez du HTML sûr et des chaînes stylisées avec des balises. 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 4 sur 4.

Combien de temps prend la leçon « Cas pratiques des gabarits balisés » ?

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