通貨フォーマットにおけるプラスとマイナス記号の制御方法
JavaScriptで通貨金額をフォーマットする際に、signDisplayオプションを使用してプラスとマイナス記号の表示・非表示を制御する方法
はじめに
銀行アプリで$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));
// Output: "$250.50"
console.log(formatter.format(-75.25));
// Output: "-$75.25"
console.log(formatter.format(0));
// Output: "$0.00"
このデフォルトの動作は、価格や口座残高を表示する場合には適しています。しかし、取引金額や財務上の変動を表示する場合、正の値にプラス記号がないことで方向性が不明確になります。
signDisplayを使用した通貨記号の制御
signDisplayオプションは、フォーマットされた通貨にプラスとマイナス記号がいつ表示されるかを制御します。通貨用の数値フォーマッターを作成する際に、このオプションを渡します。
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"
これで正の金額がプラス記号付きで表示され、入金や利益が暗黙的ではなく明示的になります。
通貨のsignDisplay値を理解する
signDisplayオプションは5つの値を受け入れます。各値は金融表示において特定の目的を果たします。
標準的な通貨フォーマットのためのauto値
"auto"値はデフォルトの動作です。負の金額にはマイナス記号を表示しますが、正の金額には記号を表示しません。
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"
"auto"は、価格、口座残高、その他の絶対的な通貨値を表示する際に使用します。負の金額は識別が必要ですが、正の金額は前提とされます。
すべての取引方向を表示するalways値
"always"値は、正、負、ゼロを含むすべての金額に記号を表示します。
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"
"always"は、取引履歴、損益計算書、口座活動フィードなど、すべてのエントリで資金の移動方向が重要な場合に使用します。明示的なプラス記号により、正の金額が入金、利益、または入金資金を表すことが明確になります。
実際の変化を強調するexceptZero値
"exceptZero"値は、正と負の金額には記号を表示しますが、ゼロには記号を省略します。
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"
"exceptZero"は、ゼロが変化なしを表す残高変動を表示する際に使用します。これにより、ゼロが実際の利益や損失と視覚的に区別されます。トレーディングプラットフォームや投資アプリは、この形式を使用して価格変動やポートフォリオ価値の変化を表示します。
債務を強調するnegative値
"negative"値は、負のゼロを除き、負の金額にのみマイナス記号を表示します。正の金額とゼロは記号なしで表示されます。
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"
"negative"は、負の金額が強調する必要のある債務または当座貸越を表す口座残高に使用します。プラス記号がないことで、正の残高を通常として扱いながら、負の残高に注意を引きます。
絶対額を表示するためのnever値
"never"値は、負の値であっても符号を付けずに通貨金額を表示します。
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"
方向が他の手段で伝えられる場合に絶対額を表示するには、"never"を使用します。取引リストで借方と貸方に別々の列を使用する場合や、色分けで正負を示す場合、符号を削除することで冗長な情報を防ぎます。
signDisplayとaccountingスタイルの組み合わせ
通貨フォーマットは、負の金額を括弧で表示する会計表記をサポートしています。このフォーマットを有効にするには、currencySignを"accounting"に設定します。
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)"
会計フォーマットは、マイナス記号の代わりに負の金額を括弧で囲みます。この表記法は、財務報告書、会計ソフトウェア、および事業報告書で使用されます。
会計表記と異なるsignDisplay値を組み合わせることで、負の金額が括弧を使用する一方で、正の金額の表示方法を制御できます。
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"
signDisplay: "always"を使用すると、正の金額にはプラス記号が表示され、負の金額は引き続き括弧を使用します。このフォーマットは、利益と損失の両方を明確に識別する必要がある損益計算書に適しています。
signDisplay: "exceptZero"を使用すると、ゼロは符号なしで表示され、正と負の金額はそれぞれの指標を使用します。
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"
この組み合わせは、ゼロを視覚的に中立にしながら、実際の変化を強調します。
signDisplayと通貨表示モードの連携
通貨フォーマットは、通貨自体の3つの表示モードをサポートしています。currencyDisplayオプションは、通貨を記号、コード、または名称として表示するかどうかを制御します。
signDisplayオプションは、すべての通貨表示モードで一貫して機能します。
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"
記号は、通貨の表示方法に関係なく、適切な位置に表示されます。これにより、さまざまな通貨形式で一貫した記号の可視性が確保されます。
記号の位置はロケールによって異なる
ロケールによって、通貨記号に対する記号の位置が異なります。JavaScriptは、これらのロケール固有の規則を自動的に処理します。
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 €"
米国英語では、記号は通貨記号の前に表示されます。フランス語では、記号は数字の前に表示され、通貨記号は後に表示されます。フォーマッターは、signDisplayの選択を尊重しながら、これらのロケール規則に従います。
一部のロケールでは、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は、指定した記号の可視性を維持しながら、各ロケールの適切なフォーマットルールに従って出力されることを保証します。
通貨記号制御の実際の使用例
金融コンテキストによって、異なる記号表示戦略が必要になります。
取引履歴
銀行アプリや決済プラットフォームでは、各エントリが入出金を示す取引リストが表示されます。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)}`);
});
// Output:
// 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)}`);
// 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
この形式は、利益と損失の両方を明確にしながら、会計規則に従います。
残高変動インジケーター
投資プラットフォームや取引アプリでは、口座価値が時間の経過とともにどのように変化したかが表示されます。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)}`);
});
// Output:
// 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)}`);
});
// Output:
// 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`);
});
// Output:
// 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));
// Output: "+$1,234.50"
console.log(formatter.format(-89.1));
// Output: "-$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));
// Output: "+$1,230"
console.log(formatter.format(-0.0456));
// Output: "-$0.0456"
フォーマッターは、指定した符号表示動作を維持しながら、有効桁数ルールを適用します。
覚えておくべきこと
Intl.NumberFormatのsignDisplayオプションは、フォーマットされた通貨金額にプラス記号とマイナス記号が表示されるタイミングを制御します。すべての金額に明示的な符号を表示するには"always"を、ゼロの符号を非表示にするには"exceptZero"を、デフォルトの動作には"auto"を、マイナス記号のみを表示するには"negative"を、すべての符号を非表示にするには"never"を使用します。
財務コンテキストに基づいて適切なsignDisplay値を選択してください。取引履歴では、すべての金額に明示的な符号が必要です。残高変動インジケーターでは、ゼロを視覚的に中立にすることが効果的です。口座残高では、負の値のみを強調表示することが適しています。価格比較では、符号なしの絶対値が必要になることがよくあります。
signDisplayを会計表記、通貨表示モード、小数精度オプションと組み合わせることで、金融アプリケーションに必要な正確な通貨形式を作成できます。JavaScriptは、符号表示の設定を尊重しながら、ロケール固有の符号位置を自動的に処理します。