통화 형식에서 더하기 및 빼기 기호를 제어하는 방법
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 옵션은 다섯 가지 값을 허용합니다. 각 값은 금융 표시에서 특정 목적을 제공합니다.
표준 통화 형식을 위한 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" 값은 양수, 음수 및 0을 포함한 모든 금액에 대해 부호를 표시합니다.
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" 값은 양수 및 음수 금액에 대해 부호를 표시하지만 0에 대해서는 부호를 생략합니다.
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"
0이 변화 없음을 나타내는 잔액 변경 사항을 표시할 때 "exceptZero"를 사용하세요. 이렇게 하면 0이 실제 이익이나 손실과 시각적으로 구별됩니다. 거래 플랫폼과 투자 앱은 이 형식을 사용하여 가격 변동 및 포트폴리오 가치 변동을 표시합니다.
부채를 강조하는 negative 값
"negative" 값은 음수 0을 제외하고 음수 금액에 대해서만 마이너스 기호를 표시합니다. 양수 금액과 0은 기호 없이 표시됩니다.
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"를 사용하면 0은 기호 없이 표시되고 양수 및 음수 금액은 각각의 표시기를 사용합니다.
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"
이 조합은 실제 변경 사항을 강조하면서 0을 시각적으로 중립적으로 만듭니다.
signDisplay가 통화 표시 모드와 작동하는 방식
통화 형식화는 통화 자체에 대한 세 가지 표시 모드를 지원합니다. 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
0은 기호 없이 표시되어 변화가 없는 기간으로 눈에 띄게 합니다.
계좌 잔액
뱅킹 앱은 음수 값이 초과 인출을 나타내는 현재 계좌 잔액을 표시합니다. 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"를 사용하고, 0에서 기호를 숨기려면 "exceptZero"를 사용하고, 기본 동작을 위해서는 "auto"를 사용하고, 빼기 기호만 표시하려면 "negative"를 사용하고, 모든 기호를 숨기려면 "never"를 사용하세요.
금융 컨텍스트에 따라 적절한 signDisplay 값을 선택하세요. 거래 내역은 모든 금액에 대해 명시적인 기호가 필요합니다. 잔액 변경 표시기는 0을 시각적으로 중립적으로 만드는 것이 유리합니다. 계좌 잔액은 음수 값만 강조 표시하는 것이 효과적입니다. 가격 비교는 종종 기호 없이 절대값이 필요합니다.
signDisplay를 회계 표기법, 통화 표시 모드 및 소수 정밀도 옵션과 결합하여 금융 애플리케이션에 필요한 정확한 통화 형식을 생성하세요. JavaScript는 기호 표시 기본 설정을 존중하면서 로케일별 기호 위치를 자동으로 처리합니다.