Movatterモバイル変換


[0]ホーム

URL:


  1. MDN Web Docs
  2. Règles d'écriture
  3. Style de code
  4. Exemples JavaScript

Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in EnglishAlways switch to English

Guide pour rédiger des exemples de code JavaScript

Les consignes suivantes expliquent comment rédiger des exemples de code JavaScript pour MDN Web Docs. Cet article liste les règles pour écrire des exemples concis et compréhensibles par le plus grand nombre.

Lignes directrices générales pour les exemples de code JavaScript

Cette section explique les lignes directrices générales à garder à l'esprit lors de la rédaction d'exemples de code JavaScript. Les sections suivantes aborderont des points plus spécifiques.

Choisir un format

Les opinions sur l'indentation correcte, les espaces et la longueur des lignes ont toujours été controversées. Les discussions sur ces sujets détournent de la création et de la maintenance du contenu.

Sur MDN Web Docs, nous utilisonsPrettier(angl.) comme formateur de code pour garder un style cohérent (et éviter les discussions hors sujet). Vous pouvez consulter notrefichier de configuration(angl.) pour connaître les règles actuelles, et lire ladocumentation de Prettier(angl.).

Prettier formate tout le code et maintient un style cohérent. Cependant, il existe quelques règles supplémentaires à suivre.

Utiliser les fonctionnalités JavaScript modernes lorsque c'est possible

Vous pouvez utiliser de nouvelles fonctionnalités dès lors que tous les principaux navigateurs — Chrome, Edge, Firefox et Safari — les prennent en charge (c'est-à-direBaseline).

Cette règle ne s'applique pas à la fonctionnalité JavaScript documentée sur la page (qui est dictée par lescritères d'inclusion). Par exemple, vous pouvez documenter des fonctionnalitésnon standard ou expérimentales et écrire des exemples complets montrant leur comportement, mais vous devez éviter d'utiliser ces fonctionnalités dans les démos d'autres fonctionnalités non liées, comme une API Web.

Tableaux

Création de tableaux

Pour créer des tableaux, utilisez la notation littérale et non les constructeurs.

Créez des tableaux ainsi :

js
const villesVisitees = [];

N'utilisez pas ceci pour créer des tableaux :

js
const villesVisitées = new Array(longueur);

Ajout d'éléments

Pour ajouter des éléments à un tableau, utilisezpush() et non l'affectation directe. Considérez le tableau suivant :

js
const animaux = [];

Ajoutez des éléments au tableau ainsi :

js
animaux.push("chat");

N'ajoutez pas d'éléments au tableau ainsi :

js
animaux[animaux.length] = "chat";

Méthodes asynchrones

Écrire du code asynchrone améliore les performances et doit être privilégié lorsque c'est possible. En particulier, vous pouvez utiliser :

Lorsque les deux techniques sont possibles, nous préférons utiliser la syntaxeasync/await, plus simple. Malheureusement, vous ne pouvez pas utiliserawait au niveau supérieur sauf si vous êtes dans un module ECMAScript. Les modules CommonJS utilisés par Node.js ne sont pas des modules ES. Si votre exemple doit pouvoir être utilisé partout, évitez lesawait de haut niveau.

Commentaires

Les commentaires sont essentiels pour rédiger de bons exemples de code. Ils clarifient l'intention du code et aident les développeur·euse·s à le comprendre. Portez une attention particulière à leur rédaction.

  • Si l'objectif ou la logique du code n'est pas évident, ajoutez un commentaire pour expliquer votre intention, comme ci-dessous :

    js
    let total = 0;// Calcule la somme des quatre premiers éléments de arrfor (let i = 0; i < 4; i++) {  total += arr[i];}

    À l'inverse, reformuler le code en prose n'est pas un bon usage des commentaires :

    js
    let total = 0;// Boucle for de 1 à 4for (let i = 0; i < 4; i++) {  // Ajoute la valeur au total  total += arr[i];}
  • Les commentaires ne sont pas nécessaires lorsque les fonctions ont des noms explicites qui décrivent ce qu'elles font. Écrivez :

    js
    closeConnection();

    N'écrivez pas :

    js
    closeConnection(); // Ferme la connexion

Utiliser les commentaires sur une seule ligne

Les commentaires sur une seule ligne commencent par//, contrairement aux commentaires de bloc délimités par/* … */.

En règle générale, utilisez les commentaires sur une seule ligne pour commenter le code. Les auteur·ice·s doivent marquer chaque ligne du commentaire avec//, afin de repérer plus facilement le code mis en commentaire. De plus, cette convention permet de commenter des sections de code avec/* … */ lors du débogage.

  • Laissez un espace entre les barres obliques et le commentaire. Commencez par une majuscule, comme une phrase, mais ne terminez pas le commentaire par un point.

    js
    // Ceci est un commentaire sur une seule ligne bien rédigé
  • Si un commentaire ne commence pas immédiatement après un nouveau niveau d'indentation, ajoutez une ligne vide puis le commentaire. Cela créera un bloc de code, rendant évident ce à quoi le commentaire se rapporte. Placez aussi vos commentaires sur des lignes séparées précédant le code concerné. Exemple :

    js
    function checkout(goodsPrice, shipmentPrice, taxes) {  // Calcule le prix total  const total = goodsPrice + shipmentPrice + taxes;  // Crée et ajoute un nouveau paragraphe au document  const para = document.createElement("p");  para.textContent = `Le prix total est ${total}`;  document.body.appendChild(para);}

Affichage des journaux

  • Dans du code destiné à la production, il est rarement nécessaire de commenter l'affichage de données. Dans les exemples, nous utilisons souventconsole.log(),console.error() ou des fonctions similaires pour afficher des valeurs importantes. Pour aider la lectrice ou le lecteur à comprendre ce qui sera affiché sans exécuter le code, vous pouvez ajouter un commentaireaprès la fonction avec la sortie qui sera produite. Écrivez :

    js
    function exampleFunc(fruitBasket) {  console.log(fruitBasket); // ['banana', 'mango', 'orange']}

    N'écrivez pas :

    js
    function exampleFunc(fruitBasket) {  // Affiche : ['banana', 'mango', 'orange']  console.log(fruitBasket);}
  • Si la ligne devient trop longue, placez le commentaireaprès la fonction, comme ceci :

    js
    function exampleFunc(fruitBasket) {  console.log(fruitBasket);  // ['banana', 'mango', 'orange', 'apple', 'pear', 'durian', 'lemon']}

Commentaires multi-lignes

Les commentaires courts sont généralement préférables, essayez donc de les garder sur une seule ligne de 60 à 80 caractères. Si ce n'est pas possible, utilisez// au début de chaque ligne :

js
// Ceci est un exemple de commentaire multi-lignes.// La fonction imaginaire qui suit présente quelques limitations// particulières que je souhaite signaler.// Limitation 1// Limitation 2

N'utilisez pas/* … */ :

js
/* Ceci est un exemple de commentaire multi-lignes.  La fonction imaginaire qui suit présente quelques limitations  particulières que je souhaite signaler.  Limitation 1  Limitation 2 */

Utiliser les commentaires pour marquer les ellipses

Sauter du code redondant à l'aide d'ellipses (…) est nécessaire pour garder les exemples courts. Cependant, il faut le faire avec discernement, car les développeur·euse·s copient souvent les exemples dans leur code, et tous nos exemples doivent être du JavaScript valide.

En JavaScript, placez les ellipses () dans un commentaire. Lorsque c'est possible, indiquez l'action attendue pour la personne qui réutilise l'extrait.

Utiliser un commentaire pour les ellipses (…) est plus explicite et évite les erreurs lors du copier-coller. Écrivez :

js
function exampleFunc() {  // Ajoutez votre code ici  // …}

N'utilisez pas les ellipses (…) ainsi :

js
function exampleFunc() {  …}

Commenter les paramètres

Lorsque vous écrivez du code, vous omettez généralement les paramètres inutiles. Mais dans certains exemples, vous souhaitez montrer que vous n'avez pas utilisé certains paramètres possibles.

Pour cela, utilisez/* … */ dans la liste des paramètres. C'est une exception à la règle d'utiliser uniquement les commentaires sur une seule ligne (//).

js
array.forEach((value /* , index, array */) => {  // …});

Fonctions

Noms de fonctions

Pour les noms de fonctions, utilisezcamel case, en commençant par une minuscule. Utilisez des noms concis, lisibles et sémantiques lorsque c'est approprié.

Voici un exemple correct de nom de fonction :

js
function direBonjour() {  console.log("Bonjour !");}

N'utilisez pas des noms de fonctions comme ceux-ci :

js
function DireBonjour() {  console.log("Bonjour !");}function faire() {  console.log("Bonjour !");}

Déclarations de fonctions

  • Lorsque c'est possible, préférez la déclaration de fonction à l'expression de fonction pour définir des fonctions.

    Voici la manière recommandée de déclarer une fonction :

    js
    function somme(a, b) {  return a + b;}

    Ce n'est pas une bonne façon de définir une fonction :

    js
    let somme = function (a, b) {  return a + b;};
  • Lorsque vous utilisez des fonctions anonymes comme callback (fonction passée à une autre invocation de méthode), si vous n'avez pas besoin d'accéder àthis, utilisez une fonction fléchée pour rendre le code plus court et plus lisible.

    Voici la manière recommandée :

    js
    const tableau = [1, 2, 3, 4];const somme = tableau.reduce((a, b) => a + b);

    Au lieu de ceci :

    js
    const tableau = [1, 2, 3, 4];const somme = tableau.reduce(function (a, b) {  return a + b;});
  • Évitez d'utiliser une fonction fléchée pour assigner une fonction à un identifiant. En particulier, n'utilisez pas de fonctions fléchées pour les méthodes. Utilisez des déclarations de fonction avec le mot-cléfunction :

    js
    function x() {  // …}

    À ne pas faire :

    js
    const x = () => {  // …};
  • Lorsque vous utilisez des fonctions fléchées, utilisez leretour implicite (aussi appeléexpression body) lorsque c'est possible :

    js
    arr.map((e) => e.id);

    Et non :

    js
    arr.map((e) => {  return e.id;});

Boucles et instructions conditionnelles

Initialisation des boucles

Lorsque desboucles sont nécessaires, choisissez la plus adaptée parmifor(;;),for...of,while, etc.

  • Lorsque vous parcourez tous les éléments d'une collection, évitez la boucle classiquefor (;;) : préférezfor...of ouforEach(). Notez que si vous utilisez une collection qui n'est pas unArray, il faut vérifier quefor...of est bien supporté (cela nécessite que la variable soit itérable), ou que la méthodeforEach() existe.

    Utilisezfor...of :

    js
    const chiens = ["Rex", "Lassie"];for (const chien of chiens) {  console.log(chien);}

    OuforEach() :

    js
    const chiens = ["Rex", "Lassie"];chiens.forEach((chien) => {  console.log(chien);});

    N'utilisez pasfor (;;) : non seulement il faut ajouter un index supplémentaire,i, mais il faut aussi suivre la longueur du tableau. Cela peut être source d'erreurs pour les débutant·e·s.

    js
    const chiens = ["Rex", "Lassie"];for (let i = 0; i < chiens.length; i++) {  console.log(chiens[i]);}
  • Veillez à bien définir l'initialiseur en utilisant le mot-cléconst pourfor...of oulet pour les autres boucles. Ne l'omettez pas. Voici des exemples corrects :

    js
    const chats = ["Athena", "Luna"];for (const chat of chats) {  console.log(chat);}for (let i = 0; i < 4; i++) {  result += arr[i];}

    L'exemple ci-dessous ne suit pas les recommandations pour l'initialisation (il crée implicitement une variable globale et échouera en mode strict) :

    js
    const chats = ["Athena", "Luna"];for (i of chats) {  console.log(i);}
  • Lorsque vous avez besoin d'accéder à la fois à la valeur et à l'index, vous pouvez utiliser.forEach() au lieu defor (;;). Écrivez :

    js
    const gerbilles = ["Zoé", "Chloé"];gerbilles.forEach((gerbille, i) => {  console.log(`Gerbille #${i} : ${gerbille}`);});

    N'écrivez pas :

    js
    const gerbilles = ["Zoé", "Chloé"];for (let i = 0; i < gerbilles.length; i++) {  console.log(`Gerbille #${i} : ${gerbilles[i]}`);}

Attention :N'utilisez jamaisfor...in avec les tableaux et les chaînes de caractères.

Note :Envisagez de ne pas utiliser de bouclefor du tout. Si vous utilisez unArray (ou uneString pour certaines opérations), privilégiez des méthodes d'itération plus sémantiques commemap(),every(),findIndex(),find(),includes() et bien d'autres.

Instructions conditionnelles

Il y a un cas notable à garder à l'esprit pour les instructionsif...else. Si l'instructionif se termine par unreturn, n'ajoutez pas d'instructionelse.

Continuez directement après l'instructionif. Écrivez :

js
if (test) {  // Exécute une action si test est vrai  // …  return;}// Exécute une action si test est faux// …

N'écrivez pas :

js
if (test) {  // Exécute une action si test est vrai  // …  return;} else {  // Exécute une action si test est faux  // …}

Toujours utiliser les accolades avec les instructions de contrôle et les boucles

Bien que les instructions de contrôle commeif,for etwhile n'exigent pas l'utilisation d'accolades lorsqu'elles ne contiennent qu'une seule instruction, il faut toujours les utiliser. Écrivez :

js
for (const voiture of voituresStockees) {  voiture.peindre("rouge");}

N'écrivez pas :

js
for (const voiture of voituresStockees) voiture.peindre("rouge");

Cela évite d'oublier d'ajouter les accolades lors de l'ajout d'autres instructions.

Instructions switch

Les instructions switch peuvent être un peu piégeuses.

  • N'ajoutez pas d'instructionbreak après unreturn dans un cas précis. Écrivez plutôt lesreturn ainsi :

    js
    switch (espece) {  case "poule":    return ferme.grange;  case "cheval":    return enclos.entree;  default:    return "";}

    Si vous ajoutez unbreak, il sera inatteignable. N'écrivez pas :

    js
    switch (espece) {  case "poule":    return ferme.grange;    break;  case "cheval":    return enclos.entree;    break;  default:    return "";}
  • Utilisezdefault comme dernier cas, et ne terminez pas par unbreak. Si vous devez faire autrement, ajoutez un commentaire pour expliquer pourquoi.

  • Rappelez-vous que lorsque vous déclarez une variable locale dans un cas, il faut utiliser des accolades pour définir une portée :

    js
    switch (fruits) {  case "Orange": {    const tranche = fruit.couper();    manger(tranche);    break;  }  case "Pomme": {    const trognon = fruit.extraireTrognon();    recycler(trognon);    break;  }}

Gestion des erreurs

  • Si certains états de votre programme génèrent des erreurs non interceptées, cela arrêtera l'exécution et peut réduire l'utilité de l'exemple. Il faut donc intercepter les erreurs avec un bloctry...catch, comme ci-dessous :

    js
    try {  console.log(obtenirResultat());} catch (e) {  console.error(e);}
  • Lorsque vous n'avez pas besoin du paramètre du bloccatch, omettez-le :

    js
    try {  console.log(obtenirResultat());} catch {  console.error("Une erreur s'est produite !");}

Note :Gardez à l'esprit que seules les erreursrécupérables doivent être interceptées et traitées. Toutes les erreurs non récupérables doivent être laissées passer et remonter la pile d'appels.

Objets

Noms d'objets

  • Lors de la définition d'une classe, utilisez lePascalCase (en commençant par une majuscule) pour le nom de la classe et lecamelCase (en commençant par une minuscule) pour les propriétés et méthodes de l'objet.

  • Lors de la définition d'une instance d'objet, que ce soit par un littéral ou via un constructeur, utilisez lecamelCase, en commençant par une minuscule, pour le nom de l'instance. Par exemple :

    js
    const hanSolo = new Person("Han Solo", 25, "il/lui");const luke = {  name: "Luke Skywalker",  age: 25,  pronouns: "il/lui",};

Création d'objets

Pour créer des objets généraux (c'est-à-dire sans impliquer de classes), utilisez la notation littérale et non les constructeurs.

Par exemple, faites ainsi :

js
const objet = {};

Ne créez pas un objet général comme ceci :

js
const objet = new Object();

Objets basés sur des classes

  • Utilisez la syntaxe de classe ES pour les objets, pas les anciens constructeurs.

    Par exemple, voici la manière recommandée :

    js
    class Personne {  constructor(nom, age, pronoms) {    this.nom = nom;    this.age = age;    this.pronoms = pronoms;  }  salutation() {    console.log(`Salut ! Je suis ${this.nom}`);  }}
  • Utilisezextends pour l'héritage :

    js
    class Enseignant extends Personne {  // …}

Méthodes

Pour définir des méthodes, utilisez la syntaxe de définition de méthode :

js
const obj = {  foo() {    // …  },  bar() {    // …  },};

Au lieu de :

js
const obj = {  foo: function () {    // …  },  bar: function () {    // …  },};

Propriétés d'objet

  • La méthodeObject.prototype.hasOwnProperty() est obsolète au profit deObject.hasOwn().

  • Lorsque c'est possible, utilisez la forme abrégée pour éviter la duplication de l'identifiant de propriété. Écrivez :

    js
    function creerObjet(nom, age) {  return { nom, age };}

    N'écrivez pas :

    js
    function creerObjet(nom, age) {  return { nom: nom, age: age };}

Opérateurs

Cette section liste nos recommandations sur les opérateurs à utiliser et dans quels cas.

Opérateurs conditionnels

Lorsque vous souhaitez affecter à une variable une valeur littérale selon une condition, utilisez l'opérateur conditionnel (ternaire) plutôt qu'une instructionif...else. Cette règle s'applique aussi lors du retour d'une valeur. Écrivez :

js
const x = condition ? 1 : 2;

N'écrivez pas :

js
let x;if (condition) {  x = 1;} else {  x = 2;}

L'opérateur conditionnel est utile lors de la création de chaînes de caractères pour consigner des informations. Dans ces cas, utiliser une instructionif...else classique conduit à de longs blocs de code pour une opération annexe comme la journalisation, ce qui masque le point central de l'exemple.

Opérateur d'égalité stricte

Préférez les opérateurs d'égalité stricte (triple égal) et d'inégalité stricte aux opérateurs d'égalité (double égal) et d'inégalité non stricts.

Utilisez les opérateurs d'égalité stricte et d'inégalité stricte ainsi :

js
name === "Shilpa";age !== 25;

N'utilisez pas les opérateurs d'égalité et d'inégalité non stricts, comme ci-dessous :

js
name == "Shilpa";age != 25;

Si vous devez utiliser== ou!=, rappelez-vous que== null est le seul cas acceptable. TypeScript échouera dans tous les autres cas, nous ne voulons donc pas les avoir dans nos exemples de code. Pensez à ajouter un commentaire pour expliquer pourquoi vous en avez besoin.

Raccourcis pour les tests booléens

Préférez les raccourcis pour les tests booléens. Par exemple, utilisezif (x) etif (!x), et nonif (x === true) ouif (x === false), sauf si différents types de valeurs « truthy » ou « falsy » sont traités différemment.

Chaînes de caractères

Les littéraux de chaînes de caractères peuvent être entourés de guillemets simples, comme'Une chaîne de caractères', ou de guillemets doubles, comme"Une chaîne de caractères". Ne vous souciez pas du choix : Prettier uniformise automatiquement.

Gabarits de chaînes de caractères

Pour insérer des valeurs dans des chaînes de caractères, utilisez lesgabarits de chaînes de caractères.

  • Voici un exemple de la manière recommandée d'utiliser les gabarits de chaînes de caractères. Leur utilisation évite de nombreuses erreurs d'espacement.

    js
    const name = "Shilpa";console.log(`Salut ! Je suis ${name} !`);

    N'effectuez pas de concaténation de chaînes ainsi :

    js
    const name = "Shilpa";console.log("Salut ! Je suis" + name + "!"); // Salut ! Je suisShilpa!
  • N'abusez pas des gabarits de chaînes de caractères. S'il n'y a pas de substitution, utilisez un littéral de chaîne de caractères classique.

Variables

Noms de variables

De bons noms de variables sont essentiels pour comprendre le code.

  • Utilisez des identifiants courts et évitez les abréviations peu courantes. Les bons noms de variables font généralement entre 3 et 10 caractères, mais ce n'est qu'une indication. Par exemple,accelerometer est plus explicite que l'abréviationacclmtr juste pour gagner des caractères.

  • Essayez d'utiliser des exemples issus du monde réel où chaque variable a une sémantique claire. N'utilisez des noms génériques commefoo etbar que pour des exemples très simples et artificiels.

  • N'utilisez pas lanotation hongroise. Ne préfixez pas le nom de la variable par son type. Par exemple, écrivezbought = car.buyer !== null plutôt quebBought = oCar.sBuyer != null ouname = "Maria Sanchez" au lieu desName = "Maria Sanchez".

  • Pour les collections, évitez d'ajouter le type comme list, array, queue dans le nom. Utilisez le nom du contenu au pluriel. Par exemple, pour un tableau de voitures, utilisezcars et noncarArray oucarList. Il peut y avoir des exceptions, par exemple pour montrer la forme abstraite d'une fonctionnalité sans le contexte d'une application particulière.

  • Pour les valeurs primitives, utilisez lecamelCase, en commençant par une minuscule. N'utilisez pas_. Utilisez des noms concis, lisibles et sémantiques lorsque c'est approprié. Par exemple, utilisezcurrencyName plutôt quecurrency_name.

  • Évitez d'utiliser des articles et des possessifs. Par exemple, utilisezcar au lieu demyCar ouaCar. Il peut y avoir des exceptions, par exemple pour décrire une fonctionnalité de façon générale sans contexte pratique.

  • Utilisez des noms de variables comme ci-dessous :

    js
    const playerScore = 0;const speed = distance / time;

    N'utilisez pas des noms de variables comme ceci :

    js
    const thisIsaveryLONGVariableThatRecordsPlayerscore345654 = 0;const s = d / t;

Note :Le seul cas où il est permis de ne pas utiliser de noms lisibles et sémantiques est lorsqu'une convention très largement reconnue existe, comme l'utilisation dei etj pour les itérateurs de boucle.

Déclaration de variables

Lors de la déclaration de variables et de constantes, utilisez les mots-cléslet etconst, pasvar. Les exemples suivants montrent ce qui est recommandé et ce qui ne l'est pas sur MDN Web Docs :

  • Si une variable ne sera pas réaffectée, préférezconst, comme ceci :

    js
    const name = "Shilpa";console.log(name);
  • Si vous allez changer la valeur d'une variable, utilisezlet comme ci-dessous :

    js
    let age = 40;age++;console.log("Joyeux anniversaire !");
  • L'exemple ci-dessous utiliselet là où il faudraitconst. Le code fonctionnera, mais nous voulons éviter cette utilisation dans les exemples de code MDN Web Docs.

    js
    let name = "Shilpa";console.log(name);
  • L'exemple ci-dessous utiliseconst pour une variable qui est réaffectée. La réaffectation provoquera une erreur.

    js
    const age = 40;age++;console.log("Joyeux anniversaire !");
  • L'exemple ci-dessous utilisevar, ce qui pollue l'espace global :

    js
    var age = 40;var name = "Shilpa";
  • Déclarez une variable par ligne, comme ceci :

    js
    let var1;let var2;let var3 = "Apapou";let var4 = var3;

    N'utilisez pas de déclaration multiple sur une ligne, ni de déclaration chaînée. Évitez de déclarer des variables comme ceci :

    js
    let var1, var2;let var3 = var4 = "Apapou"; // var4 est implicitement créée comme variable globale ; échoue en mode strict

Conversion de type

Évitez les conversions de type implicites. En particulier, évitez+val pour forcer une valeur à devenir un nombre et"" + val pour forcer une valeur à devenir une chaîne de caractères. UtilisezNumber() etString(), sansnew. Écrivez :

js
class Person {  #name;  #birthYear;  constructor(name, year) {    this.#name = String(name);    this.#birthYear = Number(year);  }}

N'écrivez pas :

js
class Person {  #name;  #birthYear;  constructor(name, year) {    this.#name = "" + name;    this.#birthYear = +year;  }}

APIs Web à éviter

En plus de ces fonctionnalités du langage JavaScript, nous recommandons quelques règles concernant les APIs Web à garder à l'esprit.

Éviter les préfixes navigateurs

Si tous les principaux navigateurs (Chrome, Edge, Firefox et Safari) prennent en charge une fonctionnalité, n'ajoutez pas de préfixe. Écrivez :

js
const context = new AudioContext();

Évitez la complexité supplémentaire des préfixes. N'écrivez pas :

js
const AudioContext = window.AudioContext || window.webkitAudioContext;const context = new AudioContext();

La même règle s'applique aux préfixes CSS.

Éviter les APIs obsolètes

Lorsqu'une méthode, une propriété ou une interface entière est obsolète, ne l'utilisez pas (sauf dans sa propre documentation). Utilisez plutôt l'API moderne.

Voici une liste non exhaustive d'APIs Web à éviter et par quoi les remplacer :

  • Utilisezfetch() à la place de XHR (XMLHttpRequest).
  • UtilisezAudioWorklet à la place deScriptProcessorNode, dans l'API Web Audio.

Utiliser des APIs sûres et fiables

  • N'utilisez pasElement.innerHTML pour insérer du contenu purement textuel dans un élément : utilisezNode.textContent à la place. La propriétéinnerHTML pose des problèmes de sécurité si la personne développant ne contrôle pas le paramètre. Plus nous évitons de l'utiliser dans nos exemples, moins il y aura de failles de sécurité lorsque le code sera copié-collé.

    L'exemple ci-dessous montre l'utilisation detextContent.

    js
    const text = "Hello to all you good people";const para = document.createElement("p");para.textContent = text;

    N'utilisez pasinnerHTML pour insérerdu texte pur dans des nœuds du DOM.

    js
    const text = "Hello to all you good people";const para = document.createElement("p");para.innerHTML = text;
  • La fonctionalert() est peu fiable. Elle ne fonctionne pas dans les exemples interactifs de MDN Web Docs qui sont dans un<iframe>. De plus, elle est modale pour toute la fenêtre, ce qui est gênant. Dans les exemples statiques, utilisezconsole.log() ouconsole.error(). Dans lesexemples interactifs, évitezconsole.log() etconsole.error() car ils ne sont pas affichés. Utilisez un élément d'interface dédié.

Utiliser la bonne méthode de journalisation

  • Pour consigner un message, utilisezconsole.log().
  • Pour consigner une erreur, utilisezconsole.error().

Voir aussi

Référence du langage JavaScript — parcourez nos pages de référence JavaScript pour découvrir de bons extraits JavaScript concis et pertinents.

Help improve MDN

Learn how to contribute

Cette page a été modifiée le par lescontributeurs du MDN.


[8]ページ先頭

©2009-2026 Movatter.jp