maximumFractionDigits

가장 보편적으로 사용되는 정규표현식을 사용하면 safari에서 다음과 같은 에러가 발생한다.

value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

SyntaxError: Invalid regular expression: invalid group specifier name...

이전에도 이러한 크로스브라우징 이슈를 마주친 적이 있는데, toLocaleString을 사용해서 해결했었다.

value.toLocaleString('ko-KR');

value에 반드시 정수만 온다면 이 방식을 쓰는 것이 간단하고 좋다. 이외에도 다양한 방법이 있지만, 새로운 기능을 알게 되어 정리하게 되었다.

만약 소수점이 있는 유리수가 올 수도 있다면 maximumFractionDigits를 사용하여 소수점을 지정할 수 있다.
Intl.NumberFormat() constructor - JavaScript | MDN
maximumFractionDigits는 숫자 포맷팅 메서드에서 사용된다. 주 목적은 숫자를 문자열로 변환할 때 표시할 소수점 이하 최대 자릿수를 지정하는 것. 반대로 최소 자릿수를 지정하는 minimumFractionDigits도 있다.

value.toLocaleString('ko-KR', { maximumFractionDigits: 2 });

다음과 같이 천단위 콤마를 찍으면서 동시에 소수점 자리수를 지정할 수 있다.

이 방법은 toFixed를 사용하는 것보다 유용한 것 같다. 기본적으로 toLocaleString을 사용하기 때문에 소수점을 지정함과 동시에 천단위 콤마나 통화 표시 등 다양한 포맷을 적용할 수 있기 때문이다.

const num = 1234.567;

// 미국 달러로 통화 표시, 소수점 이하 두 자리까지 지정
const formattedNumber = num.toLocaleString('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

console.log(formattedNumber); // "$1,234.57"

도움을 받은 글:

https://okayoon.tistory.com/entry/숫자-천-단위-마다-콤마-찍어주세요-1000-소수점-숫자도-나와야해요-RegExr-toLocaleString-정규-표현식LookaheadLookbehind사파리-lookbehind-오류에-대해서