My Boundary As Much As I Experienced

숫자에 쉼표 찍는 법! '.toLocaleString()' 혹은 '정규표현식' 본문

FrontEnd/Javascript(Vanilla)

숫자에 쉼표 찍는 법! '.toLocaleString()' 혹은 '정규표현식'

Bumang 2024. 6. 21. 11:09

숫자에 세 자리 마다 쉼표를 찍어야 할때가 있다.

이럴 때 원래 string으로 만들고, .reverse()하여 세 자리마다 슬라이스해서 ','으로 join()으로 붙이는 함수를 만들어서 썼었는데

그냥 toLocaleString()을 하거나 정규표현식을 쓰는게 더 간편하다는 것을 깨달았다.

 

toLocaleString 사용

const number = 1234567.89;
const formattedNumber = number.toLocaleString();
console.log(formattedNumber); // "1,234,567.89"

// 옵션 없이 사용 (기본 설정)
console.log(number.toLocaleString()); // "1,234,567.89"

// 소수점 이하 자릿수 지정
console.log(number.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })); // "1,234,567.89"

// 통화 형식 지정 (미국 달러)
console.log(number.toLocaleString('en-US', { style: 'currency', currency: 'USD' })); // "$1,234,567.89"

// 한국 원화 형식 지정
console.log(number.toLocaleString('ko-KR', { style: 'currency', currency: 'KRW' })); // "₩1,234,567.89"

 

정규표현식 사용

function addCommasToNumber(number) {
    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

const number = 1234567.89;
const formattedNumber = addCommasToNumber(number);
console.log(formattedNumber); // "1,234,567.89"