자바스크립트 천 단위 콤마 찍기 및 제거하기

- 숫자 자료형 천 단위 콤마 찍기 -

장바구니에 있던 상품들을 구매하는 화면을 만들고 있었다.
서버로부터 item list를 받아온다.
그리고 item 하나씩 row를 생성한다.
참고로 여기서 createNewCell()은 내장 함수가 아니다.
input 태그 요소를 되돌려주도록 직접 만든 함수다.

function addRowsToCartTable(list) {
    //기존에 있던 row들 지우기
    const tbody = document.querySelector('tbody#orderList');
    while (tbody.firstChild) {
        tbody.removeChild(tbody.firstChild);
    }

    //서버로부터 받아온 리스트 안에서 row를 하나씩 꺼내오기
    list.forEach((item, index) => {
        //row 생성 + 속성 부여
        const newRow = document.createElement('tr');
        newRow.setAttribute('row-num', index);

        //row에 column 하나씩 추가
        newRow.appendChild(createNewCell('checkbox', 'chbox'));     //구매할지 여부 선택
        newRow.appendChild(createNewCell('text', 'orderID', item.order_id));    //주문 ID
        newRow.appendChild(createNewCell('date', 'orderDate', item.order_date));    //주문 날짜
        newRow.appendChild(createNewCell('text', 'unitPrice', (item.price).toLocaleString()));  //개당 가격
        newRow.appendChild(createNewCell('number', 'orderCnt', item.order_cnt));    //주문 갯수
        newRow.appendChild(createNewCell('text', 'totalPrice', (item.price * item.pur_cnt).toLocaleString()));  //총 금액

        //row를 tbody에 추가
        document.querySelector('tbody#orderList').appendChild(newRow);

    });

}

개당 가격과 총 금액이 있다.
이 부분은 숫자 자료형인데, 
화면에는 '123456790' 하는 식으로 그대로 출력됐다.

금액 정보는 천 자리 숫자마다 콤마를 찍고 싶었다.
예를 들어 '1,234,567,890' 하는 식이다.
data.toLocaleString() 함수를 썼다.

newRow.appendChild(createNewCell('text', 'unitPrice', item.price));  //개당 가격
newRow.appendChild(createNewCell('number', 'orderCnt', item.order_cnt));    //주문 갯수
newRow.appendChild(createNewCell('text', 'totalPrice', item.price * item.pur_cnt));  //총 금액

 

원래 위처럼 썼던 부분을 아래처럼 고쳤다.

newRow.appendChild(createNewCell('text', 'unitPrice', (item.price).toLocaleString()));  //개당 가격
newRow.appendChild(createNewCell('number', 'orderCnt', item.order_cnt));    //주문 갯수
newRow.appendChild(createNewCell('text', 'totalPrice', (item.price * item.pur_cnt).toLocaleString()));  //총 금액

- 값에서 콤마 제거하기 -

이렇게 바꾸니 원래 잘 되던 기능이 에러가 났다.
주문 갯수를 바꾸면 상품당 가격과 갯수를 곱하여
총 결제해야 하는 금액을 업데이트 하는 기능이다.
구현 부분은 아래와 같다.

function updatePayment(e) {
    let total = 0;
    const tbody = document.querySelector('tbody#orderList');
    //tbody.childNodes 하면 바로 하위 요소들을 리스트로 불러옴
    tbody.childNodes.forEach((item, index) => {
        if (item.tagName == 'TR') { //각 요소가 갖는 속성 중에 tagName의 값을 확인하여 tr 태그일 때만 계산
            const chTF = item.querySelector('input.chbox').checked; //구매할지 여부 checkbox가 체크된 경우에만 총 결제해야 하는 금액에 포함
            if (chTF) {
                const price = item.querySelector('input.unitPrice').value;  //여기서 item은 row다. row 안에서 상품 가격 받아오기
                const cnt = item.querySelector('input.orderCnt').value;    //여기서 item은 row다. row 안에서 주문 갯수 받아오기
                total += price * cnt;
            }
        }
    });
    const totalToPay = document.querySelector('div#paymentInfo span#totalToPay');
    totalToPay.innerText = total.toLocaleString();
}

총 결제 금액이 갑자기 'NaN' 이 표시되었다.
'Null'도 아니고 'NaN'이었다.

숫자가 아니라고? 
아마 '1,234,567,890'에서 콤마 ',' 를
문자열 그대로 받아오는 듯 싶었다.

값을 받아오되, 
문자열은 없애고 숫자만 되돌려주는 함수를 만들었다.

function numberParser(value) {
    return parseInt(value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1'));
}

그리고 총액을 계산해 줄 때
가격과 갯수에서 숫자만 남겨주는 함수를 실행했다.
예상대로 잘 작동했다.

if (chTF) {
    const price = item.querySelector('input.unitPrice').value;
    const cnt = item.querySelector('input.purCnt').value;
    total += (numberParser(price) * numberParser(cnt));
}

//수정본

function addRowsToCartTable(list) {
    const tbody = document.querySelector('tbody#cartListBody');
    while (tbody.firstChild) {
        tbody.removeChild(tbody.firstChild);
    }

    list.forEach((item, index) => {
        const newRow = document.createElement('tr');
        newRow.setAttribute('row-num', index);

        newRow.appendChild(createNewCell('checkbox', 'chbox'));    
        newRow.appendChild(createNewCell('text', 'orderID', item.order_id));   
        newRow.appendChild(createNewCell('date', 'orderDate', item.order_date));   
        newRow.appendChild(createNewCell('text', 'unitPrice', (item.price).toLocaleString())); 
        newRow.appendChild(createNewCell('number', 'orderCnt', item.order_cnt));   
        newRow.appendChild(createNewCell('text', 'totalPrice', (item.price * item.pur_cnt).toLocaleString())); 

        document.querySelector('#cartListBody').appendChild(newRow);

    });

}



function updatePayment(e) {
    let total = 0;

    const tbody = document.querySelector('tbody#cartListBody');
    tbody.childNodes.forEach((item, index) => {
        if (item.tagName == 'TR') { 
            const chTF = item.querySelector('input.chbox').checked; 
            if (chTF) {
                const price = item.querySelector('input.unitPrice').value;
                const cnt = item.querySelector('input.purCnt').value;
                total += (numberParser(price) * numberParser(cnt));
            }
        }
    });

    const payTotal = document.querySelector('div#paymentInfo span#cartTotal');
    payTotal.innerHTML = total.toLocaleString();
}


function numberParser(value) {
    return parseInt(value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');
}

> 참고 자료 
https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input

 

-220417