Comment contrôler les signes plus et moins dans le formatage des devises

Introduction

Lorsque vous affichez un montant de transaction comme 500 $ dans une application bancaire, les utilisateurs ne peuvent pas déterminer s'il s'agit d'un dépôt ou d'un retrait. L'absence du signe plus ou moins crée une ambiguïté. En affichant +500 $ ou -500 $, vous communiquez clairement la direction de la transaction.

Les applications financières nécessitent un contrôle précis sur la façon dont les signes apparaissent avec les montants en devise. Les historiques de transactions montrent les dépôts et les retraits avec des signes explicites. Les états des profits et pertes affichent les gains et les pertes avec des indicateurs positifs et négatifs clairs. Les changements de solde de compte nécessitent des signes visibles pour montrer si l'argent est entré ou sorti d'un compte. L'option signDisplay de Intl.NumberFormat de JavaScript permet de contrôler exactement quand les signes plus et moins apparaissent avec les devises formatées.

Comment les devises sont formatées par défaut

Par défaut, Intl.NumberFormat affiche un signe moins pour les montants négatifs en devise et aucun signe pour les montants positifs.

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

console.log(formatter.format(250.50));
// Résultat : "$250.50"

console.log(formatter.format(-75.25));
// Résultat : "-$75.25"

console.log(formatter.format(0));
// Résultat : "$0.00"

Ce comportement par défaut fonctionne bien pour afficher les prix et les soldes de compte. Cependant, lors de l'affichage des montants de transaction ou des changements financiers, l'absence d'un signe plus sur les valeurs positives rend la direction peu claire.

Utilisation de signDisplay pour contrôler les signes de devise

L'option signDisplay contrôle quand les signes plus et moins apparaissent dans les devises formatées. Passez cette option lors de la création d'un formateur de nombres pour les devises.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  signDisplay: "always"
});

console.log(formatter.format(250.50));
// Résultat : "+$250.50"

console.log(formatter.format(-75.25));
// Résultat : "-$75.25"

Maintenant, les montants positifs s'affichent avec un signe plus, rendant les dépôts et les gains explicites plutôt qu'implicites.

Comprendre les valeurs signDisplay pour les devises

L'option signDisplay accepte cinq valeurs. Chaque valeur sert à des fins spécifiques dans les affichages financiers.

Valeur auto pour le formatage standard des devises

La valeur "auto" est le comportement par défaut. Elle affiche le signe moins pour les montants négatifs mais aucun signe pour les montants positifs.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  signDisplay: "auto"
});

console.log(formatter.format(1000));
// Output: "$1,000.00"

console.log(formatter.format(-500));
// Output: "-$500.00"

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

Utilisez "auto" pour afficher les prix, les soldes de compte et autres valeurs monétaires absolues où les montants négatifs doivent être identifiés mais les montants positifs sont présumés.

Valeur always pour montrer toutes les directions de transaction

La valeur "always" affiche les signes pour tous les montants, y compris positifs, négatifs et zéro.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  signDisplay: "always"
});

console.log(formatter.format(1000));
// Output: "+$1,000.00"

console.log(formatter.format(-500));
// Output: "-$500.00"

console.log(formatter.format(0));
// Output: "+$0.00"

Utilisez "always" pour les historiques de transactions, les comptes de résultat et les flux d'activité de compte où la direction du mouvement d'argent est importante pour chaque entrée. Le signe plus explicite clarifie que les montants positifs représentent des dépôts, des gains ou des fonds entrants.

Valeur exceptZero pour mettre en évidence les changements réels

La valeur "exceptZero" affiche les signes pour les montants positifs et négatifs mais omet le signe pour zéro.

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

console.log(formatter.format(1000));
// Output: "+$1,000.00"

console.log(formatter.format(-500));
// Output: "-$500.00"

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

Utilisez "exceptZero" pour afficher les changements de solde où zéro représente aucun changement. Cela rend le zéro visuellement distinct des gains ou pertes réels. Les plateformes de trading et les applications d'investissement utilisent ce format pour montrer les variations de prix et les changements de valeur de portefeuille.

valeur negative pour mettre en évidence les dettes

La valeur "negative" affiche le signe moins uniquement pour les montants négatifs, à l'exclusion du zéro négatif. Les montants positifs et zéro s'affichent sans signes.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  signDisplay: "negative"
});

console.log(formatter.format(1000));
// Output: "$1,000.00"

console.log(formatter.format(-500));
// Output: "-$500.00"

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

Utilisez "negative" pour les soldes de compte où les montants négatifs représentent une dette ou des découverts qui nécessitent une mise en évidence. L'absence de signe plus traite les soldes positifs comme normaux tout en attirant l'attention sur les soldes négatifs.

valeur never pour afficher des montants absolus

La valeur "never" affiche les montants en devise sans aucun signe, même pour les valeurs négatives.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  signDisplay: "never"
});

console.log(formatter.format(1000));
// Output: "$1,000.00"

console.log(formatter.format(-500));
// Output: "$500.00"

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

Utilisez "never" pour afficher des montants absolus où la direction est communiquée par d'autres moyens. Lorsque les listes de transactions utilisent des colonnes séparées pour les débits et les crédits, ou lorsque le codage couleur indique les valeurs positives et négatives, la suppression du signe évite les informations redondantes.

Combinaison de signDisplay avec le style comptable

Le formatage des devises prend en charge une notation comptable qui affiche les montants négatifs entre parenthèses. Définissez currencySign sur "accounting" pour activer ce format.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  currencySign: "accounting"
});

console.log(formatter.format(1000));
// Output: "$1,000.00"

console.log(formatter.format(-500));
// Output: "($500.00)"

Le format comptable entoure les montants négatifs de parenthèses au lieu d'utiliser un signe moins. Cette convention apparaît dans les rapports financiers, les logiciels de comptabilité et les états financiers.

Vous pouvez combiner la notation comptable avec différentes valeurs de signDisplay pour contrôler comment les montants positifs apparaissent tandis que les montants négatifs utilisent des parenthèses.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  currencySign: "accounting",
  signDisplay: "always"
});

console.log(formatter.format(1000));
// Output: "+$1,000.00"

console.log(formatter.format(-500));
// Output: "($500.00)"

console.log(formatter.format(0));
// Output: "+$0.00"

Avec signDisplay: "always", les montants positifs affichent un signe plus tandis que les montants négatifs continuent d'utiliser des parenthèses. Ce format fonctionne bien pour les comptes de résultat où les gains et les pertes doivent être clairement identifiés.

Avec signDisplay: "exceptZero", zéro apparaît sans signe tandis que les montants positifs et négatifs utilisent leurs indicateurs respectifs.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  currencySign: "accounting",
  signDisplay: "exceptZero"
});

console.log(formatter.format(1000));
// Output: "+$1,000.00"

console.log(formatter.format(-500));
// Output: "($500.00)"

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

Cette combinaison met en évidence les changements réels tout en rendant le zéro visuellement neutre.

Comment signDisplay fonctionne avec les modes d'affichage de devise

Le formatage des devises prend en charge trois modes d'affichage pour la devise elle-même. L'option currencyDisplay contrôle si la devise s'affiche comme un symbole, un code ou un nom.

L'option signDisplay fonctionne de manière cohérente dans tous les modes d'affichage de devise.

const symbol = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  currencyDisplay: "symbol",
  signDisplay: "always"
});

console.log(symbol.format(100));
// Output: "+$100.00"

const code = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  currencyDisplay: "code",
  signDisplay: "always"
});

console.log(code.format(100));
// Output: "+USD 100.00"

const name = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  currencyDisplay: "name",
  signDisplay: "always"
});

console.log(name.format(100));
// Output: "+100.00 US dollars"

Le signe apparaît à la position appropriée, quelle que soit la façon dont la devise s'affiche. Cela garantit une visibilité cohérente du signe dans les différents formats de devise.

Le positionnement du signe varie selon la locale

Différentes locales positionnent le signe à différents endroits par rapport au symbole de la devise. JavaScript gère automatiquement ces conventions spécifiques à chaque locale.

const enUS = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  signDisplay: "always"
});

console.log(enUS.format(100));
// Output: "+$100.00"

console.log(enUS.format(-100));
// Output: "-$100.00"

const frFR = new Intl.NumberFormat("fr-FR", {
  style: "currency",
  currency: "EUR",
  signDisplay: "always"
});

console.log(frFR.format(100));
// Output: "+100,00 €"

console.log(frFR.format(-100));
// Output: "-100,00 €"

En anglais américain, le signe apparaît avant le symbole de la devise. En français, le signe apparaît avant le nombre avec le symbole de la devise après. Le formateur respecte ces conventions locales tout en honorant votre choix de signDisplay.

Certaines locales positionnent les signes négatifs différemment des signes positifs, même lors de l'utilisation de signDisplay: "always".

const nlNL = new Intl.NumberFormat("nl-NL", {
  style: "currency",
  currency: "EUR",
  signDisplay: "always"
});

console.log(nlNL.format(100));
// Output: "+€ 100,00"

console.log(nlNL.format(-100));
// Output: "-€ 100,00"

JavaScript garantit que la sortie suit les règles de formatage appropriées pour chaque locale tout en maintenant la visibilité du signe que vous spécifiez.

Cas d'utilisation réels pour le contrôle du signe monétaire

Différents contextes financiers nécessitent différentes stratégies d'affichage des signes.

Historiques de transactions

Les applications bancaires et les plateformes de paiement affichent des listes de transactions où chaque entrée montre l'argent entrant ou sortant. Utilisez signDisplay: "always" pour rendre explicite la direction de chaque transaction.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  signDisplay: "always"
});

const transactions = [
  { description: "Salary deposit", amount: 3500 },
  { description: "Rent payment", amount: -1200 },
  { description: "Grocery store", amount: -85.50 },
  { description: "Refund", amount: 25 }
];

transactions.forEach(transaction => {
  console.log(`${transaction.description}: ${formatter.format(transaction.amount)}`);
});
// Output:
// Salary deposit: +$3,500.00
// Rent payment: -$1,200.00
// Grocery store: -$85.50
// Refund: +$25.00

Les signes explicites clarifient si chaque transaction a augmenté ou diminué le solde du compte.

États des profits et pertes

Les rapports financiers montrent les gains et les pertes avec des indicateurs positifs et négatifs clairs. Utilisez signDisplay: "always" avec la notation comptable pour les états financiers professionnels.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  currencySign: "accounting",
  signDisplay: "always"
});

const financials = {
  revenue: 150000,
  expenses: -95000,
  netIncome: 55000
};

console.log(`Revenue: ${formatter.format(financials.revenue)}`);
// Output: Revenue: +$150,000.00

console.log(`Expenses: ${formatter.format(financials.expenses)}`);
// Output: Expenses: ($95,000.00)

console.log(`Net Income: ${formatter.format(financials.netIncome)}`);
// Output: Net Income: +$55,000.00

Ce format suit les conventions comptables tout en rendant clairs les gains et les pertes.

Indicateurs de changement de solde

Les plateformes d'investissement et les applications de trading montrent comment les valeurs des comptes ont évolué au fil du temps. Utilisez signDisplay: "exceptZero" pour mettre en évidence les changements réels tout en rendant l'absence de changement visuellement neutre.

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

const changes = [
  { period: "Today", change: 125.50 },
  { period: "This week", change: -45.75 },
  { period: "This month", change: 0 },
  { period: "This year", change: 1850 }
];

changes.forEach(item => {
  console.log(`${item.period}: ${formatter.format(item.change)}`);
});
// Output:
// Today: +$125.50
// This week: -$45.75
// This month: $0.00
// This year: +$1,850.00

Le zéro s'affiche sans signe, ce qui le fait ressortir comme une période sans changement.

Soldes de compte

Les applications bancaires affichent les soldes de compte courants où les valeurs négatives indiquent des découverts. Utilisez signDisplay: "negative" pour mettre en évidence les dettes tout en traitant les soldes positifs comme normaux.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  signDisplay: "negative"
});

const accounts = [
  { name: "Checking", balance: 2500 },
  { name: "Savings", balance: 15000 },
  { name: "Credit Card", balance: -850 }
];

accounts.forEach(account => {
  console.log(`${account.name}: ${formatter.format(account.balance)}`);
});
// Output:
// Checking: $2,500.00
// Savings: $15,000.00
// Credit Card: -$850.00

Le signe moins attire l'attention sur le solde négatif tandis que les soldes positifs apparaissent sans signes.

Différences absolues de comparaison de prix

Les applications de shopping et les outils de comparaison de prix montrent les différences de prix entre les options. Utilisez signDisplay: "never" lors de l'affichage des différences de prix absolues où la direction n'a pas d'importance.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  signDisplay: "never"
});

const comparisons = [
  { item: "Laptop A vs B", difference: -150 },
  { item: "Phone X vs Y", difference: 75 },
  { item: "Tablet M vs N", difference: -25 }
];

comparisons.forEach(comp => {
  console.log(`${comp.item}: ${formatter.format(comp.difference)} difference`);
});
// Output:
// Laptop A vs B: $150.00 difference
// Phone X vs Y: $75.00 difference
// Tablet M vs N: $25.00 difference

Tous les montants s'affichent comme des valeurs positives, montrant l'ampleur de la différence indépendamment de l'option qui coûte plus cher.

Combinaison de signDisplay avec la précision décimale

L'option signDisplay fonctionne avec toutes les autres options de formatage de devise. Vous pouvez contrôler les décimales, l'arrondi et l'affichage du signe ensemble.

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

console.log(formatter.format(1234.5));
// Output: "+$1,234.50"

console.log(formatter.format(-89.1));
// Output: "-$89.10"

Cela assure une précision décimale cohérente tout en affichant des signes explicites pour tous les montants.

Vous pouvez également combiner signDisplay avec un minimum et un maximum de chiffres significatifs pour des calculs scientifiques ou financiers.

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  signDisplay: "always",
  minimumSignificantDigits: 3,
  maximumSignificantDigits: 3
});

console.log(formatter.format(1234.567));
// Output: "+$1,230"

console.log(formatter.format(-0.0456));
// Output: "-$0.0456"

Le formateur applique les règles de chiffres significatifs tout en maintenant le comportement d'affichage du signe que vous spécifiez.

Ce qu'il faut retenir

L'option signDisplay dans Intl.NumberFormat contrôle quand les signes plus et moins apparaissent dans les montants formatés en devise. Utilisez "always" pour afficher des signes explicites pour tous les montants, "exceptZero" pour masquer le signe sur zéro, "auto" pour le comportement par défaut, "negative" pour afficher uniquement les signes moins, et "never" pour masquer tous les signes.

Choisissez la bonne valeur de signDisplay en fonction de votre contexte financier. Les historiques de transactions nécessitent des signes explicites pour tous les montants. Les indicateurs de changement de solde bénéficient de rendre le zéro visuellement neutre. Les soldes de compte fonctionnent bien en mettant en évidence uniquement les valeurs négatives. Les comparaisons de prix nécessitent souvent des valeurs absolues sans signes.

Combinez signDisplay avec la notation comptable, les modes d'affichage des devises et les options de précision décimale pour créer le format de devise exact dont votre application financière a besoin. JavaScript gère automatiquement le positionnement des signes spécifique à la locale tout en respectant vos préférences d'affichage des signes.