Comment contrôler les décimales dans le formatage des pourcentages
Définir des décimales exactes ou maximales pour les valeurs en pourcentage afin de contrôler la précision et l'affichage
Introduction
Différents contextes nécessitent différents niveaux de précision lors de l'affichage des pourcentages. Un taux d'intérêt de 3,25% nécessite exactement deux décimales pour communiquer le taux précis. Un taux de conversion affiché sur un tableau de bord est plus lisible sous la forme 85,5% avec une décimale. Un pourcentage d'achèvement fonctionne parfaitement comme 100% sans aucune décimale.
Sans contrôle sur les décimales, le formatage des pourcentages devient incohérent. La valeur 0,8547 pourrait s'afficher comme 85% à un endroit et 85,47% à un autre, créant une confusion quant à la représentation exacte. En contrôlant explicitement les décimales, vous assurez une précision cohérente dans toute votre application.
L'API Intl.NumberFormat de JavaScript fournit les options minimumFractionDigits et maximumFractionDigits pour contrôler le nombre de décimales qui apparaissent dans le formatage des pourcentages. Ces options fonctionnent avec le formatage adapté aux paramètres régionaux pour afficher correctement les pourcentages pour les utilisateurs du monde entier.
Comment les pourcentages s'affichent par défaut
L'API Intl.NumberFormat formate les pourcentages sans décimales par défaut. Elle multiplie la valeur d'entrée par 100, arrondit au nombre entier le plus proche et ajoute le signe de pourcentage.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent"
});
console.log(formatter.format(0.8547));
// Résultat : "85%"
console.log(formatter.format(0.8234));
// Résultat : "82%"
console.log(formatter.format(0.0325));
// Résultat : "3%"
Tous les pourcentages s'affichent sous forme de nombres entiers, quelle que soit la précision de la valeur d'entrée. Le formateur arrondit 0,8547 à 85% et 0,8234 à 82%, en éliminant les informations décimales.
Ce comportement par défaut fonctionne bien pour afficher des pourcentages d'achèvement, des résultats de sondage ou d'autres valeurs où la précision décimale n'ajoute aucune information significative. Cependant, de nombreux cas d'utilisation nécessitent d'afficher des décimales pour communiquer des valeurs précises.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent"
});
const conversionRate = 0.8547;
console.log(formatter.format(conversionRate));
// Résultat : "85%"
Afficher un taux de conversion comme 85% alors que la valeur réelle est 85,47% masque une précision importante qui affecte les décisions commerciales et l'analyse.
Formatage des pourcentages avec un nombre exact de décimales
Pour afficher un nombre spécifique de décimales, définissez minimumFractionDigits et maximumFractionDigits à la même valeur. Cela garantit que chaque pourcentage s'affiche avec exactement ce nombre de décimales.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
console.log(formatter.format(0.8547));
// Résultat: "85.47%"
console.log(formatter.format(0.0325));
// Résultat: "3.25%"
console.log(formatter.format(0.85));
// Résultat: "85.00%"
Le formateur affiche exactement deux décimales pour toutes les valeurs. Lorsque l'entrée a plus de précision, le formateur arrondit à deux décimales. Lorsque l'entrée a moins de décimales, le formateur complète avec des zéros.
Définir les deux options à la même valeur garantit un nombre constant de décimales pour tous les pourcentages dans votre application. Cette cohérence est importante pour les affichages financiers, les tableaux de données et toute interface où les utilisateurs comparent plusieurs valeurs en pourcentage.
Formatage avec une décimale
Définissez les deux options à 1 pour obtenir exactement une décimale.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 1,
maximumFractionDigits: 1
});
console.log(formatter.format(0.8547));
// Résultat: "85.5%"
console.log(formatter.format(0.85));
// Résultat: "85.0%"
console.log(formatter.format(0.8234));
// Résultat: "82.3%"
Le formateur arrondit 0.8547 à 85.5% et affiche 0.85 comme 85.0% avec un zéro à la fin. Ce format convient bien aux tableaux de bord où une décimale offre une précision suffisante sans submerger les utilisateurs avec trop de chiffres.
Formatage avec trois décimales ou plus
Les applications scientifiques ou financières nécessitent parfois plus de deux décimales. Définissez les deux options à 3 ou plus pour une précision accrue.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 3,
maximumFractionDigits: 3
});
console.log(formatter.format(0.854732));
// Résultat: "85.473%"
console.log(formatter.format(0.85));
// Résultat: "85.000%"
Le formateur affiche exactement trois décimales, complétant avec des zéros si nécessaire. Ce niveau de précision convient aux mesures de laboratoire, aux analyses statistiques ou aux calculs financiers nécessitant une grande exactitude.
Formatage des pourcentages avec jusqu'à N décimales
Parfois, vous souhaitez afficher des décimales uniquement lorsqu'elles fournissent des informations pertinentes. Définissez maximumFractionDigits pour limiter la précision tout en permettant au formateur d'omettre les zéros non significatifs.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
maximumFractionDigits: 2
});
console.log(formatter.format(0.8547));
// Résultat : "85.47%"
console.log(formatter.format(0.85));
// Résultat : "85%"
console.log(formatter.format(0.8));
// Résultat : "80%"
Le formateur affiche jusqu'à deux décimales mais supprime les zéros non significatifs. La valeur 0.8547 s'affiche comme 85.47% avec les deux décimales, tandis que 0.85 s'affiche comme 85% sans zéros inutiles.
Cette approche fonctionne bien pour afficher des statistiques, des métriques ou des valeurs calculées où les zéros non significatifs n'ajoutent aucune information. Afficher 85% au lieu de 85,00% crée des affichages plus propres et plus lisibles.
Vous pouvez définir minimumFractionDigits à une valeur inférieure à maximumFractionDigits pour contrôler le nombre de zéros non significatifs qui apparaissent.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 1,
maximumFractionDigits: 2
});
console.log(formatter.format(0.8547));
// Résultat : "85.47%"
console.log(formatter.format(0.85));
// Résultat : "85.0%"
console.log(formatter.format(0.8));
// Résultat : "80.0%"
Maintenant, le formateur affiche toujours au moins une décimale, mais n'affiche une deuxième décimale que lorsque c'est nécessaire. Ce format maintient une cohérence visuelle tout en évitant une précision inutile.
Formatage local pour les séparateurs décimaux des pourcentages
Différentes locales utilisent différents caractères comme séparateurs décimaux. L'API Intl.NumberFormat utilise automatiquement le séparateur correct pour chaque locale.
const usFormatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const deFormatter = new Intl.NumberFormat("de-DE", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const rate = 0.8547;
console.log(usFormatter.format(rate));
// Résultat : "85.47%"
console.log(deFormatter.format(rate));
// Résultat : "85,47 %"
Le formateur anglais américain utilise un point comme séparateur décimal et place le signe de pourcentage immédiatement après le nombre. Le formateur allemand utilise une virgule comme séparateur décimal et ajoute un espace avant le signe de pourcentage.
Ces différences s'étendent à de nombreuses locales. Le français utilise une virgule comme l'allemand. L'arabe utilise des formes de chiffres différentes. L'API Intl.NumberFormat gère automatiquement toutes ces variations lorsque vous fournissez la locale appropriée.
const frFormatter = new Intl.NumberFormat("fr-FR", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const arFormatter = new Intl.NumberFormat("ar-EG", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const rate = 0.8547;
console.log(frFormatter.format(rate));
// Résultat : "85,47 %"
console.log(arFormatter.format(rate));
// Résultat : "٨٥٫٤٧٪"
Le formateur arabe utilise des chiffres arabo-indiens et le signe de pourcentage arabe. En utilisant un formatage adapté à la locale, vos pourcentages s'affichent correctement pour les utilisateurs, quelle que soit leur langue et leur région.
Quand utiliser des décimales exactes ou maximales
Choisissez entre des décimales exactes et maximales en fonction du contexte et de l'objectif de votre affichage de pourcentage.
Utilisez des décimales exactes pour les pourcentages financiers comme les taux d'intérêt, les TAEG ou les rendements. Ces valeurs nécessitent une précision constante pour la conformité réglementaire et les attentes des utilisateurs. Un taux d'intérêt doit toujours s'afficher comme 3,25%, jamais comme 3,3% ou 3%, pour éviter toute confusion sur le taux réel.
Utilisez des décimales exactes pour les tableaux de données et les affichages comparatifs où les utilisateurs lisent plusieurs pourcentages ensemble. Des décimales cohérentes facilitent la comparaison et évitent les incohérences visuelles qui suggèrent une précision variable dans les données sous-jacentes.
Utilisez des décimales maximales pour les tableaux de bord et les statistiques sommaires où la lisibilité compte plus que la précision. Afficher 85% au lieu de 85,00% crée des interfaces plus épurées. Affichez les décimales uniquement lorsqu'elles fournissent des informations significatives.
Utilisez des décimales maximales pour les pourcentages calculés qui pourraient naturellement être des nombres entiers. Les pourcentages d'achèvement, les taux de réussite et les pourcentages de distribution se terminent souvent par ,00 et sont plus élégants sans zéros finaux.
Formatage des pourcentages négatifs avec décimales
Les options de décimales fonctionnent de la même manière pour les pourcentages négatifs. Le formateur affiche les décimales appropriées, que le pourcentage soit positif ou négatif.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
console.log(formatter.format(-0.0325));
// Résultat : "-3.25%"
console.log(formatter.format(-0.1547));
// Résultat : "-15.47%"
Le signe négatif apparaît avant le nombre, et les décimales s'affichent selon vos options de formatage. Cela fonctionne pour afficher les variations de pourcentage, les baisses ou les pertes.
Réutilisation des formateurs pour une meilleure performance
La création d'une nouvelle instance Intl.NumberFormat nécessite un travail d'initialisation. Lorsque vous formatez plusieurs pourcentages avec les mêmes options, créez le formateur une seule fois et réutilisez-le.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const rates = [0.8547, 0.0325, 0.9123, 0.0045];
rates.forEach(rate => {
console.log(formatter.format(rate));
});
// Résultat :
// "85.47%"
// "3.25%"
// "91.23%"
// "0.45%"
Ce modèle est plus efficace que de créer un nouveau formateur pour chaque pourcentage. La différence de performance devient perceptible lors du formatage de centaines ou de milliers de valeurs, comme lors du rendu de tableaux ou de graphiques.
Utilisation de la locale préférée de l'utilisateur
Au lieu de coder en dur une locale, utilisez les préférences linguistiques du navigateur de l'utilisateur pour formater les pourcentages dans le format attendu. La propriété navigator.language fournit la locale préférée de l'utilisateur.
const formatter = new Intl.NumberFormat(navigator.language, {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const rate = 0.8547;
console.log(formatter.format(rate));
// Le résultat varie selon la locale de l'utilisateur
// Pour en-US : "85.47%"
// Pour de-DE : "85,47 %"
// Pour fr-FR : "85,47 %"
Vous pouvez également passer le tableau complet navigator.languages pour permettre à l'API Intl de sélectionner la première locale prise en charge parmi les préférences de l'utilisateur.
const formatter = new Intl.NumberFormat(navigator.languages, {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
Cette approche fournit une solution de repli automatique si la première préférence de l'utilisateur n'est pas prise en charge par l'environnement d'exécution.