[JavaScript/jQuery] 세번째 자리 마다 콤마 찍기

세번째 자리 콤마 넣는 함수 comma(num)

//세번째 자리 콤마
function comma(num){
   var len, point, str;

   num = num + "";
   point = num.length % 3 ;
   len = num.length;

   str = num.substring(0, point);
   while (point < len) {
      if (str != "") str += ",";
      str += num.substring(point, point + 3);
      point += 3;
   }

   return str;
}

num : number의 줄임말로 자바스크립트의 + 연산으로 "" 과 더하여 숫자를 문자열로 만듭니다.

len : length의 줄임말, 파라미터로 넘긴 num의 길이를 저장합니다.

point : num의 길이를 나눈 후 나머지를 저장합니다.  1000 이라는 4글자의 숫자가 파라미터로 넘어왔다면 나머지는 1이겠지요

substring : 문자열은 사실 배열이란걸 아시나요? 문자열을 자르는 함수 입니다. (시작인덱스, 종료인덱스) 로 2개의 파라미터를 넘깁니다. str에 0~point까지 문자열을 자르면 1000이라면 1 이겠죠, 이런식으로 한줄한줄 해석하다보면 쉽게 이해하실 수 있는 코드 입니다.

--

세번째 자리에 콤마를 찍는 상황은 어떤 상황 일까요?

보통 쇼핑몰 사이트나 숫자를 다루는 사이트에서 많이 씁니다.

상품 리스트나 상세정보에서 가격을 띄워줘야하는 상황에서, 숫자에 가독성을 높이기 위해 콤마를 보통 찍습니다.

이 콤마 찍는 것을 함수화 하여 어떤 한 페이지, 즉 자바스크립트 함수를 모아 놓는 페이지에다가 두면 두고두고 필요할 때 쓸 수 있겠죠.

저만 그런건진 모르겠지만 제가 자바스크립트 개발 초반때는 그때 그때 쓸일 있을 때만 해당 페이지에 스크립트 삽입해서 했었는데요

그러다 보면 중복적으로 삽입하는 경우도 생기고 불필요한 소스코드만 늘어나게 되지요. 모듈화는 처음부터 성실하게 하는게 좋겠더군요

나중에 한꺼번에 하려고하면 정말 하기 귀찮습니다. :(

아무튼 콤마를 넣어서 쉼표가 있는 숫자를 만들었다면 이것은 숫자가 아닌 문자열 입니다. 쉼표가 있으니까요.

그래서 계산할때 문제가 됩니다. 예를 들어 상품 결제 페이지에서 마일리지를 써서 총 가격을 차감하는 경우가 있겠죠

그럴 경우 콤마를 삭제한 후 계산해야 정상적으로 계산이 될 것 입니다.

콤마를 삭제하는 함수는 아래 URL을 살펴보시면 됩니다.

http://kkotkkio.tistory.com/84