Javascript - 숫자에 금액 단위 형식 사용하기 [원, 만, 억, 조, 경]

숫자에 금액 단위 형식을 적용하면 어떻게 될까요? 돈(금액)을 화면에 보여주다 보면 단순히 숫자로 10,000원 이렇게 표기되는 것보다, 1만원이라고 표기되는 게 단위를 세지 않아도 되어 읽기가 편합니다. 돈의 단위를 숫자에 적용하면 가독성이 좋다는 건 사람마다 주관적인 부분이라 다르게 생각할 수 있는 부분이니 이게 꼭 옳다고 이야기는 어려운 부분이네요.

숫자 금액 단위 형식 적용하면? - 원, 만, 억, 조, 경

숫자 금액 단위 포맷 적용

일반적으로 숫자에 포맷 형식을 적용하면 천 단위를 기준으로 "," 를 사용해 표기를 합니다. 하지만 금액(돈)을 셀 때는 만, 억, 조, 경 단위를 붙여 읽습니다. 위에서 제시한 결과처럼 말이죠

 

 처음에 금액에 단위 형식을 적용하면 가독성을 높이고 문자의 길이가 짧아져서도 좋을 거라고 생각했는데, 숫자가 알맞게 딱 나누어지는 값이 많지 않아 문자의 길이는 줄어드는 경우의 빈도가 적어 아쉬웠습니다. 어떻게 하면 돈을 더 읽기 쉽게 할 수 있을지 고민해보면 좋을 것 같습니다.

정규식으로 숫자 콤마(",") 형식 적용

금액 단위 형식을 적용하기에 앞서 숫자에 콤마(",") 형식을 적용하는 방법을 알아보겠습니다. 숫자에 콤마(",")를 적용하는 방식은 여러 가지가 있지만 이 글에서는 정규식을 사용한 코드를 작성했습니다. 아래의 예제 코드를 사용하면 천 단위(3자리)로 숫자에 콤마(",")를 삽입해 결과를 반환합니다.

const NUMBER_FORMAT_REGX = /\B(?=(\d{3})+(?!\d))/g;

const numberFormat = (value) => {
    return value.toString().replace(NUMBER_FORMAT_REGX, ',');
}

숫자 금액 형식 포맷 기능 사용하기

조금 더 리팩토링을 사용해 개선하면 좋겠지만, 쉽게 사용할 수 있는 형태로 만들기 위해 아래와 같이 코드를 작성했습니다.

const moneyFormat = (value) => {
    const numbers = [
        numbering(value % 100000000000000000000, 10000000000000000),
        numbering(value % 10000000000000000, 1000000000000),
        numbering(value % 1000000000000, 100000000),
        numbering(value % 100000000, 10000),
        value % 10000
    ]

    return setUnitText(numbers)
            .filter(number => !!number)
            .join(' ');
}

const setUnitText = (numbers) => {
    const unit = ['원', '만', '억', '조', '경'];
    return numbers.map((number, index) => !!number ? numberFormat(number) + unit[(unit.length - 1) - index] : number)
}

const numbering = (value, division) => {
    const result = Math.floor(value / division);
    return result === 0 ? null : (result % division);
}

const NUMBER_FORMAT_REGX = /\B(?=(\d{3})+(?!\d))/g;

const numberFormat = (value) => {
    return value.toString().replace(NUMBER_FORMAT_REGX, ',');
}

코드에 대해 간략히 설명하면, numbering() 함수를 사용해 원래 값을 금액 단위('원', '만', '억', '조', '경')로 쪼개고, setUnitText() 함수를 사용해 금액 단위 텍스트를 추가하게 만들어져 있습니다. 앞서 이야기한 숫자에 단위를 적용해 콤마를 사용하는 코드도 사용합니다.

 

 이 예제 코드만으로는 바로 확인하기가 어려워 사용자가 값을 입력하면 실시간으로 금액 형식을 적용하는 예제코드를 추가로 작성해 샘플 파일을 작성하였습니다.

sample.html

0.00MB

* 자바스크립트에서 다루는 숫자(Number)는 범위의 제한이 있습니다.