通貨フォーマットでプラス記号とマイナス記号を制御する方法

はじめに

銀行アプリで$500のような取引金額を表示する場合、ユーザーはこれが入金なのか出金なのかを判断できません。プラスまたはマイナス記号がないと曖昧さが生じます。+$500または-$500と表示することで、取引の方向を明確に伝えることができます。

金融アプリケーションでは、通貨金額と共に記号がどのように表示されるかを正確に制御する必要があります。取引履歴では、入金と出金を明示的な記号で表示します。損益計算書では、利益と損失を明確なプラスとマイナスの指標で表示します。口座残高の変更には、お金が口座に入ったのか出たのかを示す可視的な記号が必要です。JavaScriptのIntl.NumberFormatは、フォーマットされた通貨にプラス記号とマイナス記号がいつ表示されるかを正確に制御するためのsignDisplayオプションを提供しています。

通貨のデフォルトフォーマット方法

デフォルトでは、Intl.NumberFormatは負の通貨金額にはマイナス記号を表示し、正の金額には記号を表示しません。

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

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

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

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

このデフォルトの動作は、価格や口座残高を表示する場合にはうまく機能します。しかし、取引金額や財務変更を表示する場合、正の値にプラス記号がないと方向が不明確になります。

signDisplayを使用して通貨記号を制御する

signDisplayオプションは、フォーマットされた通貨にプラス記号とマイナス記号がいつ表示されるかを制御します。通貨用の数値フォーマッタを作成する際にこのオプションを渡します。

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

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

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

今や正の金額にはプラス記号が表示され、入金や利益が暗示的ではなく明示的になります。

通貨表示における signDisplay 値の理解

signDisplay オプションは5つの値を受け付けます。各値は金融表示において特定の目的を果たします。

標準的な通貨フォーマットのための auto 値

"auto" 値はデフォルトの動作です。負の金額にはマイナス記号を表示しますが、正の金額には記号を表示しません。

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

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

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

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

"auto" は価格、口座残高、その他の絶対的な通貨価値を表示する場合に使用します。負の金額は識別する必要がありますが、正の金額は想定されているものとします。

すべての取引方向を表示するための always 値

"always" 値は正、負、ゼロを含むすべての金額に記号を表示します。

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

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

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

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

"always" は取引履歴、損益計算書、口座活動フィードなど、すべてのエントリで資金移動の方向が重要な場合に使用します。明示的なプラス記号により、正の金額が入金、利益、または入金を表すことが明確になります。

実際の変化を強調するための exceptZero 値

"exceptZero" 値は正と負の金額に記号を表示しますが、ゼロには記号を省略します。

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

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

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

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

"exceptZero" はゼロが変化なしを表す残高変動の表示に使用します。これによりゼロが実際の利益や損失と視覚的に区別されます。取引プラットフォームや投資アプリでは、この形式を使用して価格変動やポートフォリオ価値の変化を表示します。

負の値で借金を強調する

"negative" の値は、負の金額のみにマイナス記号を表示し、負のゼロは除外します。正の金額とゼロは記号なしで表示されます。

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

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

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

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

"negative" は、負の金額が借金や当座貸越を表し、強調する必要がある口座残高に使用します。プラス記号がないことで、正の残高は通常として扱われる一方、負の残高に注意を引きます。

絶対額を表示するための never 値

"never" の値は、負の値であっても、通貨金額を記号なしで表示します。

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

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

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

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

"never" は、方向が他の手段で伝えられる絶対額の表示に使用します。取引リストが借方と貸方に別々の列を使用する場合、または色分けが正と負を示す場合、記号を削除することで冗長な情報を防ぎます。

signDisplay と会計スタイルの組み合わせ

通貨フォーマットは、負の金額を括弧で表示する会計表記をサポートしています。このフォーマットを有効にするには、currencySign を "accounting" に設定します。

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

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

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

会計フォーマットは、マイナス記号の代わりに負の金額を括弧で囲みます。この慣例は、財務報告書、会計ソフトウェア、ビジネス明細書に表示されます。

異なる signDisplay 値と会計表記を組み合わせて、正の金額の表示方法を制御しながら、負の金額には括弧を使用できます。

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

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

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

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

signDisplay: "always" では、正の金額にプラス記号が表示され、負の金額は引き続き括弧を使用します。このフォーマットは、利益と損失の両方を明確に識別する必要がある損益計算書に適しています。

signDisplay: "exceptZero" では、ゼロは記号なしで表示され、正と負の金額はそれぞれの指標を使用します。

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

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

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

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

この組み合わせは、実際の変化を強調しながら、ゼロを視覚的に中立にします。

signDisplayが通貨表示モードでどのように機能するか

通貨フォーマットは、通貨自体に対して3つの表示モードをサポートしています。currencyDisplayオプションは、通貨をシンボル、コード、または名前として表示するかどうかを制御します。

signDisplayオプションはすべての通貨表示モードで一貫して機能します。

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

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

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

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

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

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

符号は、通貨の表示方法に関係なく、適切な位置に表示されます。これにより、異なる通貨フォーマット間で一貫した符号の可視性が確保されます。

符号の位置はロケールによって異なる

異なるロケールでは、通貨記号に対する符号の位置が異なります。JavaScriptはこれらのロケール固有の規則を自動的に処理します。

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

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

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

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

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

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

米国英語では、符号は通貨記号の前に表示されます。フランス語では、符号は数字の前に表示され、通貨記号は後に表示されます。フォーマッタはsignDisplayの選択を尊重しながら、これらのロケール規則に従います。

一部のロケールでは、signDisplay: "always"を使用している場合でも、正の符号と負の符号の位置が異なります。

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

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

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

JavaScriptは、指定した符号の可視性を維持しながら、各ロケールの適切なフォーマットルールに従って出力を確保します。

通貨記号制御の実用的なユースケース

異なる金融コンテキストでは、異なる記号表示戦略が必要です。

取引履歴

銀行アプリや決済プラットフォームでは、入出金を示す各エントリを含む取引リストを表示します。signDisplay: "always"を使用して、すべての取引方向を明示的に表示します。

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)}`);
});
// 出力:
// Salary deposit: +$3,500.00
// Rent payment: -$1,200.00
// Grocery store: -$85.50
// Refund: +$25.00

明示的な記号により、各取引が口座残高を増加させたか減少させたかが明確になります。

損益計算書

財務報告書では、利益と損失を明確な正負の指標で表示します。プロフェッショナルな財務諸表には、会計表記法と共にsignDisplay: "always"を使用します。

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)}`);
// 出力: Revenue: +$150,000.00

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

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

この形式は会計慣行に従いながら、利益と損失の両方を明確にします。

残高変動インジケーター

投資プラットフォームや取引アプリでは、口座価値の時間経過による変化を表示します。signDisplay: "exceptZero"を使用して、実際の変化を強調しながら、変化がない場合は視覚的に中立にします。

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)}`);
});
// 出力:
// Today: +$125.50
// This week: -$45.75
// This month: $0.00
// This year: +$1,850.00

ゼロは記号なしで表示され、変化のない期間として目立つようになります。

口座残高

銀行アプリでは、現在の口座残高が表示され、マイナスの値は当座貸越を示します。signDisplay: "negative"を使用して、プラスの残高は通常通り表示しながら、借金を強調表示します。

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)}`);
});
// 出力:
// Checking: $2,500.00
// Savings: $15,000.00
// Credit Card: -$850.00

マイナス記号は負の残高に注意を引きつけ、プラスの残高は記号なしで表示されます。

価格比較の絶対差

ショッピングアプリや価格比較ツールでは、オプション間の価格差がどれだけあるかを表示します。方向性が重要でない絶対的な価格差を表示する場合は、signDisplay: "never"を使用します。

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`);
});
// 出力:
// Laptop A vs B: $150.00 difference
// Phone X vs Y: $75.00 difference
// Tablet M vs N: $25.00 difference

すべての金額は正の値として表示され、どのオプションがより高価であるかに関係なく、差の大きさを示します。

signDisplayと小数点精度の組み合わせ

signDisplayオプションは、他のすべての通貨フォーマットオプションと連携します。小数点以下の桁数、丸め、および符号表示を一緒に制御できます。

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

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

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

これにより、すべての金額に明示的な符号を表示しながら、一貫した小数点精度が確保されます。

科学的または財務的な計算のために、signDisplayを最小および最大有効桁数と組み合わせることもできます。

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

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

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

フォーマッタは、指定した符号表示の動作を維持しながら、有効桁数のルールを適用します。

覚えておくべきこと

Intl.NumberFormatのsignDisplayオプションは、フォーマットされた通貨金額にプラス記号とマイナス記号がいつ表示されるかを制御します。すべての金額に明示的な記号を表示するには"always"を、ゼロの記号を非表示にするには"exceptZero"を、デフォルトの動作には"auto"を、マイナス記号のみを表示するには"negative"を、すべての記号を非表示にするには"never"を使用します。

財務コンテキストに基づいて適切なsignDisplay値を選択してください。取引履歴ではすべての金額に明示的な記号が必要です。残高変更インジケーターはゼロを視覚的に中立にすることで恩恵を受けます。口座残高は負の値のみを強調表示すると効果的です。価格比較では多くの場合、記号のない絶対値が必要です。

signDisplayを会計表記法、通貨表示モード、小数点精度オプションと組み合わせて、財務アプリケーションに必要な正確な通貨フォーマットを作成します。JavaScriptは記号表示の設定を尊重しながら、ロケール固有の記号の配置を自動的に処理します。