유효 숫자로 숫자 형식을 지정하는 방법

소개

표시할 숫자의 형식을 지정할 때 소수점 뒤에 나타나는 자릿수가 아닌 숫자에 포함된 의미 있는 자릿수를 기준으로 정밀도를 제어해야 하는 경우가 있습니다. 이러한 접근 방식을 유효 숫자를 사용한 형식 지정이라고 합니다.

유효 숫자는 숫자의 정밀도에 대한 의미 있는 정보를 전달하는 자릿수를 나타냅니다. 숫자 123.45는 5개의 유효 숫자를 가지고 있습니다. 숫자 0.00123은 3개의 유효 숫자를 가지고 있는데, 앞의 0은 크기만 나타낼 뿐 정밀도를 나타내지 않기 때문입니다.

이 레슨에서는 JavaScript에서 유효 숫자를 사용하여 숫자를 포맷하는 방법을 보여줍니다. 이 접근 방식이 소수 자릿수를 제어하는 것보다 언제 더 나은지, 그리고 Intl.NumberFormat API에서 minimumSignificantDigits 및 maximumSignificantDigits 옵션을 사용하는 방법을 배우게 됩니다.

유효 숫자란 무엇인가

유효 숫자는 숫자의 정밀도를 나타내는 자릿수입니다. 어떤 자릿수가 유효한지 이해하려면 특정 규칙을 따라야 합니다.

0이 아닌 모든 자릿수는 항상 유효합니다. 숫자 123에서는 세 자릿수 모두 유효합니다. 45.67에서는 네 자릿수 모두 유효합니다.

앞의 0은 절대 유효하지 않습니다. 소수점의 위치만 나타냅니다. 0.0045에서는 4와 5만 유효 숫자입니다. 이 숫자는 6개가 아닌 2개의 유효 숫자를 가지고 있습니다.

소수점 뒤의 뒤따르는 0은 유효합니다. 측정 또는 계산이 해당 수준까지 정밀했음을 나타냅니다. 숫자 1.200은 4개의 유효 숫자를 가지고 있는 반면, 1.2는 2개만 가지고 있습니다.

소수점 앞의 뒤따르는 0은 맥락에 따라 다릅니다. 숫자 1200에서는 추가 정보 없이 0이 유효한지 불분명합니다. 과학적 표기법이나 명시적 정밀도 표시기가 이러한 모호함을 해결합니다.

최대 유효 숫자로 숫자 형식 지정

maximumSignificantDigits 옵션은 포맷된 출력에 표시되는 유효 숫자의 개수를 제한합니다. 이 옵션은 크기에 관계없이 일관된 정밀도로 숫자를 표시하려는 경우에 유용합니다.

const formatter = new Intl.NumberFormat("en-US", {
  maximumSignificantDigits: 3,
});

console.log(formatter.format(1.2345));
// Output: "1.23"

console.log(formatter.format(12.345));
// Output: "12.3"

console.log(formatter.format(123.45));
// Output: "123"

console.log(formatter.format(1234.5));
// Output: "1,230"

숫자에 최대값보다 많은 유효 숫자가 포함된 경우 포매터는 숫자를 반올림합니다. 반올림은 표준 반올림 규칙을 따르며 가장 가까운 값으로 반올림됩니다. 숫자가 두 값의 정확히 중간에 있는 경우 가장 가까운 짝수로 반올림됩니다.

maximumSignificantDigits 옵션은 1에서 21 사이의 값을 허용합니다. 이 옵션이 지정되지 않은 경우 기본값은 21이며, 이는 사실상 제한이 없음을 의미합니다.

const oneDigit = new Intl.NumberFormat("en-US", {
  maximumSignificantDigits: 1,
});

console.log(oneDigit.format(54.33));
// Output: "50"

console.log(oneDigit.format(56.33));
// Output: "60"

이 옵션은 정수, 소수 및 다양한 표기법의 숫자를 포함한 모든 숫자 유형에서 작동합니다.

최소 유효 숫자로 숫자 형식 지정

minimumSignificantDigits 옵션은 포맷된 출력에 최소한 지정된 개수의 유효 숫자가 표시되도록 보장합니다. 숫자에 최소값보다 적은 유효 숫자가 포함된 경우, 포매터는 후행 0을 추가합니다.

const formatter = new Intl.NumberFormat("en-US", {
  minimumSignificantDigits: 5,
});

console.log(formatter.format(1.23));
// Output: "1.2300"

console.log(formatter.format(123));
// Output: "123.00"

console.log(formatter.format(0.0012));
// Output: "0.0012000"

이 옵션은 측정 또는 계산이 특정 정확도로 수행되었음을 나타내면서 일관된 정밀도 수준으로 숫자를 표시해야 할 때 유용합니다.

minimumSignificantDigits 옵션은 1에서 21 사이의 값을 허용합니다. 기본값은 1이며, 이는 숫자가 추가된 0 없이 자연스러운 정밀도로 표시됨을 의미합니다.

const manyDigits = new Intl.NumberFormat("en-US", {
  minimumSignificantDigits: 10,
});

console.log(manyDigits.format(5));
// Output: "5.000000000"

포매터는 최소값에 도달하기 위해 소수점 뒤에 0을 추가하거나 필요한 경우 소수점 앞에 0을 추가합니다.

최소 및 최대 유효 숫자 결합

minimumSignificantDigits와 maximumSignificantDigits를 함께 지정하여 허용 가능한 정밀도 범위를 만들 수 있습니다. 포매터는 이 범위 내에서 숫자를 표시합니다.

const formatter = new Intl.NumberFormat("en-US", {
  minimumSignificantDigits: 3,
  maximumSignificantDigits: 5,
});

console.log(formatter.format(1.2));
// Output: "1.20"
// Expanded to meet minimum of 3

console.log(formatter.format(1.234));
// Output: "1.234"
// Within range, displayed as-is

console.log(formatter.format(1.23456789));
// Output: "1.2346"
// Rounded to meet maximum of 5

이러한 옵션을 결합할 때 최솟값은 최댓값보다 작거나 같아야 합니다. 최댓값보다 큰 최솟값을 지정하면 포매터가 RangeError를 발생시킵니다.

try {
  const invalid = new Intl.NumberFormat("en-US", {
    minimumSignificantDigits: 5,
    maximumSignificantDigits: 3,
  });
} catch (error) {
  console.log(error.name);
  // Output: "RangeError"
}

이 조합은 최소 정밀도 수준을 적용하면서 과도한 자릿수가 표시를 복잡하게 만드는 것을 방지하려는 과학 또는 금융 애플리케이션에 특히 유용합니다.

유효 숫자와 소수 자릿수의 차이점

유효 숫자와 소수 자릿수는 숫자 정밀도를 제어하는 두 가지 다른 접근 방식을 나타냅니다. 각 접근 방식을 언제 사용해야 하는지 이해하면 숫자를 적절하게 포맷하는 데 도움이 됩니다.

소수 자릿수는 숫자의 크기에 관계없이 소수점 뒤에 표시되는 자릿수를 제어합니다. minimumFractionDigits 및 maximumFractionDigits 옵션이 이 접근 방식을 구현합니다.

const decimalPlaces = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

console.log(decimalPlaces.format(1.2));
// Output: "1.20"

console.log(decimalPlaces.format(12.3));
// Output: "12.30"

console.log(decimalPlaces.format(123.4));
// Output: "123.40"

유효 숫자는 숫자의 크기에 맞춰 전체 숫자에 표시되는 의미 있는 자릿수를 제어합니다. 크기가 다른 숫자는 일관된 정밀도를 유지하기 위해 서로 다른 소수 자릿수를 표시합니다.

const significantDigits = new Intl.NumberFormat("en-US", {
  minimumSignificantDigits: 3,
  maximumSignificantDigits: 3,
});

console.log(significantDigits.format(1.2));
// Output: "1.20"

console.log(significantDigits.format(12.3));
// Output: "12.3"

console.log(significantDigits.format(123.4));
// Output: "123"

유효 숫자 접근 방식은 숫자의 크기가 증가함에 따라 더 적은 소수 자릿수를 표시하는 반면, 소수 자릿수 접근 방식은 크기와 관계없이 동일한 소수 자릿수를 표시합니다.

소수 자릿수 옵션과의 상호작용

유효 숫자 옵션을 지정하면 기본적으로 소수 자릿수 옵션보다 우선합니다. 유효 숫자 옵션 중 하나라도 있으면 포매터는 minimumFractionDigits 및 maximumFractionDigits를 무시합니다.

const formatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
  maximumSignificantDigits: 3,
});

console.log(formatter.format(1234.56));
// Output: "1,230"
// Significant digits option takes precedence
// Fraction digit options are ignored

이 동작은 roundingPriority 옵션으로 제어되며, 이는 포매터가 서로 다른 정밀도 설정 간의 충돌을 해결하는 방법을 결정합니다. 기본값은 "auto"이며, 유효 숫자에 우선순위를 부여합니다.

roundingPriority를 "morePrecision" 또는 "lessPrecision"으로 설정하여 이 동작을 변경할 수 있지만, 이는 특수한 사용 사례를 위한 고급 옵션입니다. 대부분의 애플리케이션에서는 기본 우선순위 동작이 적절합니다.

소수 자릿수 대신 유효 숫자를 사용해야 하는 경우

서로 다른 크기의 숫자에서 일관된 정밀도가 필요한 경우 유효 숫자를 선택하세요. 이 접근 방식은 과학, 공학 및 데이터 시각화 맥락에서 일반적으로 사용됩니다.

과학적 측정 및 계산에는 유효 숫자를 사용하세요. 실험실 결과, 센서 판독값 및 물리적 측정값은 측정 기기의 정밀도를 반영해야 하는 경우가 많습니다. 측정값이 0.0123, 1.23 또는 123이든 관계없이 세 개의 유효 숫자를 일관되게 표시하면 정밀도를 전달할 수 있습니다.

const measurement = new Intl.NumberFormat("en-US", {
  maximumSignificantDigits: 4,
});

console.log(measurement.format(0.012345));
// Output: "0.01235"

console.log(measurement.format(1.2345));
// Output: "1.235"

console.log(measurement.format(1234.5));
// Output: "1,235"

다양한 크기의 숫자를 표시하는 대시보드 메트릭에는 유효 숫자를 사용하세요. 페이지 조회수, 수익 또는 사용자 수와 같은 통계를 표시할 때 유효 숫자를 사용하면 작은 숫자가 과도한 정밀도로 표시되는 것을 방지하면서 큰 숫자를 읽기 쉽게 유지할 수 있습니다.

const metric = new Intl.NumberFormat("en-US", {
  maximumSignificantDigits: 3,
});

console.log(metric.format(1.234));
// Output: "1.23"

console.log(metric.format(123.4));
// Output: "123"

console.log(metric.format(12345));
// Output: "12,300"

센트 또는 기타 고정된 통화 세분화를 나타내는 소수 부분이 있는 통화 및 금융 금액에는 소수 자릿수를 사용하세요. 이러한 금액은 크기에 관계없이 일관된 소수 자릿수가 필요합니다.

const currency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

console.log(currency.format(1.5));
// Output: "$1.50"

console.log(currency.format(123.5));
// Output: "$123.50"

이러한 접근 방식 간의 선택은 정밀도가 전체 자릿수와 관련이 있는지 아니면 고정된 소수 구성 요소와 관련이 있는지에 따라 달라집니다.