소수점 이하의 후행 0을 어떻게 제거하나요?

소개

숫자를 포맷팅할 때, 일부 값은 소수점 이후에 후행 0이 자연스럽게 나타납니다. 1.5라는 숫자가 1.50으로 표시되거나, 3이 3.00으로 표시될 수 있습니다. 이러한 후행 0은 센트를 일관되게 표시하고자 하는 가격에는 의미가 있을 수 있지만, 통계나 측정값을 표시할 때는 불필요해 보입니다.

JavaScript의 Intl.NumberFormat은 후행 0의 표시 여부를 제어할 수 있게 해줍니다. 필요에 따라 포맷터를 구성하여 후행 0을 제거하거나, 유지하거나, 다른 규칙을 적용할 수 있습니다.

후행 0이란 무엇인가

후행 0은 소수점 이후 숫자의 끝에 나타나는 0입니다. 이는 숫자의 수학적 값을 변경하지 않지만, 표시될 때 숫자의 모양에 영향을 줍니다.

// 이 숫자들은 같은 값을 가지지만 후행 0이 다릅니다
1.5   // 후행 0 없음
1.50  // 후행 0 하나
1.500 // 후행 0 둘

후행 0은 표시할 소수 자릿수를 지정할 때 나타날 수 있습니다. 숫자가 지정한 소수 자릿수보다 유효 숫자가 적으면, 포맷터는 남은 위치를 채우기 위해 0을 추가합니다.

Intl.NumberFormat이 기본적으로 소수 자릿수를 표시하는 방법

기본적으로 Intl.NumberFormat은 최대 3개의 소수 자릿수를 표시하고 후행 0을 제거합니다. 이는 대부분의 숫자가 불필요한 0 없이 표시됨을 의미합니다.

const formatter = new Intl.NumberFormat("en-US");

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

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

console.log(formatter.format(1.123456));
// 출력: "1.123"

포맷터는 1.5와 1.50을 동일한 값으로 취급하여 동일하게 표시합니다. 3자리 이상의 소수 자릿수를 가진 숫자는 3자리로 반올림됩니다.

최소 및 최대 소수 자릿수 설정하기

'minimumFractionDigits'와 'maximumFractionDigits' 옵션은 소수점 이하에 표시되는 자릿수를 제어합니다. 이 두 옵션은 함께 작동하여 후행 0의 표시 여부를 결정합니다.

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

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

console.log(formatter.format(1));
// 출력: "1.00"

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

'minimumFractionDigits'와 'maximumFractionDigits'가 동일한 값으로 설정되면, 모든 숫자는 정확히 그 자릿수만큼 소수점 이하 자리를 표시합니다. 자릿수가 적은 숫자는 후행 0이 추가되고, 자릿수가 많은 숫자는 반올림됩니다.

후행 0 제거하기

후행 0을 제거하려면 'minimumFractionDigits'를 0으로 설정하고 'maximumFractionDigits'를 허용하려는 최대 소수 자릿수로 설정하세요. 이 구성은 포맷터에게 0에서 N 사이의 소수 자릿수를 표시하되, 필요한 만큼만 사용하도록 지시합니다.

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

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

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

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

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

포맷터는 정수를 소수점 없이 표시하고, 소수점 이하 한 자리 숫자는 그대로 표시하며, 표시될 후행 0을 제거합니다. 최대 소수 자릿수를 초과하는 숫자는 여전히 최대 소수 자릿수로 반올림됩니다.

최소값을 0보다 크게 설정하기

'minimumFractionDigits'를 0보다 큰 값으로 설정하면서도 후행 0이 제거되도록 할 수 있습니다. 이렇게 하면 항상 최소한의 소수 자릿수가 표시되면서도 그 이상의 후행 0은 제거됩니다.

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

console.log(formatter.format(1));
// 출력: "1.0"

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

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

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

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

숫자 1은 최소 소수 자릿수가 1이기 때문에 1.0으로 표시됩니다. 숫자 1.5는 그대로 표시됩니다. 숫자 1.50은 후행 0이 제거됩니다. 소수점 이하 3자리를 초과하는 숫자는 3자리로 반올림됩니다.

후행 0을 유지해야 하는 경우

모든 숫자에서 일관된 정밀도를 보여줘야 할 때는 후행 0을 유지하세요. 이는 가격, 금융 금액, 그리고 소수점 자릿수가 의미를 전달하는 측정값에서 일반적입니다.

// 가격은 일관된 소수점 자릿수를 표시해야 합니다
const priceFormatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

console.log(priceFormatter.format(5));
// 출력: "$5.00"

console.log(priceFormatter.format(5.5));
// 출력: "$5.50"

통화 포맷터는 기본적으로 이 접근 방식을 사용합니다. 두 금액 모두 정확히 소수점 이하 2자리로 표시되어 비교하기 쉽고 이것이 화폐 가치임을 강조합니다.

후행 0을 제거해야 하는 경우

통계, 백분율, 측정값 또는 후행 0이 정보를 추가하지 않는 값을 표시할 때는 후행 0을 제거하세요. 이렇게 하면 더 깔끔하고 가독성 있는 출력이 생성됩니다.

// 통계는 후행 0 없이 더 깔끔해 보입니다
const statsFormatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
});

console.log(`Average: ${statsFormatter.format(3.5)} items`);
// 출력: "Average: 3.5 items"

console.log(`Total: ${statsFormatter.format(100)} items`);
// 출력: "Total: 100 items"

// 백분율은 종종 후행 0 없이 더 잘 작동합니다
const percentFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  minimumFractionDigits: 0,
  maximumFractionDigits: 1
});

console.log(percentFormatter.format(0.75));
// 출력: "75%"

console.log(percentFormatter.format(0.755));
// 출력: "75.5%"

통계와 백분율은 필요한 소수점 자릿수만 표시합니다. 정수는 소수점 없이 나타나고, 의미 있는 소수 자릿수가 있는 숫자는 불필요한 후행 0 없이 표시됩니다.

로케일이 소수점 표시에 미치는 영향

소수점의 위치와 숫자 그룹화 문자는 로케일에 따라 다르지만, 후행 0에 대한 규칙은 모든 로케일에서 동일하게 작동합니다. minimumFractionDigits와 maximumFractionDigits 옵션은 어떤 로케일을 사용하든 동일한 효과를 가집니다.

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

const formatterDE = new Intl.NumberFormat("de-DE", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
});

console.log(formatterEN.format(1234.5));
// 출력: "1,234.5"

console.log(formatterDE.format(1234.5));
// 출력: "1.234,5"

두 포맷터 모두 후행 0을 제거하고 소수점 한 자리로 숫자를 표시합니다. 차이점은 미국 영어 형식은 소수점에 마침표를 사용하고 천 단위 구분자로 쉼표를 사용하는 반면, 독일어 형식은 반대 규칙을 사용한다는 것입니다.