Comment formater les pourcentages avec le signe pourcent

Introduction

Les pourcentages apparaissent dans de nombreuses applications, de l'affichage de la progression d'achèvement à l'affichage des taux d'intérêt et des montants de réduction. Une approche simple comme la concaténation d'un nombre avec un signe pourcent fonctionne pour les cas de base, mais elle ne tient pas compte de la façon dont les différentes langues et régions formatent les pourcentages. En turc, le signe pourcent apparaît avant le nombre comme %50. En français, une espace sépare le nombre du signe pourcent comme 50 %. L'arabe utilise un caractère pourcent spécial au lieu du symbole % standard.

L'API JavaScript Intl.NumberFormat gère ces différences de formatage automatiquement. En définissant l'option style sur "percent", vous obtenez des pourcentages correctement formatés pour n'importe quelle locale sans écrire de code spécifique à la locale.

Pourquoi le formatage des pourcentages varie selon la locale

La position du signe pourcent et les règles d'espacement diffèrent selon les locales. L'anglais place le signe pourcent directement après le nombre sans espace. Le français ajoute une espace avant le signe pourcent. Le turc place le signe pourcent avant le nombre. Ces variations reflètent les modèles de lecture naturels et les conventions de chaque langue.

Les différences de formatage vont au-delà du simple placement du signe. Certaines locales utilisent des caractères différents pour le symbole pourcent. L'arabe utilise ٪ (U+066A) au lieu du signe pourcent ASCII. Le séparateur décimal et le séparateur de milliers varient également selon la locale, tout comme pour le formatage des nombres réguliers.

Lorsque vous codez en dur le formatage des pourcentages avec la concaténation de chaînes, vous forcez tous les utilisateurs à voir le format d'une seule locale. Un utilisateur français voyant 50% au lieu de 50 % vit un format non naturel. Un utilisateur turc voyant 50% alors qu'il s'attend à %50 fait face au même problème. L'API Intl résout ce problème en appliquant les règles de formatage correctes pour chaque locale.

Formater les nombres en pourcentages

L'option style dans Intl.NumberFormat contrôle si un nombre est formaté comme un nombre simple, une devise, un pourcentage ou une unité. Définissez style sur "percent" pour formater les nombres en pourcentages.

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent"
});

console.log(formatter.format(0.75));
// Output: "75%"

console.log(formatter.format(0.05));
// Output: "5%"

console.log(formatter.format(1.5));
// Output: "150%"

Le formateur multiplie automatiquement la valeur d'entrée par 100 et ajoute le signe pourcentage. Cela signifie que vous transmettez des valeurs fractionnaires au formateur. Une valeur de 0,75 devient 75 %. Une valeur de 1,5 devient 150 %.

Cette convention d'entrée fractionnaire s'aligne sur le fonctionnement des pourcentages en mathématiques et dans la plupart des calculs de programmation. Lorsque vous calculez un pourcentage comme un taux de croissance ou un ratio de complétion, le résultat est généralement une valeur décimale entre 0 et 1. Vous pouvez transmettre cette valeur directement au formateur sans la convertir d'abord en pourcentage.

Comprendre les valeurs d'entrée fractionnaires

Le formateur de pourcentage attend une entrée fractionnaire où 1,0 représente 100 %. Ce choix de conception correspond à la façon dont les pourcentages sont calculés dans le code.

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent"
});

// Calculating completion percentage
const completed = 75;
const total = 100;
const ratio = completed / total;

console.log(formatter.format(ratio));
// Output: "75%"

// Calculating growth rate
const oldValue = 1000;
const newValue = 1250;
const growth = (newValue - oldValue) / oldValue;

console.log(formatter.format(growth));
// Output: "25%"

Lorsque vous divisez completed par total, vous obtenez 0,75. Transmettez cela directement au formateur, et il s'affiche comme 75 %. Lorsque vous calculez la croissance comme le ratio du changement par rapport à la valeur d'origine, vous obtenez 0,25. Le formateur affiche cela comme 25 %.

Cette approche évite une erreur courante où les développeurs multiplient par 100 avant le formatage, ce qui donne des valeurs comme 7500 % au lieu de 75 %. Le formateur gère la multiplication, vous travaillez donc avec la représentation décimale naturelle dans votre code.

Gérer les valeurs en dehors de la plage 0-1

Les pourcentages ne sont pas limités aux valeurs entre 0 % et 100 %. Les valeurs inférieures à zéro représentent des pourcentages négatifs. Les valeurs supérieures à 1,0 représentent des pourcentages supérieurs à 100 %.

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent"
});

console.log(formatter.format(-0.15));
// Output: "-15%"

console.log(formatter.format(2.5));
// Output: "250%"

console.log(formatter.format(0.0025));
// Output: "0%"

Les valeurs négatives sont formatées avec un signe moins. Cela est utile pour afficher des diminutions, des pertes ou des taux de croissance négatifs. Les valeurs supérieures à 1,0 sont formatées en pourcentages au-dessus de 100 %, ce qui est courant pour afficher une croissance d'une année sur l'autre ou des comparaisons où la nouvelle valeur dépasse la valeur de référence.

Les très petites valeurs peuvent être arrondies à 0 % en raison des paramètres de précision par défaut. La valeur 0,0025, qui représente 0,25 %, s'affiche comme 0 % car le nombre maximum de chiffres fractionnaires par défaut pour les pourcentages est 0. La prochaine leçon couvre le contrôle des décimales pour afficher ces petits pourcentages avec précision.

Formatage des pourcentages dans différentes locales

Le formatage des pourcentages s'adapte à la locale que vous spécifiez. Chaque locale applique ses propres règles pour le placement du signe, l'espacement et les symboles.

const enFormatter = new Intl.NumberFormat("en-US", {
  style: "percent"
});

console.log(enFormatter.format(0.5));
// Output: "50%"

const frFormatter = new Intl.NumberFormat("fr-FR", {
  style: "percent"
});

console.log(frFormatter.format(0.5));
// Output: "50 %"

const trFormatter = new Intl.NumberFormat("tr-TR", {
  style: "percent"
});

console.log(trFormatter.format(0.5));
// Output: "%50"

const arFormatter = new Intl.NumberFormat("ar-SA", {
  style: "percent"
});

console.log(arFormatter.format(0.5));
// Output: "٪50"

L'anglais place le signe pour cent immédiatement après le nombre. Le français ajoute une espace avant le signe pour cent. Le turc place le signe pour cent avant le nombre. L'arabe utilise le signe pour cent arabe et suit la direction de texte de droite à gauche.

Ces différences se produisent automatiquement en fonction du paramètre de locale. Vous n'avez pas besoin d'écrire de logique conditionnelle pour gérer différentes locales. Créez un formateur avec la locale de l'utilisateur, et il produit la sortie correcte pour cette locale.

Contrôle des décimales dans les pourcentages

Par défaut, le formatage des pourcentages n'affiche aucune décimale. Une valeur comme 0,755 est formatée en 76 % après arrondi. Vous pouvez contrôler le nombre de décimales en utilisant les options minimumFractionDigits et maximumFractionDigits.

const defaultFormatter = new Intl.NumberFormat("en-US", {
  style: "percent"
});

console.log(defaultFormatter.format(0.755));
// Output: "76%"

const oneDecimalFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});

console.log(oneDecimalFormatter.format(0.755));
// Output: "75.5%"

const twoDecimalFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(twoDecimalFormatter.format(0.755));
// Output: "75.50%"

L'option minimumFractionDigits garantit que le formateur affiche au moins ce nombre de décimales, en ajoutant des zéros de fin si nécessaire. L'option maximumFractionDigits limite le nombre de décimales, en arrondissant la valeur si nécessaire.

Définir les deux sur la même valeur garantit un formatage cohérent pour tous les pourcentages. Cela est utile dans les tableaux et graphiques où vous souhaitez que tous les pourcentages s'alignent visuellement.

La prochaine leçon couvre le contrôle des décimales de manière plus approfondie, y compris comment gérer les zéros de fin et afficher avec précision les très petits pourcentages.

Combiner les pourcentages avec l'affichage du signe

Le formatage des pourcentages fonctionne avec l'option signDisplay pour afficher explicitement les signes plus pour les pourcentages positifs. Cela est utile lors de l'affichage de changements ou de taux de croissance où le signe indique la direction.

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  signDisplay: "always",
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});

console.log(formatter.format(0.0523));
// Output: "+5.2%"

console.log(formatter.format(-0.0341));
// Output: "-3.4%"

console.log(formatter.format(0));
// Output: "+0.0%"

L'option signDisplay a été abordée dans une leçon précédente. Lorsqu'elle est combinée avec le formatage des pourcentages, elle clarifie si un pourcentage représente une augmentation ou une diminution. Sans le signe plus explicite, les pourcentages positifs pourraient être ambigus dans des contextes où les gains et les pertes sont affichés.

Formater zéro en pourcentage

Zéro se formate par défaut comme 0 %. La façon dont vous gérez zéro dépend de si zéro représente aucun changement, aucune valeur ou une mesure significative.

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent"
});

console.log(formatter.format(0));
// Output: "0%"

const withSignFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  signDisplay: "exceptZero"
});

console.log(withSignFormatter.format(0.05));
// Output: "+5%"

console.log(withSignFormatter.format(0));
// Output: "0%"

L'utilisation de signDisplay: "exceptZero" affiche les signes pour les pourcentages positifs et négatifs mais omit le signe pour zéro. Cela rend zéro visuellement distinct lorsqu'il représente un état neutre comme aucun changement.

Quand utiliser le formatage des pourcentages

Utilisez le formatage des pourcentages lors de l'affichage de ratios, taux ou proportions qui sont naturellement exprimés en pourcentages. Les cas d'usage courants incluent la progression d'achèvement, les taux d'intérêt, les montants de remise, les taux de croissance, les taux de réussite et les valeurs de probabilité.

N'utilisez pas le formatage des pourcentages lorsque vous avez besoin que le signe pourcent apparaisse à une position spécifique indépendamment de la locale. Si votre design nécessite que le signe pourcent apparaisse toujours à droite pour une cohérence visuelle, utilisez plutôt la concaténation de chaînes. Cependant, cela sacrifie l'exactitude de l'internationalisation.

Évitez également le formatage en pourcentage lorsque vous travaillez avec des valeurs déjà multipliées par 100. Si vos données stockent les pourcentages sous forme de nombres entiers où 75 signifie 75 %, divisez par 100 avant le formatage ou utilisez un formatage de nombre simple avec un signe pourcentage ajouté manuellement.

Comprendre la précision du formateur de pourcentage

La précision par défaut pour le formatage en pourcentage est de 0 décimale. Cela diffère du formatage de nombre simple, qui adapte la précision en fonction de la valeur d'entrée. Le formateur de pourcentage arrondit les valeurs à des pourcentages entiers sauf si vous définissez explicitement des options de chiffres fractionnaires.

const formatter = new Intl.NumberFormat("en-US", {
  style: "percent"
});

console.log(formatter.format(0.755));
// Output: "76%"

console.log(formatter.format(0.754));
// Output: "75%"

console.log(formatter.format(0.001));
// Output: "0%"

Les valeurs s'arrondissent au pourcentage entier le plus proche. La valeur 0,755 s'arrondit à 76 %. La valeur 0,754 s'arrondit à 75 %. Les très petites valeurs comme 0,001 s'arrondissent à 0 %.

Si vous devez afficher de petits pourcentages ou des pourcentages fractionnaires, augmentez le nombre maximum de chiffres fractionnaires. La prochaine leçon couvre le contrôle de la précision en détail.