[javascript] 자바스크립트 천단위 콤마 찍기

자바스크립트의 숫자 데이터에 천 단위 콤마를 찍어주는 함수를 공통으로 만들어 숫자 데이터의 가독성을 향상시키고, 코드의 품질 또한 올려줄 수 있다.

목차

오늘은 자바스크립트에서 숫자형 데이터를 처리할 때 자주 사용되는, 천 단위 콤마를 찍는 방법에 대해 정리하려고 합니다.

이 기능은 정말 간단하지만 많이 필요한 기능 중 하나입니다. 숫자형 데이터에 천 단위마다 콤마를 찍어주는 것과 그렇지 않은 것은 가독성에 엄청난 차이를 만들어냅니다. 사용자 입장에서도 콤마가 있는 숫자를 보는 것이 훨씬 편리하고 이해하기 쉬워지기 때문에, 이 기능은 매우 유용하고 필수적입니다.

그러면 예제를 통해서 하나씩 정리해 보도록 하겠습니다.

---

예제 소스 코드

<script>
/**
 * Document load 
 */
document.addEventListener('DOMContentLoaded', () => {
    // 설정 대상 값
    let num = 1000
    // comma 적용 X
    document.querySelector('#beforeCommaId').textContent = num;
    // afterCommaId dom 영역에 comma 데이터 추가
    document.querySelector('#afterCommaId').textContent = addComma(num);
});

/**
 * 숫자형 데이터 3자리마다 콤마 찍기 Function
 * 
 * @param {*} num 
 */
 function addComma(num) {
    /**
     * 공백 확인
     */
    if (!num) {
        return '';
    }

    // Number 변경
    num = Number(num)

    /**
     * 숫자 / 문자 판별
     */
    if (isNaN(num)) {
        console.log('숫자가 아닙니다.');
        return '';
    }

    // 정규식을 이용한 3자리마다 콤마 찍기
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

</script>
<div>
    <span>적용 전 금액 : </span>
    <span id="beforeCommaId"></span>
</div>
<div>
    <span>적용 후 금액 : </span>
    <span id="afterCommaId"></span>
</div>

위의 소스 코드는 자바스크립트를 사용하여 숫자형 데이터에 천단위 콤마를 적용하는 기능을 구현한 예제입니다.

문서가 로드되면 실행되는 이벤트 핸들러로, 초기 설정된 숫자 값인 num에 대해서 천 단위 콤마를 적용하고 결과를 화면에 출력하는 작업을 수행합니다.

addComma 함수

입력된 숫자를 천단위 콤마가 있는 문자열로 변환하여 반환하는 함수입니다. 다음과 같은 과정으로 동작합니다.

- 입력된 값이 비어있는지 확인하고, 빈 값인 경우 빈 문자열을 반환합니다.
- 입력된 값(num)을 숫자로 변경합니다.
- 변경된 숫자가 유효한 숫자인지 확인합니다. 숫자가 아니라면 콘솔에 '숫자가 아닙니다.' 메시지를 출력하고 빈 문자열을 반환합니다.
- 유효한 숫자인 경우, 정규식을 이용하여 toString() 메서드를 사용해 숫자를 문자열로 변환한 뒤, replace() 메서드를 사용하여

정규식에 맞게 3자리마다 콤마를 찍어줍니다.

HTML 부분

<div> 태그로 두 개의 영역을 생성하고, 첫 번째 영역에는 적용 전 숫자(num)를 출력하고, 두 번째 영역에는 addComma() 함수를

사용하여 천단위 콤마가 적용된 결과를 출력합니다.

이렇게 코드에서는 addComma() 함수를 사용하여 숫자 데이터를 처리하고, 웹 페이지에서 천 단위 콤마가 적용된 형태로 보여줍니다. 이를 통해 숫자 데이터의 가독성과 사용자 경험을 향상할 수 있습니다.

그러면 위의 예제에서 입력하는 인자값별로 결과가 어떻게 나오는지 하나씩 확인해 보도록 하겠습니다.

---

예제 실행 (인자값 1000 변경)

// 설정 대상 값
let num = 1000
// comma 적용 X
document.querySelector('#beforeCommaId').textContent = num;
// afterCommaId dom 영역에 comma 데이터 추가
document.querySelector('#afterCommaId').textContent = addComma(num);

실행 결과

addComma 함수에 인자값으로 1000으로 입력한 경우, 실행 결과와 같이 천단위 기준으로 콤마가 정상적으로 적용되었습니다.

---

예제 실행 (인자값 12300000 변경)

// 설정 대상 값
let num = 12300000
// comma 적용 X
document.querySelector('#beforeCommaId').textContent = num;
// afterCommaId dom 영역에 comma 데이터 추가
document.querySelector('#afterCommaId').textContent = addComma(num);

실행 결과

addComma 함수에 인자값으로 12300000으로 입력한 경우에도 마찬가지로 실행 결과가 천 단위 기준으로 콤마가 정상적으로 적용되었습니다.

---

예제 실행 (인자값 ABC456000 변경)

// 설정 대상 값
let num = 'ABC456000'
// comma 적용 X
document.querySelector('#beforeCommaId').textContent = num;
// afterCommaId dom 영역에 comma 데이터 추가
document.querySelector('#afterCommaId').textContent = addComma(num);

실행 결과

인자값으로 'ABC456000'을 입력하고 addComma 함수를 실행한 결과, 해당 부분에서 문자 판별 구문에 걸려 공백이 반환되었습니다. 이런 경우 상황에 맞게 함수를 커스텀하여 기능을 구현할 수 있습니다.

---

예제 실행 (인자값 456000.123 변경)

// 설정 대상 값
let num = '456000.123'
// comma 적용 X
document.querySelector('#beforeCommaId').textContent = num;
// afterCommaId dom 영역에 comma 데이터 추가
document.querySelector('#afterCommaId').textContent = addComma(num);

실행 결과

마지막으로, 소수점을 포함한 입력값을 addComma 함수에 전달한 결과입니다. 정규식에 따라 소수점은 무시되며, 천 단위 기준으로 콤마가 정상적으로 적용되었습니다. 이로써 함수가 다양한 상황에서도 잘 작동함을 확인할 수 있습니다.

---

마무리

오늘은 자바스크립트에서 숫자형 데이터에 천단위 기준으로 콤마를 추가하는 함수를 만들고 예제를 진행했습니다.

자바스크립트를 활용하여 frontend UI 개발을 진행할 때, 데이터 표현이 매우 중요한 부분입니다. 이러한 작은 기능들을 익히고 응용한다면 다양한 업무 환경에서 유용하게 활용할 수 있습니다. 더 나은 UI 경험과 데이터 표현을 위해 계속해서 개발 기술을 익히는 것이 중요합니다.

그럼 다음에도 간단한 기능들을 정리해서 포스팅하도록 하겠습니다.