5킬로미터 또는 10파운드와 같은 측정값 형식 지정 방법

소개

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

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

JavaScript는 로케일에 적합한 단위 형식으로 측정값을 포맷하는 Intl.NumberFormat API를 제공합니다. 이 레슨에서는 거리, 무게, 온도, 부피, 속도와 같은 측정값을 모든 로케일에 맞는 올바른 단위 표시로 포맷하는 방법을 설명합니다.

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

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

단위는 숫자 값과 일관되게 표시되어야 합니다. "5 kilometers"로 표기할 때 단위 "kilometers"는 필수 정보입니다. "10 pounds"로 표기할 때 단위 "pounds"는 측정값을 통화가 아닌 무게로 식별합니다.

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

Intl.NumberFormat으로 단위 형식 지정

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

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

console.log(formatter.format(5));
// Output: "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));
// Output: "5 km"

console.log(weightFormatter.format(10));
// Output: "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));
// Output: "5 km"

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

console.log(frFormatter.format(5));
// Output: "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);
// Output: Array of unit identifiers like:
// ["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);
// Output: true

console.log(hasPound);
// Output: true

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

숫자 포맷팅 옵션과 결합

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

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

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

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

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

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

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

console.log(formatter.format(12345.67));
// Output: "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));
// Output varies by user's locale

이 접근 방식은 각 사용자의 포맷팅 기대에 따라 측정값을 표시합니다. 서로 다른 사용자는 동일한 측정값을 자신의 로케일 규칙에 따라 포맷된 형태로 보게 됩니다.

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

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

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

const distance = 5.234;

document.getElementById('distance').textContent = distanceFormatter.format(distance);
// Displays: "5.2 km" (or locale equivalent)

형식화된 문자열은 다른 문자열 값과 동일하게 작동합니다. 텍스트 콘텐츠, 속성 또는 사용자에게 정보를 표시하는 모든 컨텍스트에 삽입할 수 있습니다.

단위 포매터 재사용

새로운 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));
});
// Output:
// "1.5 km"
// "3.2 km"
// "5 km"
// "10.8 km"

이 패턴은 각 값에 대해 새 포매터를 생성하는 것보다 더 효율적입니다. 많은 측정값이 포함된 배열이나 목록을 형식화할 때 성능 차이가 두드러집니다.