5킬로미터나 10파운드와 같은 측정값을 포맷하는 방법

소개

측정값은 의미를 부여하는 단위와 함께 수량을 전달합니다. 5킬로미터는 거리를 나타내고, 10파운드는 무게를 나타내며, 20도 섭씨는 온도를 나타냅니다. 측정값을 표시하는 애플리케이션은 사용자가 이해할 수 있는 형식으로 숫자 값과 단위를 모두 표시해야 합니다.

지역에 따라 측정값 형식이 다릅니다. 미국인들은 상황에 따라 "5 km" 또는 "5 kilometers"라고 씁니다. 독일인들은 다른 간격 규칙으로 "5 km"라고 쓸 수 있습니다. 동일한 측정값이 지역과 원하는 상세도에 따라 "5 km", "5km" 또는 "5 kilometers"로 표시될 수 있습니다. 일부 지역에서는 미터법 단위를 사용하고 다른 지역에서는 영국식 단위를 사용하지만, 단위 형식도 지역에 따라 다릅니다.

자바스크립트는 Intl.NumberFormat API를 제공하여 지역에 적합한 단위 형식으로 측정값을 형식화합니다. 이 강의에서는 거리, 무게, 온도, 부피, 속도와 같은 측정값을 모든 지역에 맞는 올바른 단위 표시로 형식화하는 방법을 설명합니다.

측정값에는 맥락을 위한 단위가 필요합니다

단위가 없는 숫자는 많은 상황에서 의미가 부족합니다. 숫자 5는 5킬로미터, 5마일, 5미터 또는 5피트를 나타낼 수 있습니다. 사용자는 측정 단위를 알지 못하면 값을 해석할 수 없습니다.

단위는 숫자 값과 일관되게 표시되어야 합니다. "5 kilometers"라고 쓸 때, "kilometers" 단위는 필수 정보입니다. "10 pounds"라고 쓸 때, "pounds" 단위는 해당 측정값이 통화가 아닌 무게임을 식별합니다.

동일한 유형의 측정에 대해 다양한 단위 시스템이 존재합니다. 거리는 킬로미터, 마일, 미터, 피트 또는 다른 단위로 측정할 수 있습니다. 무게는 킬로그램, 파운드, 온스 또는 그램으로 측정할 수 있습니다. 온도는 섭씨, 화씨 또는 켈빈으로 측정할 수 있습니다. 애플리케이션은 사용하는 단위 시스템을 사용자의 기대에 맞게 형식화해야 합니다.

Intl.NumberFormat으로 단위 포맷하기

옵션에 style: 'unit'을 전달하면 Intl.NumberFormat 생성자는 단위 포맷터를 생성합니다. 또한 unit 옵션과 함께 단위 식별자를 사용하여 포맷할 단위를 지정해야 합니다.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer'
});

console.log(formatter.format(5));
// 출력: "5 km"

이것은 킬로미터 단위로 값을 표시하는 미국 영어용 포맷터를 생성합니다. format() 메서드는 숫자를 킬로미터 단위 약어가 포함된 문자열로 변환합니다.

unit 옵션은 표준화된 단위 식별자를 허용합니다. 이러한 식별자는 하이픈으로 구분된 소문자 단어를 사용합니다. 일반적인 식별자로는 kilometer, meter, mile, pound, kilogram, celsius, fahrenheit, liter, gallon 등이 있습니다.

const distanceFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer'
});

const weightFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'pound'
});

console.log(distanceFormatter.format(5));
// 출력: "5 km"

console.log(weightFormatter.format(10));
// 출력: "10 lb"

각 포맷터는 지정된 단위에 적합한 단위 약어를 자동으로 적용합니다. 각 단위 식별자에 해당하는 약어를 알 필요가 없습니다.

로케일에 따른 단위 포맷팅

로케일 매개변수는 간격, 구분자, 단위 약어를 포함한 단위 포맷 방식을 제어합니다. 동일한 단위라도 로케일에 따라 다른 출력이 생성됩니다.

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer'
});

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'unit',
  unit: 'kilometer'
});

const frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'unit',
  unit: 'kilometer'
});

console.log(usFormatter.format(5));
// 출력: "5 km"

console.log(deFormatter.format(5));
// 출력: "5 km"

console.log(frFormatter.format(5));
// 출력: "5 km"

킬로미터는 로케일 전반에 걸쳐 유사한 약어를 사용하지만, 간격과 구분자 규칙은 다양합니다. Intl API는 이러한 로케일별 포맷팅 규칙을 자동으로 처리합니다.

단위 표시 상세도 제어

'unitDisplay' 옵션은 단위가 약어, 전체 이름 또는 최소 형태로 표시되는지 제어합니다. 이 옵션은 세 가지 값을 허용합니다: 약어는 "short", 전체 단위 이름은 "long", 최소 표시는 "narrow"입니다.

const shortFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'short'
});

const longFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'long'
});

const narrowFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'narrow'
});

console.log(shortFormatter.format(5));
// Output: "5 km"

console.log(longFormatter.format(5));
// Output: "5 kilometers"

console.log(narrowFormatter.format(5));
// Output: "5km"

'short' 형식은 "km"나 "lb"와 같은 표준 약어를 사용합니다. 'long' 형식은 "kilometers"나 "pounds"와 같은 전체 단위 이름을 사용합니다. 'narrow' 형식은 공백이 줄어들거나 없는 최소 표시를 사용합니다. 'unitDisplay'를 지정하지 않으면 기본값은 'short'입니다.

로케일은 긴 형식 단위가 표시되는 방식에 영향을 줍니다. 전체 단위 이름은 각 언어의 문법 규칙에 맞게 번역되고 조정됩니다.

const enFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'long'
});

const deFormatter = new Intl.NumberFormat('de-DE', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'long'
});

const esFormatter = new Intl.NumberFormat('es-ES', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'long'
});

console.log(enFormatter.format(5));
// Output: "5 kilometers"

console.log(deFormatter.format(5));
// Output: "5 Kilometer"

console.log(esFormatter.format(5));
// Output: "5 kilómetros"

각 로케일은 단위 이름에 대한 적절한 번역과 문법적 형태를 제공합니다.

무게 측정 형식 지정

무게 측정에는 'pound', 'kilogram', 'ounce', 'gram'과 같은 단위 식별자를 사용합니다. 이러한 식별자는 거리 단위와 동일한 방식으로 작동합니다.

const poundFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'pound'
});

const kilogramFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilogram'
});

console.log(poundFormatter.format(10));
// Output: "10 lb"

console.log(kilogramFormatter.format(10));
// Output: "10 kg"

전체 단위 이름을 표시하기 위해 무게를 긴 형식으로 지정할 수 있습니다.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'pound',
  unitDisplay: 'long'
});

console.log(formatter.format(1));
// Output: "1 pound"

console.log(formatter.format(10));
// Output: "10 pounds"

포매터는 값에 따라 단수형과 복수형을 자동으로 처리합니다. 1파운드는 단수형을 사용하고 10파운드는 복수형을 사용합니다.

온도 측정 형식 지정

온도 측정은 celsius와 fahrenheit와 같은 단위 식별자를 사용합니다. 이러한 단위는 짧은 형식으로 도 기호와 함께 표시됩니다.

const celsiusFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius'
});

const fahrenheitFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'fahrenheit'
});

console.log(celsiusFormatter.format(20));
// Output: "20°C"

console.log(fahrenheitFormatter.format(68));
// Output: "68°F"

긴 형식은 온도 척도의 전체 이름을 표시합니다.

const celsiusFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'celsius',
  unitDisplay: 'long'
});

const fahrenheitFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'fahrenheit',
  unitDisplay: 'long'
});

console.log(celsiusFormatter.format(20));
// Output: "20 degrees Celsius"

console.log(fahrenheitFormatter.format(68));
// Output: "68 degrees Fahrenheit"

온도 형식은 각 척도에 적합한 도 용어를 자동으로 포함합니다.

부피 측정 형식 지정

부피 측정은 liter, gallon, milliliter, fluid-ounce와 같은 단위 식별자를 사용합니다. 이는 다른 단위 유형과 같은 방식으로 작동합니다.

const literFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'liter'
});

const gallonFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'gallon'
});

console.log(literFormatter.format(2));
// Output: "2 L"

console.log(gallonFormatter.format(2));
// Output: "2 gal"

부피 단위는 로케일별 철자가 있는 긴 형식 표시도 지원합니다.

const usFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'liter',
  unitDisplay: 'long'
});

const gbFormatter = new Intl.NumberFormat('en-GB', {
  style: 'unit',
  unit: 'liter',
  unitDisplay: 'long'
});

console.log(usFormatter.format(2));
// Output: "2 liters"

console.log(gbFormatter.format(2));
// Output: "2 litres"

영국 영어 로케일은 "litres"를 사용하고 미국 영어는 "liters"를 사용합니다.

복합 단위 형식 지정

복합 단위는 두 개의 단순 단위를 "per" 관계로 결합합니다. 시속 마일이나 시속 킬로미터와 같은 속도 측정은 복합 단위를 사용합니다. 100킬로미터당 리터와 같은 연비 측정도 복합 단위를 사용합니다.

복합 단위 식별자는 두 개의 단순 단위를 -per-로 결합합니다. 예를 들어, mile-per-hour는 마일과 시간을 결합하고, kilometer-per-hour는 킬로미터와 시간을 결합합니다.

const mphFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'mile-per-hour'
});

const kphFormatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer-per-hour'
});

console.log(mphFormatter.format(60));
// Output: "60 mph"

console.log(kphFormatter.format(100));
// Output: "100 km/h"

각 복합 단위는 두 단위 부분을 결합한 적절한 약어로 형식이 지정됩니다.

긴 형식은 전체 이름과 로케일에 적합한 전치사로 복합 단위를 표시합니다.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'mile-per-hour',
  unitDisplay: 'long'
});

console.log(formatter.format(60));
// Output: "60 miles per hour"

포맷터는 로케일에 맞는 올바른 문법을 사용하여 복합 단위 구문을 자동으로 구성합니다.

사용 가능한 단위 식별자 가져오기

'Intl.supportedValuesOf()' 메서드는 JavaScript 환경에서 지원되는 모든 단위 식별자의 배열을 반환합니다. 이 메서드는 인수로 문자열 'unit'을 받습니다.

const units = Intl.supportedValuesOf('unit');

console.log(units);
// 출력: 다음과 같은 단위 식별자 배열:
// ["acre", "bit", "byte", "celsius", "centimeter", "day",
//  "degree", "fahrenheit", "fluid-ounce", "foot", "gallon",
//  "gram", "hectare", "hour", "inch", "kilogram", "kilometer",
//  "liter", "meter", "mile", "millimeter", "ounce", "pound",
//  "second", "stone", "week", "yard", ...]

반환된 배열에는 포맷팅에 사용할 수 있는 모든 단순 단위가 포함됩니다. 이 배열의 모든 식별자를 'unit' 옵션과 함께 사용할 수 있습니다.

이 메서드는 특정 단위가 지원되는지 확인해야 할 때나 사용자에게 사용 가능한 단위 목록을 제공하고자 할 때 유용합니다.

const units = Intl.supportedValuesOf('unit');

const hasKilometer = units.includes('kilometer');
const hasPound = units.includes('pound');

console.log(hasKilometer);
// 출력: true

console.log(hasPound);
// 출력: true

포맷터를 생성하기 전에 특정 단위를 확인하여 다양한 지원 수준을 가진 환경을 처리할 수 있습니다.

숫자 포맷팅 옵션과 결합하기

단위 포맷터는 다른 'Intl.NumberFormat' 스타일과 동일한 숫자 포맷팅 옵션을 지원합니다. 소수점 자릿수, 유효 숫자 및 기타 숫자 속성을 제어할 수 있습니다.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer',
  maximumFractionDigits: 2
});

console.log(formatter.format(5.123));
// 출력: "5.12 km"

console.log(formatter.format(5.5));
// 출력: "5.5 km"

포맷터는 단위를 추가하기 전에 반올림 및 소수점 자릿수 규칙을 적용합니다.

천 단위 구분 기호를 사용하여 큰 숫자를 포맷팅할 수 있습니다.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer'
});

console.log(formatter.format(12345.67));
// 출력: "12,345.67 km"

모든 표준 숫자 포맷팅 기능은 단위 포맷팅과 함께 작동합니다.

사용자 로케일에 맞는 측정 단위 형식 지정

특정 로케일을 하드코딩하는 대신 사용자의 브라우저 언어 설정을 활용할 수 있습니다. navigator.language 속성은 사용자가 선호하는 로케일을 반환합니다.

const userLocale = navigator.language;

const formatter = new Intl.NumberFormat(userLocale, {
  style: 'unit',
  unit: 'kilometer'
});

console.log(formatter.format(5));
// 출력은 사용자의 로케일에 따라 달라집니다

이 접근 방식은 각 사용자의 형식 지정 기대치에 따라 측정값을 표시합니다. 서로 다른 사용자는 동일한 측정값을 자신의 로케일 규칙에 맞게 형식화된 상태로 볼 수 있습니다.

애플리케이션에서 측정값 표시하기

단위 포맷터는 사용자에게 측정값을 표시하는 모든 곳에서 사용할 수 있습니다. 여기에는 거리나 무게를 보여주는 피트니스 애플리케이션, 온도를 보여주는 날씨 애플리케이션, 부피를 보여주는 레시피 애플리케이션, 속도를 보여주는 내비게이션 애플리케이션 등이 포함됩니다.

const distanceFormatter = new Intl.NumberFormat(navigator.language, {
  style: 'unit',
  unit: 'kilometer',
  maximumFractionDigits: 1
});

const distance = 5.234;

document.getElementById('distance').textContent = distanceFormatter.format(distance);
// 표시: "5.2 km" (또는 로케일에 맞는 표현)

형식이 지정된 문자열은 다른 문자열 값과 같은 방식으로 작동합니다. 텍스트 내용, 속성 또는 사용자에게 정보를 표시하는 모든 컨텍스트에 삽입할 수 있습니다.

단위 포맷터 재사용하기

새로운 Intl.NumberFormat 인스턴스를 생성하는 것은 로케일 데이터를 로드하고 옵션을 처리하는 작업을 포함합니다. 동일한 로케일과 단위로 여러 측정값의 형식을 지정할 때는 포맷터를 한 번 생성하고 재사용하세요.

const formatter = new Intl.NumberFormat('en-US', {
  style: 'unit',
  unit: 'kilometer'
});

const distances = [1.5, 3.2, 5.0, 10.8];

distances.forEach(distance => {
  console.log(formatter.format(distance));
});
// 출력:
// "1.5 km"
// "3.2 km"
// "5 km"
// "10.8 km"

이 패턴은 각 값마다 새 포맷터를 생성하는 것보다 더 효율적입니다. 많은 측정값이 있는 배열이나 목록의 형식을 지정할 때 성능 차이가 크게 나타납니다.