소수점 뒤의 후행 0을 제거하는 방법은 무엇인가요?

소개

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

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

후행 0이란 무엇인가

후행 0은 소수점 뒤 숫자의 끝에 나타나는 0입니다. 이들은 숫자의 수학적 값을 변경하지 않지만, 표시될 때 숫자가 어떻게 보이는지에 영향을 미칩니다.

// These numbers have the same value but different trailing zeros
1.5   // No trailing zeros
1.50  // One trailing zero
1.500 // Two trailing zeros

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

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

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

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

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

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

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

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

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

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

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

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

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

최솟값을 0보다 크게 설정

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

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

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

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

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

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

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

숫자 1은 최솟값이 소수 첫째 자리이므로 1.0으로 표시됩니다. 숫자 1.5는 그대로 표시됩니다. 숫자 1.50은 후행 0이 제거됩니다. 소수 셋째 자리를 초과하는 숫자는 셋째 자리로 반올림됩니다.

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

모든 숫자에서 일관된 정밀도를 표시해야 할 때는 후행 0을 유지합니다. 이는 가격, 금융 금액, 측정값 등 소수 자릿수가 의미를 전달하는 경우에 일반적입니다.

// Prices should show consistent decimal places
const priceFormatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});

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

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

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

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

통계, 백분율, 측정값 또는 후행 0이 추가 정보를 제공하지 않는 모든 값을 표시할 때 후행 0을 제거합니다. 이렇게 하면 더 깔끔하고 읽기 쉬운 출력이 생성됩니다.

// Statistics look cleaner without trailing zeros
const statsFormatter = new Intl.NumberFormat("en-US", {
  minimumFractionDigits: 0,
  maximumFractionDigits: 2
});

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

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

// Percentages often work better without trailing zeros
const percentFormatter = new Intl.NumberFormat("en-US", {
  style: "percent",
  minimumFractionDigits: 0,
  maximumFractionDigits: 1
});

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

console.log(percentFormatter.format(0.755));
// Output: "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));
// Output: "1,234.5"

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

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