Comment contrôler les décimales dans le formatage des pourcentages
Définissez un nombre exact ou maximum de décimales pour les valeurs de 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 fonctionne mieux sous la forme 85,5 % avec une décimale pour une meilleure lisibilité. Un pourcentage de complétion fonctionne très bien sous la forme 100 % sans aucune décimale.
Sans contrôle sur les décimales, le formatage des pourcentages devient incohérent. La valeur 0,8547 peut 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 garantissez 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 aux 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));
// Output: "85%"
console.log(formatter.format(0.8234));
// Output: "82%"
console.log(formatter.format(0.0325));
// Output: "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 supprimant les informations décimales.
Ce comportement par défaut fonctionne bien pour afficher les pourcentages de complétion, les résultats de sondages ou d'autres valeurs où la précision décimale n'ajoute aucune information significative. Cependant, de nombreux cas d'usage 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));
// Output: "85%"
Afficher un taux de conversion à 85 % alors que la valeur réelle est de 85,47 % masque une précision importante qui affecte les décisions commerciales et l'analyse.
Formater les pourcentages avec un nombre exact de décimales
Pour afficher un nombre spécifique de décimales, définissez minimumFractionDigits et maximumFractionDigits sur 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));
// Output: "85.47%"
console.log(formatter.format(0.0325));
// Output: "3.25%"
console.log(formatter.format(0.85));
// Output: "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 sur la même valeur garantit un nombre de décimales cohérent pour tous les pourcentages de 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 de pourcentage.
Formater avec une décimale
Définissez les deux options sur 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));
// Output: "85.5%"
console.log(formatter.format(0.85));
// Output: "85.0%"
console.log(formatter.format(0.8234));
// Output: "82.3%"
Le formateur arrondit 0,8547 à 85,5 % et affiche 0,85 comme 85,0 % avec un zéro final. Ce format fonctionne bien pour les affichages de tableaux de bord où une décimale fournit une précision suffisante sans submerger les utilisateurs de chiffres.
Formater 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 sur 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));
// Output: "85.473%"
console.log(formatter.format(0.85));
// Output: "85.000%"
Le formateur affiche exactement trois décimales, en complétant avec des zéros si nécessaire. Ce niveau de précision convient aux mesures de laboratoire, à l'analyse statistique ou aux calculs financiers nécessitant une grande précision.
Formater les pourcentages avec jusqu'à N décimales
Parfois, vous souhaitez afficher les décimales uniquement lorsqu'elles fournissent des informations significatives. Définissez maximumFractionDigits pour limiter la précision tout en permettant au formateur d'omettre les zéros de fin inutiles.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
maximumFractionDigits: 2
});
console.log(formatter.format(0.8547));
// Output: "85.47%"
console.log(formatter.format(0.85));
// Output: "85%"
console.log(formatter.format(0.8));
// Output: "80%"
Le formateur affiche jusqu'à deux décimales mais supprime les zéros de fin. 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 de fin n'apportent 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 de fin qui apparaissent.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 1,
maximumFractionDigits: 2
});
console.log(formatter.format(0.8547));
// Output: "85.47%"
console.log(formatter.format(0.85));
// Output: "85.0%"
console.log(formatter.format(0.8));
// Output: "80.0%"
Désormais, le formateur affiche toujours au moins une décimale mais affiche une deuxième décimale uniquement si nécessaire. Ce format maintient la cohérence visuelle tout en évitant une précision inutile.
Formatage selon les paramètres régionaux pour les séparateurs décimaux de pourcentage
Différents paramètres régionaux utilisent différents caractères comme séparateurs décimaux. L'API Intl.NumberFormat utilise automatiquement le séparateur correct pour chaque paramètre régional.
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));
// Output: "85.47%"
console.log(deFormatter.format(rate));
// Output: "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 une espace avant le signe de pourcentage.
Ces différences s'étendent à de nombreux paramètres régionaux. 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 les paramètres régionaux appropriés.
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));
// Output: "85,47 %"
console.log(arFormatter.format(rate));
// Output: "٨٥٫٤٧٪"
Le formateur arabe utilise des chiffres indo-arabes et le signe de pourcentage arabe. En utilisant un formatage tenant compte des paramètres régionaux, vos pourcentages s'affichent correctement pour les utilisateurs, quelle que soit leur langue et leur région.
Quand utiliser les décimales exactes ou maximales
Choisissez entre les décimales exactes et maximales en fonction du contexte et de l'objectif de l'affichage de votre pourcentage.
Utilisez les décimales exactes pour les pourcentages financiers tels que les taux d'intérêt, le TAEG ou les pourcentages de rendement. Ces valeurs nécessitent une précision cohérente 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 les décimales exactes pour les tableaux de données et les affichages de comparaison où les utilisateurs lisent plusieurs pourcentages ensemble. Des décimales cohérentes facilitent la comparaison et évitent l'incohérence visuelle qui suggère une précision variable dans les données sous-jacentes.
Utilisez les décimales maximales pour les affichages de tableaux de bord et les statistiques récapitulatives 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 les décimales maximales pour les pourcentages calculés qui peuvent naturellement être des nombres entiers. Les pourcentages de complétion, les taux de réussite et les pourcentages de distribution se terminent souvent par ,00 et ont une meilleure apparence sans zéros de fin.
Formatage des pourcentages négatifs avec des 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));
// Output: "-3.25%"
console.log(formatter.format(-0.1547));
// Output: "-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 de meilleures performances
La création d'une nouvelle instance de Intl.NumberFormat nécessite un travail d'initialisation. Lorsque vous formatez de nombreux pourcentages avec les mêmes options, créez le formateur une 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));
});
// Output:
// "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 notable lors du formatage de centaines ou de milliers de valeurs, comme lors du rendu de tableaux ou de graphiques.
Utiliser 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 leur 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));
// Output varies by user's locale
// For en-US: "85.47%"
// For de-DE: "85,47 %"
// For fr-FR: "85,47 %"
Vous pouvez également passer l'intégralité du tableau 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 un repli automatique si la première préférence de l'utilisateur n'est pas prise en charge par l'environnement d'exécution.