숫자를 1K, 1M, 1B로 포맷하는 방법
간결한 표기법을 사용하여 큰 숫자를 공간 효율적이고 읽기 쉬운 형식으로 표시하세요
소개
큰 숫자는 상당한 공간을 차지하며 빠르게 파악하기 어렵습니다. 1,500,000과 같은 숫자는 서식을 포함하여 7자리가 필요하지만, 1.5M은 3자로 동일한 크기를 전달합니다. 이러한 간결한 표현은 소셜 미디어 팔로워 수, 동영상 조회수, 대시보드 지표 및 파일 크기에서 일반적으로 사용됩니다.
JavaScript는 Intl.NumberFormat API를 통해 간결한 숫자 포맷팅을 기본적으로 지원합니다. 이 API는 변환을 자동으로 처리하고 다양한 언어와 지역에 맞게 포맷팅을 조정하여 모든 사용자에게 숫자가 올바르게 표시되도록 보장합니다.
큰 숫자에 간결한 포맷팅이 필요한 이유
사용자 인터페이스에 큰 숫자를 표시할 때 두 가지 문제가 발생합니다. 첫째, 숫자가 가로 공간을 소비합니다. 1,234,567 조회수를 표시하는 카운터는 1.2M 조회수를 표시하는 것보다 더 많은 공간이 필요합니다. 둘째, 사용자는 간결한 숫자를 더 빠르게 처리합니다. 인간의 뇌는 1,500,000을 파싱하는 것보다 1.5M을 150만으로 더 빠르게 인식합니다.
간결한 표기법은 뒤따르는 0을 크기 표시자로 대체하여 두 문제를 모두 해결합니다. 모든 자릿수를 표시하는 대신 크기를 나타내는 문자 뒤에 유효 숫자만 표시합니다. 이 접근 방식은 정밀도와 가독성의 균형을 맞춥니다.
다양한 컨텍스트에는 다양한 수준의 정밀도가 필요합니다. 소셜 미디어 팔로워 수는 정확한 숫자가 거의 필요하지 않습니다. 1,234,567 대신 1.2M 팔로워를 표시하면 충분한 정보를 제공합니다. 재무 대시보드는 1.2M 대신 1.23M을 표시하는 등 더 많은 정밀도가 필요할 수 있습니다. Intl API를 사용하면 간결한 포맷팅을 유지하면서 이러한 정밀도를 제어할 수 있습니다.
JavaScript에서 간결한 표기법 사용하기
Intl.NumberFormat의 notation 옵션은 숫자 표현 방식을 제어합니다. 이를 "compact"로 설정하면 간결한 형식이 활성화됩니다.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact"
});
console.log(formatter.format(1500));
// Output: "1.5K"
console.log(formatter.format(1500000));
// Output: "1.5M"
console.log(formatter.format(1500000000));
// Output: "1.5B"
포매터는 숫자의 크기에 따라 적절한 단위 표시를 자동으로 선택합니다. 천 단위는 K로, 백만 단위는 M으로, 십억 단위는 B로 표시됩니다. 또한 포매터는 숫자를 읽기 쉬운 형태로 축소하여 1.5천 대신 1.5K로 표시합니다.
K, M, B를 언제 사용할지 결정하는 로직을 작성할 필요가 없습니다. Intl API가 숫자의 크기에 따라 이 결정을 처리합니다.
간결 표기법이 다양한 단위를 형식화하는 방법
간결 표기법은 다양한 규모에서 서로 다른 형식을 적용합니다. 이러한 임계값을 이해하면 숫자가 어떻게 표시될지 예측하는 데 도움이 됩니다.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact"
});
console.log(formatter.format(500));
// Output: "500"
console.log(formatter.format(1000));
// Output: "1K"
console.log(formatter.format(1500));
// Output: "1.5K"
console.log(formatter.format(999000));
// Output: "999K"
console.log(formatter.format(1000000));
// Output: "1M"
console.log(formatter.format(1500000));
// Output: "1.5M"
console.log(formatter.format(1000000000));
// Output: "1B"
console.log(formatter.format(1000000000000));
// Output: "1T"
천 미만의 숫자는 압축 없이 표시됩니다. 숫자가 천에 도달하면 K 표기법으로 전환됩니다. 백만, 십억, 조 단위에서도 동일한 패턴이 계속됩니다.
포매터는 간결한 표현에 맞게 숫자를 반올림합니다. 1,234,567과 같은 숫자는 기본적으로 1.2M이 됩니다. 다음 레슨에서는 간결 표기법에서 표시되는 소수 자릿수를 제어하는 방법을 다룹니다.
짧은 표시와 긴 표시 중 선택하기
간결 표기법은 두 가지 표시 스타일을 제공합니다. 짧은 스타일은 K, M, B와 같은 문자를 사용합니다. 긴 스타일은 단위를 단어로 표기합니다.
const shortFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
console.log(shortFormatter.format(1500));
// Output: "1.5K"
console.log(shortFormatter.format(1500000));
// Output: "1.5M"
const longFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(longFormatter.format(1500));
// Output: "1.5 thousand"
console.log(longFormatter.format(1500000));
// Output: "1.5 million"
compactDisplay 옵션은 이 동작을 제어합니다. 두 가지 값을 허용합니다: "short"와 "long". 이 옵션을 생략하면 기본값은 "short"입니다.
짧은 표시는 공간이 제한적일 때 효과적입니다. 대시보드 카드, 모바일 인터페이스, 데이터 테이블은 K, M, B의 간결함으로 이점을 얻습니다. 긴 표시는 공간보다 명확성이 중요할 때 더 적합합니다. 교육 콘텐츠, 재무 보고서, 접근성 중심 인터페이스는 단위를 표기하는 것으로 이점을 얻습니다.
다양한 언어에서 간략 표기법이 작동하는 방식
간략 표기법은 로케일에 지정된 언어와 지역에 맞게 조정됩니다. 언어마다 크기 표시자에 대해 서로 다른 문자, 단어 및 형식 규칙을 사용합니다.
const enFormatter = new Intl.NumberFormat("en-US", {
notation: "compact"
});
console.log(enFormatter.format(1500000));
// Output: "1.5M"
const frFormatter = new Intl.NumberFormat("fr-FR", {
notation: "compact"
});
console.log(frFormatter.format(1500000));
// Output: "1,5 M"
const deFormatter = new Intl.NumberFormat("de-DE", {
notation: "compact"
});
console.log(deFormatter.format(1500000));
// Output: "1,5 Mio."
const jaFormatter = new Intl.NumberFormat("ja-JP", {
notation: "compact"
});
console.log(jaFormatter.format(15000000));
// Output: "1500万"
프랑스어는 M 앞에 공백을 사용합니다. 독일어는 Million의 약어로 Mio.를 사용합니다. 일본어는 만을 나타내는 万을 사용하는 완전히 다른 숫자 체계를 사용합니다.
이러한 차이는 로케일에 따라 자동으로 발생합니다. 서로 다른 크기 표시자를 처리하기 위해 로케일별 코드를 작성할 필요가 없습니다. 사용자의 언어 기본 설정을 포매터에 전달하면 해당 언어에 맞는 올바른 출력이 생성됩니다.
긴 표시 형식도 각 언어에 맞게 조정됩니다.
const enFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(enFormatter.format(1500000));
// Output: "1.5 million"
const frFormatter = new Intl.NumberFormat("fr-FR", {
notation: "compact",
compactDisplay: "long"
});
console.log(frFormatter.format(1500000));
// Output: "1,5 million"
const deFormatter = new Intl.NumberFormat("de-DE", {
notation: "compact",
compactDisplay: "long"
});
console.log(deFormatter.format(1500000));
// Output: "1,5 Millionen"
독일어는 million의 복수형으로 Millionen을 사용합니다. 프랑스어는 s 없이 million을 사용합니다. Intl API는 이러한 언어적 변형을 자동으로 처리합니다.
작은 숫자가 간략하게 표기되지 않는 경우
간략 표기 임계값 미만의 숫자는 정상적으로 표시됩니다. 이 임계값은 로케일에 따라 다르지만 대부분의 서양 언어에서는 일반적으로 천부터 시작합니다.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact"
});
console.log(formatter.format(10));
// Output: "10"
console.log(formatter.format(100));
// Output: "100"
console.log(formatter.format(999));
// Output: "999"
console.log(formatter.format(1000));
// Output: "1K"
이러한 동작은 작은 숫자에 대한 어색한 형식을 방지합니다. 500을 0.5K로 표시하는 것보다 500으로 표시하는 것이 더 명확합니다. 포매터는 가독성을 향상시킬 때만 간략 표기법을 적용합니다.
임계값이 항상 천인 것은 아닙니다. 일본어와 같은 일부 언어는 다른 숫자 그룹화 체계를 사용합니다. 일본어는 만 단위로 그룹화하므로 간략 표기법이 다른 임계값에서 시작될 수 있습니다.
const jaFormatter = new Intl.NumberFormat("ja-JP", {
notation: "compact"
});
console.log(jaFormatter.format(9999));
// Output: "9999"
console.log(jaFormatter.format(10000));
// Output: "1万"
Intl API는 이러한 로케일별 임계값을 자동으로 처리합니다.
간략 표기법과 다른 형식 옵션 결합
간략 표기법은 다른 숫자 형식 옵션과 함께 작동합니다. 간략 표기법을 사용하면서 소수 자릿수, 그룹화 구분 기호 및 반올림을 제어할 수 있습니다.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 1
});
console.log(formatter.format(1234567));
// Output: "1.2M"
const preciseFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 2
});
console.log(preciseFormatter.format(1234567));
// Output: "1.23M"
const noDecimalsFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 0
});
console.log(noDecimalsFormatter.format(1234567));
// Output: "1M"
maximumFractionDigits 옵션은 정수 뒤에 표시되는 소수 자릿수를 제어합니다. 이를 0으로 설정하면 모든 소수 자릿수가 제거되어 숫자가 더욱 간결해집니다.
압축 표기법을 최소 자릿수 옵션과 결합하여 다양한 범위의 숫자에서 일관된 형식을 보장할 수도 있습니다.
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
minimumFractionDigits: 1,
maximumFractionDigits: 1
});
console.log(formatter.format(1000));
// Output: "1.0K"
console.log(formatter.format(1500));
// Output: "1.5K"
console.log(formatter.format(2000));
// Output: "2.0K"
이 방식은 모든 숫자가 소수점 한 자리를 표시하도록 보장하여 표와 차트에서 시각적 일관성을 유지하는 데 도움이 됩니다.
압축 표기법을 사용해야 하는 경우
압축 표기법은 공간이 제한적이거나 정확한 정밀도가 중요하지 않을 때 가장 효과적입니다. 소셜 미디어 카운터, 대시보드 지표, 요약 통계가 이상적인 사용 사례입니다. 사용자는 동영상 조회수가 정확히 1,234,567회라는 것을 알 필요가 없습니다. 120만 회라는 것을 아는 것만으로도 충분한 정보를 제공합니다.
정확한 숫자가 중요한 경우에는 압축 표기법을 사용하지 마십시오. 금융 거래, 과학적 측정, 법률 문서에는 완전한 정밀도가 필요합니다. 은행 잔액은 $1.2K가 아닌 $1,234.56으로 표시되어야 합니다. 송장은 $1.5K가 아닌 $1,500.00으로 표시되어야 합니다.
대상 사용자와 맥락을 고려하십시오. 데이터 분석가는 정확한 값을 이해하기 위해 전체 숫자를 보는 것을 선호할 수 있습니다. 일반 소비자는 더 빠르게 처리할 수 있기 때문에 압축된 숫자를 선호하는 경우가 많습니다. 일부 인터페이스는 두 가지 옵션을 모두 제공하여 기본적으로 압축된 숫자를 표시하고 요청 시 정확한 숫자를 표시하는 방법을 제공합니다.
압축 표기법은 파일 크기에도 잘 작동하지만 구현 방식이 약간 다릅니다. 파일 크기는 일반적으로 1000이 아닌 1024의 거듭제곱을 사용하므로 킬로바이트 및 메가바이트가 아닌 키비바이트 및 메비바이트가 됩니다. Intl API는 이진 단위를 처리하지 않으므로 파일 크기 형식 지정에는 사용자 정의 로직이나 전용 라이브러리가 필요합니다.