[JavaScript/자바스크립트] 숫자 천 단위마다 콤마 찍는 내장 함수(toLocaleString)

[JavaScript/자바스크립트] 숫자 천 단위마다 콤마 찍는 내장 함수(toLocaleString)

나는 예전에 이런 글을 쓴 적이 있다.

[JavaScript/자바스크립트] 숫자 천 단위마다 콤마 찍는 함수

정규식을 통해서 3자리마다 콤마를 찍고 반환하는 아주 간단한 함수인데 얼마 전에 다른 입출력값이 필요했다. 그러니까 위 게시물에 있는 함수인

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

은 소수자리까지도 콤마처리해버려서 쓰기 곤란했다. 그래서 더 찾아보니 자바스크립트 안에는 위 함수를 대체할만 한 아주 훌륭한 함수가 있었다. 바로 제목에도 써있는 toLocaleString이라는 함수이다.

이 함수를 검색했을 때 나오는 한국어 웹은 다 날짜와 관련된 함수라는 설명 뿐이다. 애초에 toLocaleString함수는 Date.prototype클래스 안에도, Number.prototype클래스 안에도 존재하기 때문인데 뭐 용도는 같다. Date클래스 안에 있는 녀석은 날짜를 각 설정한 나라에 맞는 방식으로 출력시켜주고 Number클래스 안에 있는 녀석은 숫자를 각 설정한 나라에 맞는 방식으로 출력시켜준다.

일단 기본적인 용도는 이 링크에서 확인할 수 있다. 링크와 함수의 이름에서 알 수 있다시피 toLocaleString은 말 그대로 특정 자료가 들어왔을 때 설정해놓은 지역에서 읽는 형태로 바꿔는 함수이다. 우리 주변에 흔한 1,000단위로 끊는 숫자 표기법은 영미문화권에서 쓰는 방식이다. 그리고 이 함수의 기본값은 미국으로 돼있다. 해서 이런식으로 하면 쉽게 원하는 결과값을 얻을 수 있다.

var testNumber = 100000000.0235809;
console.log(testNumber.toLocaleString());
//it returns 100,000,000.024

꼭 숫자를 변수에 담은 뒤에 실행하도록 하자. 변수 안에 숫자를 넣으면 생성되는 Number객체 안에 있는 함수를 사용하는 것이기 때문에 그냥 상수 옆에 때려박으면 실행되지 않는다.

만약에 소수점 아래 숫자를 세자리 이상 출력하고 싶으면 이와 같이 하면 된다.

var testNumber = 100000000.0235809;
console.log(testNumber.toLocaleString(undefined, {maximumFractionDigits: 5}));
//it returns 100,000,000.02358

무조건 소수점 아래 숫자를 10자리 뽑아야겠으면 아래와 같이 하면 된다.

var testNumber = 100000000.0235809;
console.log(testNumber.toLocaleString(undefined, {minimumFractionDigits: 10}));
//it returns 100,000,000.0235809000

자세한 사용법은 아까 말한 링크에 훨씬 잘 나와있다. 세계 각 국의 통화나 숫자 표현도 가능하다. 생전 처음 본 꼬부랑언어에서부터 위안화, 엔화, 달러화 표현까지 정말 유용한 함수이다.

날짜에 대한 사용 방법은 이곳을 참고하면 된다.