Function : propriété displayName

Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.

La propriété optionnelle displayName d'une instance de Function définit le nom affiché de la fonction.

Dans cet article

Valeur

La propriété displayName n'est initialement présente sur aucune fonction — elle est ajoutée par les auteur·ice·s du code. À des fins d'affichage, elle doit être une chaîne de caractères.

Description

Si elle est présente, la propriété displayName peut être préférée par les consoles et profileurs à la propriété name pour l'affichage du nom d'une fonction.

Parmi les navigateurs, seule la console de Firefox utilise cette propriété. Les outils React devtools utilisent également la propriété displayName (angl.) lors de l'affichage de l'arbre des composants.

Firefox tente de décoder la propriété displayName qui peut être générée par l'algorithme de convention de nommage des fonctions JavaScript anonymes (angl.). Les motifs suivants sont détectés :

Si displayName se termine par une séquence de caractères alphanumériques, _ et $, le plus long suffixe de ce type est affiché.
Si displayName se termine par une séquence de caractères entourés de [], cette séquence est affichée sans les crochets.
Si displayName se termine par une séquence de caractères alphanumériques et _ suivie de /, ., ou <, la séquence est retournée sans les caractères /, ., ou < finaux.
Si displayName se termine par une séquence de caractères alphanumériques et _ suivie de (^), la séquence est affichée sans le (^).

Si aucun des motifs ci-dessus ne correspond, l'intégralité de displayName est affichée.

Exemples

Définir un displayName

En entrant le code suivant dans la console de Firefox, cela devrait afficher quelque chose comme function MaFonction() :

js
function a() {}
a.displayName = "MaFonction";

a; // function MaFonction()

Changer dynamiquement le displayName

Vous pouvez changer dynamiquement le displayName d'une fonction :

js
const objet = {
  // anonyme
  uneMethode: function uneMethode(value) {
    uneMethode.displayName = `uneMethode (${value})`;
  },
};

console.log(objet.uneMethode.displayName); // undefined

objet.uneMethode("123");
console.log(objet.uneMethode.displayName); // "uneMethode (123)"

Nettoyage de displayName

Firefox devtools nettoie quelques motifs courants dans la propriété displayName avant de l'afficher.

js
function toto() {}

function nomTest(nom) {
  toto.displayName = nom;
  console.log(toto);
}

nomTest("$toto$"); // function $toto$()
nomTest("toto bar"); // function bar()
nomTest("Foo.prototype.add"); // function add()
nomTest("toto ."); // function toto .()
nomTest("toto <"); // function toto <()
nomTest("toto?"); // function toto?()
nomTest("toto()"); // function toto()()

nomTest("[...]"); // function ...()
nomTest("toto<"); // function toto()
nomTest("toto..."); // function toto()
nomTest("toto(^)"); // function toto()