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

소개

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

유효숫자는 숫자의 정밀도에 대한 의미 있는 정보를 담고 있는 자릿수를 나타냅니다. 123.45라는 숫자는 5개의 유효숫자를 가집니다. 0.00123이라는 숫자는 3개의 유효숫자를 가집니다. 왜냐하면 앞에 오는 0은 정밀도가 아닌 크기만 나타내기 때문입니다.

이 강의에서는 JavaScript에서 유효숫자를 사용하여 숫자를 포맷팅하는 방법을 보여줍니다. 이 접근 방식이 소수점 자릿수를 제어하는 것보다 더 나은 경우와 Intl.NumberFormat API와 함께 minimumSignificantDigits 및 maximumSignificantDigits 옵션을 사용하는 방법을 배우게 됩니다.

유효숫자란 무엇인가

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

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

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

소수점 이후의 끝에 오는 0은 유효합니다. 이들은 측정이나 계산이 해당 수준까지 정밀했음을 나타냅니다. 1.200이라는 숫자는 네 개의 유효숫자를 가지는 반면, 1.2는 단 두 개만 가집니다.

소수점 이전의 끝에 오는 0은 문맥에 따라 달라집니다. 1200이라는 숫자에서는 추가 정보 없이는 0이 유효한지 여부가 불분명합니다. 과학적 표기법이나 명시적 정밀도 지표가 이러한 모호성을 해결합니다.

최대 유효 자릿수로 숫자 형식 지정하기

maximumSignificantDigits 옵션은 형식이 지정된 출력에 표시되는 유효 자릿수를 제한합니다. 이 옵션은 숫자의 크기에 관계없이 일관된 정밀도로 숫자를 표시하고자 할 때 유용합니다.

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

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

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

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

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

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

maximumSignificantDigits 옵션은 1부터 21까지의 값을 허용합니다. 이 옵션을 지정하지 않을 때의 기본값은 21로, 사실상 제한이 없음을 의미합니다.

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

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

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

이 옵션은 정수, 소수, 그리고 다양한 표기법의 숫자를 포함한 모든 숫자 유형에 적용됩니다.

최소 유효 자릿수로 숫자 형식 지정하기

minimumSignificantDigits 옵션은 형식이 지정된 출력에 최소한 지정된 수의 유효 자릿수가 표시되도록 합니다. 숫자가 최소값보다 적은 유효 자릿수를 포함할 때, 포맷터는 후행 0을 추가합니다.

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

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

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

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

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

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

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

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

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

최소 및 최대 유효 자릿수 결합하기

허용 가능한 정밀도 범위를 만들기 위해 minimumSignificantDigits와 maximumSignificantDigits를 함께 지정할 수 있습니다. 포맷터는 이 범위 내의 숫자를 표시합니다.

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

console.log(formatter.format(1.2));
// 출력: "1.20"
// 최소 3자리를 충족하기 위해 확장됨

console.log(formatter.format(1.234));
// 출력: "1.234"
// 범위 내에 있으므로 그대로 표시됨

console.log(formatter.format(1.23456789));
// 출력: "1.2346"
// 최대 5자리를 충족하기 위해 반올림됨

이러한 옵션을 결합할 때, 최소값은 최대값보다 작거나 같아야 합니다. 최소값이 최대값보다 크게 지정하면 포맷터는 RangeError를 발생시킵니다.

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

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

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

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

소수점 자릿수는 숫자의 크기에 관계없이 소수점 이후에 나타나는 자릿수를 제어합니다. minimumFractionDigits와 maximumFractionDigits 옵션이 이 접근 방식을 구현합니다.

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

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

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

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

유효 자릿수는 숫자의 크기에 맞게 조정하여 전체 숫자에 나타나는 의미 있는 자릿수를 제어합니다. 크기가 다른 숫자는 일관된 정밀도를 유지하기 위해 다른 소수점 자릿수를 표시합니다.

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

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

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

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

유효 자릿수 접근 방식은 숫자의 크기가 증가함에 따라 소수점 자릿수가 줄어드는 반면, 소수점 자릿수 접근 방식은 크기에 관계없이 동일한 소수점 자릿수를 표시한다는 점에 주목하세요.

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

유효 자릿수 옵션을 지정하면 기본적으로 소수 자릿수 옵션보다 우선 적용됩니다. 포맷터는 유효 자릿수 옵션이 있을 때 minimumFractionDigits와 maximumFractionDigits를 무시합니다.

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

console.log(formatter.format(1234.56));
// 출력: "1,230"
// 유효 자릿수 옵션이 우선 적용됨
// 소수 자릿수 옵션은 무시됨

이 동작은 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));
// 출력: "0.01235"

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

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

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

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

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

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

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

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

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

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

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

이러한 접근 방식 중 선택은 정밀도가 총 자릿수와 관련되는지 또는 고정된 소수 구성 요소와 관련되는지에 따라 달라집니다.