금액 단위 포맷 함수

2000000 값을 2,000,000원으로 나타내는 방법

$('.price-format').each(function () {
    var price = parseInt($(this).text(), 10);
    $(this).text(price.toLocaleString('ko-KR') + "원");
});

코드해석:

$('.price-format').each(function () { ... });

클래스명이 price-format인 모든 요소를 하나씩 순회한다.
.each()는 jQuery의 반복문 함수로, 내부의 function(){}은 각 요소마다 실행된다.

var price = parseInt($(this).text(), 10);

현재 순회 중인 요소의 텍스트 내용을 가져와 정수형 숫자로 변환한다. parseInt(..., 10)은 문자열을 10진수 숫자로 바꾸는 함수이다.

$(this).text(price.toLocaleString('ko-KR') + "원");

숫자를 한국식 천 단위 쉼표가 붙도록 포맷하고 "원"을 붙인다.

"원" 단위를 고정하지 않고 2,000,000 / 2,000,000개 / 2,000,000cm ... 다양한 방법으로 단위를 표시하는 방법에 대해 살펴보자.

function formatNumbers(selector, suffix = '') {
    $(selector).each(function () {
        const number = parseInt($(this).text().replace(/[^0-9]/g, ''), 10);
        if (!isNaN(number)) {
            $(this).text(number.toLocaleString('ko-KR') + suffix);
        }
    });
}

코드해석:

function formatNumbers(selector, suffix = '') { ... }

selector, suffix 두 개의 인자를 받는다. suffix의 기본값은 빈 문자열이고 "원"이나 "개", "cm" 등 숫자 뒤에 붙일 접미사를 넣으면 된다.

$(selector).each(function () { ... });

selector로 선택한 모든 요소에 대해 반복 작업을 수행한다. this는 반복 중인 현재 요소를 의미한다.

const number = parseInt($(this).text().replace(/[^0-9]/g, ''), 10);

현재 요소의 값을 가져와 숫자 이외의 문자는 모두 제거한다. 그리고 10진수 정수로 변환한다.

if (!isNaN(number)) { ... }

number가 유효한 숫자인지 isNaN() 함수로 검사한다. 숫자일 경우에만 조건문이 실행된다.

$(this).text(number.toLocaleString('ko-KR') + suffix);

숫자를 한국식 천 단위 쉼표 구분 포맷으로 바꿔주고, suffix가 있으면 숫자 뒤에 추가된다.

formatNumbers() 함수를 실행시키면 아래와 같은 결과를 얻을 수 있다.