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 de 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 devises. Les historiques de transactions affichent les dépôts et les retraits avec des signes explicites. Les états de 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 indiquer si l'argent est entré ou sorti d'un compte. Le Intl.NumberFormat de JavaScript fournit l'option signDisplay pour contrôler exactement quand les signes plus et moins apparaissent avec la devise formatée.

Comment les devises sont formatées par défaut

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

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

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

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

console.log(formatter.format(0));
// Output: "$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.

Utiliser signDisplay pour contrôler les signes de devise

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

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

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

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

Désormais, 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 de signDisplay pour les devises

L'option signDisplay accepte cinq valeurs. Chaque valeur répond à des besoins spécifiques dans l'affichage financier.

Valeur auto pour le formatage standard des devises

La valeur "auto" correspond au 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 nécessitent une identification mais où les montants positifs sont présumés.

Valeur always pour afficher 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 états de profits et pertes et les flux d'activité de compte où la direction du mouvement d'argent importe 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 omets 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 zéro visuellement distinct des gains ou pertes réels. Les plateformes de trading et les applications d'investissement utilisent ce format pour afficher les changements de prix et les changements de valeur de portefeuille.

Valeur negative pour mettre l'accent sur 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 signe.

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 un découvert nécessitant d'être mis en évidence. L'absence de signe plus traite les soldes positifs comme normaux tout en attirant l'attention sur les soldes négatifs.

never valeur pour afficher les montants absolus

La valeur "never" affiche les montants monétaires 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 les montants absolus lorsque 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 code couleur indique les valeurs positives et négatives, la suppression du signe évite les informations redondantes.

Combiner 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 encadre les montants négatifs entre 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 signDisplay pour contrôler l'affichage des montants positifs 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 nécessitent une identification claire.

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 des devises

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 doit être affichée sous forme de symbole, de code ou de nom.

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

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 à travers différents formats de devises.

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'usage réels pour le contrôle du signe de devise

Différents contextes financiers nécessitent différentes stratégies d'affichage du signe.

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.

Comptes de résultat

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 à la fois les gains et les pertes.

Indicateurs de variation 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 actuels 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 signe.

Différences absolues de comparaison de prix

Les applications de shopping et les outils de comparaison de prix montrent à quel point les prix diffèrent 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 quelle que soit l'option qui coûte le plus cher.

Combiner 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 garantit une précision décimale cohérente tout en affichant des signes explicites pour tous les montants.

Vous pouvez également combiner signDisplay avec des chiffres significatifs minimum et maximum 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 de devise formatés. 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 valeur signDisplay appropriée en fonction de votre contexte financier. Les historiques de transactions nécessitent des signes explicites pour tous les montants. Les indicateurs de variation de solde bénéficient d'un zéro visuellement neutre. Les soldes de compte fonctionnent bien en ne mettant en évidence que 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 de devise 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 à chaque locale tout en respectant vos préférences d'affichage des signes.