백분율 형식에서 소수 자릿수를 제어하는 방법
백분율 값의 정확한 또는 최대 소수 자릿수를 설정하여 정밀도와 표시를 제어합니다
소개
백분율을 표시할 때 상황에 따라 다른 수준의 정밀도가 필요합니다. 3.25%의 이자율은 정확한 비율을 전달하기 위해 정확히 소수점 두 자리가 필요합니다. 대시보드에 표시되는 전환율은 가독성을 위해 소수점 한 자리로 85.5%로 표시하는 것이 더 효과적입니다. 완료 백분율은 소수 자릿수 없이 100%로 표시해도 충분합니다.
소수 자릿수를 제어하지 않으면 백분율 형식이 일관성을 잃게 됩니다. 0.8547 값이 한 곳에서는 85%로, 다른 곳에서는 85.47%로 표시되어 어느 표현이 정확한지 혼란을 야기할 수 있습니다. 소수 자릿수를 명시적으로 제어하면 애플리케이션 전체에서 일관된 정밀도를 보장할 수 있습니다.
JavaScript의 Intl.NumberFormat API는 백분율 형식에서 표시할 소수 자릿수를 제어하기 위해 minimumFractionDigits 및 maximumFractionDigits 옵션을 제공합니다. 이러한 옵션은 로케일 인식 형식과 함께 작동하여 전 세계 사용자에게 백분율을 올바르게 표시합니다.
기본적으로 백분율이 표시되는 방식
Intl.NumberFormat API는 기본적으로 소수 자릿수 없이 백분율을 형식화합니다. 입력 값에 100을 곱하고 가장 가까운 정수로 반올림한 다음 백분율 기호를 추가합니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent"
});
console.log(formatter.format(0.8547));
// Output: "85%"
console.log(formatter.format(0.8234));
// Output: "82%"
console.log(formatter.format(0.0325));
// Output: "3%"
입력 값의 정밀도와 관계없이 모든 백분율이 정수로 표시됩니다. 포매터는 0.8547을 85%로, 0.8234를 82%로 반올림하여 소수 정보를 버립니다.
이 기본 동작은 완료 백분율, 설문조사 결과 또는 소수 정밀도가 의미 있는 정보를 추가하지 않는 기타 값을 표시하는 데 적합합니다. 그러나 많은 사용 사례에서는 정확한 값을 전달하기 위해 소수 자릿수를 표시해야 합니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent"
});
const conversionRate = 0.8547;
console.log(formatter.format(conversionRate));
// Output: "85%"
실제 값이 85.47%일 때 전환율을 85%로 표시하면 비즈니스 의사 결정 및 분석에 영향을 미치는 중요한 정밀도가 숨겨집니다.
정확한 소수 자릿수로 백분율 형식 지정
특정 소수 자릿수를 표시하려면 minimumFractionDigits와 maximumFractionDigits를 동일한 값으로 설정하세요. 이렇게 하면 모든 백분율이 정확히 해당 소수 자릿수로 표시됩니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
console.log(formatter.format(0.8547));
// Output: "85.47%"
console.log(formatter.format(0.0325));
// Output: "3.25%"
console.log(formatter.format(0.85));
// Output: "85.00%"
포매터는 모든 값에 대해 정확히 소수점 이하 두 자리를 표시합니다. 입력값의 정밀도가 더 높으면 포매터는 소수점 이하 두 자리로 반올림합니다. 입력값의 소수 자릿수가 더 적으면 포매터는 0으로 채웁니다.
두 옵션을 동일한 값으로 설정하면 애플리케이션의 모든 백분율에서 일관된 소수 자릿수가 보장됩니다. 이러한 일관성은 금융 표시, 데이터 테이블 및 사용자가 여러 백분율 값을 비교하는 모든 인터페이스에서 중요합니다.
소수점 한 자리로 형식 지정
정확히 소수점 한 자리를 표시하려면 두 옵션을 모두 1로 설정하세요.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 1,
maximumFractionDigits: 1
});
console.log(formatter.format(0.8547));
// Output: "85.5%"
console.log(formatter.format(0.85));
// Output: "85.0%"
console.log(formatter.format(0.8234));
// Output: "82.3%"
포매터는 0.8547을 85.5%로 반올림하고 0.85를 후행 0과 함께 85.0%로 표시합니다. 이 형식은 소수점 한 자리가 사용자에게 과도한 숫자 없이 충분한 정밀도를 제공하는 대시보드 표시에 적합합니다.
소수점 세 자리 이상으로 형식 지정
과학 또는 금융 애플리케이션에서는 때때로 소수점 두 자리 이상이 필요합니다. 정밀도를 높이려면 두 옵션을 모두 3 이상으로 설정하세요.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 3,
maximumFractionDigits: 3
});
console.log(formatter.format(0.854732));
// Output: "85.473%"
console.log(formatter.format(0.85));
// Output: "85.000%"
포매터는 정확히 소수점 이하 세 자리를 표시하며 필요한 경우 0으로 채웁니다. 이 수준의 정밀도는 실험실 측정, 통계 분석 또는 높은 정확도가 필요한 금융 계산에 적합합니다.
최대 N 소수 자릿수로 백분율 형식 지정
때로는 의미 있는 정보를 제공할 때만 소수 자릿수를 표시하고 싶을 수 있습니다. maximumFractionDigits를 설정하여 정밀도를 제한하면서 포매터가 불필요한 후행 0을 생략할 수 있도록 합니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
maximumFractionDigits: 2
});
console.log(formatter.format(0.8547));
// Output: "85.47%"
console.log(formatter.format(0.85));
// Output: "85%"
console.log(formatter.format(0.8));
// Output: "80%"
포매터는 최대 소수점 이하 두 자리를 표시하지만 후행 0은 제거합니다. 값 0.8547은 두 소수 자릿수와 함께 85.47%로 표시되고, 0.85는 불필요한 0 없이 85%로 표시됩니다.
이 접근 방식은 통계, 지표 또는 계산된 값을 표시할 때 효과적입니다. 후행 0은 추가 정보를 제공하지 않기 때문입니다. 85.00% 대신 85%를 표시하면 더 깔끔하고 읽기 쉬운 화면을 만들 수 있습니다.
minimumFractionDigits를 maximumFractionDigits보다 낮은 값으로 설정하여 표시되는 후행 0의 개수를 제어할 수 있습니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 1,
maximumFractionDigits: 2
});
console.log(formatter.format(0.8547));
// Output: "85.47%"
console.log(formatter.format(0.85));
// Output: "85.0%"
console.log(formatter.format(0.8));
// Output: "80.0%"
이제 포맷터는 항상 최소 한 자리의 소수점을 표시하지만 필요한 경우에만 두 번째 소수 자리를 표시합니다. 이 형식은 불필요한 정밀도를 피하면서 시각적 일관성을 유지합니다.
백분율 소수점 구분 기호의 로케일 형식 지정
로케일마다 소수점 구분 기호로 다른 문자를 사용합니다. Intl.NumberFormat API는 각 로케일에 맞는 올바른 구분 기호를 자동으로 사용합니다.
const usFormatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const deFormatter = new Intl.NumberFormat("de-DE", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const rate = 0.8547;
console.log(usFormatter.format(rate));
// Output: "85.47%"
console.log(deFormatter.format(rate));
// Output: "85,47 %"
미국 영어 포맷터는 소수점 구분 기호로 마침표를 사용하고 백분율 기호를 숫자 바로 뒤에 배치합니다. 독일어 포맷터는 소수점 구분 기호로 쉼표를 사용하고 백분율 기호 앞에 공백을 추가합니다.
이러한 차이는 많은 로케일에 걸쳐 확장됩니다. 프랑스어는 독일어처럼 쉼표를 사용합니다. 아랍어는 다른 숫자 모양을 사용합니다. Intl.NumberFormat API는 적절한 로케일을 제공하면 이러한 모든 변형을 자동으로 처리합니다.
const frFormatter = new Intl.NumberFormat("fr-FR", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const arFormatter = new Intl.NumberFormat("ar-EG", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const rate = 0.8547;
console.log(frFormatter.format(rate));
// Output: "85,47 %"
console.log(arFormatter.format(rate));
// Output: "٨٥٫٤٧٪"
아랍어 포맷터는 아랍-인도 숫자와 아랍어 백분율 기호를 사용합니다. 로케일 인식 형식 지정을 사용하면 사용자의 언어 및 지역에 관계없이 백분율이 올바르게 표시됩니다.
정확한 소수 자릿수와 최대 소수 자릿수를 사용하는 경우
백분율 표시의 컨텍스트와 목적에 따라 정확한 소수 자릿수와 최대 소수 자릿수 중에서 선택하십시오.
이자율, APR 또는 수익률과 같은 금융 백분율에는 정확한 소수 자릿수를 사용하십시오. 이러한 값은 규정 준수 및 사용자 기대를 위해 일관된 정밀도가 필요합니다. 실제 이자율에 대한 혼동을 피하기 위해 이자율은 항상 3.25%로 표시되어야 하며 3.3% 또는 3%로 표시되어서는 안 됩니다.
데이터 테이블과 비교 디스플레이에서는 사용자가 여러 백분율을 함께 읽을 때 정확한 소수 자릿수를 사용하세요. 일관된 소수 자릿수는 비교를 더 쉽게 만들고 기본 데이터의 정밀도가 다르다는 시각적 불일치를 방지합니다.
대시보드 디스플레이와 요약 통계에서는 정밀도보다 가독성이 중요한 경우 최대 소수 자릿수를 사용하세요. 85.00% 대신 85%를 표시하면 더 깔끔한 인터페이스가 만들어집니다. 의미 있는 정보를 제공하는 경우에만 소수 자릿수를 표시하세요.
자연스럽게 정수가 될 수 있는 계산된 백분율에는 최대 소수 자릿수를 사용하세요. 완료율, 성공률, 분포 백분율은 종종 .00으로 끝나며 후행 0 없이 더 보기 좋습니다.
소수 자릿수가 있는 음수 백분율 형식 지정
소수 자릿수 옵션은 음수 백분율에 대해서도 동일한 방식으로 작동합니다. 포매터는 백분율이 양수인지 음수인지에 관계없이 적절한 소수 자릿수를 표시합니다.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
console.log(formatter.format(-0.0325));
// Output: "-3.25%"
console.log(formatter.format(-0.1547));
// Output: "-15.47%"
음수 기호는 숫자 앞에 나타나며 소수 자릿수는 형식 지정 옵션에 따라 표시됩니다. 이는 백분율 변화, 감소 또는 손실을 표시하는 데 작동합니다.
더 나은 성능을 위한 포매터 재사용
새로운 Intl.NumberFormat 인스턴스를 생성하려면 초기화 작업이 필요합니다. 동일한 옵션으로 많은 백분율을 형식화할 때는 포매터를 한 번 생성하고 재사용하세요.
const formatter = new Intl.NumberFormat("en-US", {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const rates = [0.8547, 0.0325, 0.9123, 0.0045];
rates.forEach(rate => {
console.log(formatter.format(rate));
});
// Output:
// "85.47%"
// "3.25%"
// "91.23%"
// "0.45%"
이 패턴은 각 백분율에 대해 새 포매터를 생성하는 것보다 더 효율적입니다. 성능 차이는 테이블이나 차트를 렌더링할 때와 같이 수백 또는 수천 개의 값을 형식 지정할 때 눈에 띄게 나타납니다.
사용자의 선호 로케일 사용
로케일을 하드코딩하는 대신 사용자의 브라우저 언어 기본 설정을 사용하여 예상 형식으로 백분율을 포맷하세요. navigator.language 속성은 사용자가 선호하는 로케일을 제공합니다.
const formatter = new Intl.NumberFormat(navigator.language, {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
const rate = 0.8547;
console.log(formatter.format(rate));
// Output varies by user's locale
// For en-US: "85.47%"
// For de-DE: "85,47 %"
// For fr-FR: "85,47 %"
또한 전체 navigator.languages 배열을 전달하여 Intl API가 사용자의 기본 설정에서 지원되는 첫 번째 로케일을 선택하도록 할 수 있습니다.
const formatter = new Intl.NumberFormat(navigator.languages, {
style: "percent",
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
이 방식은 사용자의 첫 번째 기본 설정이 런타임 환경에서 지원되지 않을 경우 자동 대체를 제공합니다.