[JavaScript] toLocaleString()으로 변환한 문자 다시 정수형으로 변환하기

 

이번 4차 과제로 바닐라 자바스크립트로 쇼핑몰 구현하기를 하고 있다.

그 중, 장바구니 페이지에서 각 상품의 checkbox를 클릭하면 checkbox가 toggle됨과 동시에 오른쪽의 총 금액도 바뀐다.

 

일단, 금액을 표현해야 하기 때문에 Number.prototype.toLocaleString()을 사용하여 숫자형 데이터를 우리 나라의 숫자 표현방식으로 문자열로 변환했다.

 

⬇️toLocaleString 메서드 보기⬇️

Number.prototype.toLocaleString()

지정된 지역에서 사용하는 숫자의 표현방식으로 문자열로 리턴한다.

• NumberObject.toLocaleString([locales [, options]])
• Syntax
  • locales - 내가 표현하고자 하는 지역의 언어 태그를 입력한다. 생략할 경우 현지 언어 사용.
    잘못된 언어 태그를 입력할 경우 RangeError가 발생한다.

function toNumberFormatOfKor(num) {
  return num.toLocaleString('ko-KR');
};

console.log(toNumberFormatOfKor(123456.789)); // 123,456.789
console.log(toNumberFormatOfKor(NaN)); // NaN

 

 

Date.prototype.toLocaleString()

지정된 지역에서 표현하는 방식의 날짜를 문자열로 리턴한다.

• SyntaxDate에서는 다양한 옵션 사용이 가능하다.
• DateObject.toLocaleString([locales [, options]])

function toDateFormatOfKor(date) {
  return date.toLocaleString('ko-KR')
};

function toDateFormatOfUS(date) {
  return date.toLocaleString('en-US', { timeZone: 'America/New_York' })
};

const date = new Date('2023-02-21T01:00:00+09:00');
console.log(toDateFormatOfKor(date)); // 2023. 2. 21. 오전 1:00:00 
console.log(toDateFormatOfUS(date)); // 2/21/2023, 1:00:00 AM

 

 

Array.prototype.toLocaleString()

배열에 들어있는 값의 타입에 해당하는 toLocaleString() 메소드를 리턴한다. 각 요소들은 쉼표(,)에 의해 구분된다.

const arr = [10000, '문자', 2021042.10330, new Date('2023-02-21T01:00:00+09:00')];

console.log(arr.toLocaleString('ko-KR', { timeZone: 'UTC' }));
// 10,000,문자,2,021,042.103,2023.02.21. 오전 1:00:00

 

 

Object.prototype.toLocaleString()

Object가 어떠한 객체를 가지고 있느냐에 따라 toLocaleString()의 사용 방식이 달라진다.
즉, toLocaleString()은 Array, Number, Date에서만 실제 동작이 있다고 보면 됩니다. String의 경우에는 toString()을 그대로 호출한다.

const obj = new Object({
  str: '문자',
  num: 12345678.90123,
  date: new Date('2023-02-21T01:00:00+09:00'),
  toString() {
    return 
    `str: ${this.str.toLocaleString()},
     num: ${this.num.toLocaleString()},
     date: ${this.date.toLocaleString()}
    `
   }
});

console.log(obj.toLocaleString());
// str: 문자, num: 12,345,678.901, date: 2023. 2. 21. 오전 1:00:00​

 

 

근데 문제가 발생했다. 체크박스를 클릭할 때마다 기존 상품 금액 / 상품 할인 금액 / 결제 예정 금액에 금액을 추가하거나 차감해야하는데, toLocaleString() 처리한 데이터는 문자열 타입이기 때문에 두 번째 checkbox를 클릭할 때부터 해당 금액이 NaN으로 출력되었다.

 

그래서 처음에는 다음과 같은 방법을 시도해봤다.

const originPrice = 5000
const changedPrice = originPrice.toLocaleString(); // '5,000'

const changeType1 = Number(changedPrice)  // NaN
const changeType2 = changedPrice * 1 // NaN

 

Number()로 숫자형으로 변환해도 NaN, 데이터에 1을 곱해도 NaN을 반환했다.

 

그렇다면 이제 남은 방법은 단 하나...!

 

정규표현식과 replace를 사용하여 화폐 단위를 찍어주는 콤마(,)를 빈 문자열로 반환한 뒤 숫자형으로 변환하는 것!

replace 처리를 한 후에는 Number를 쓰던, * 1을 하던, parseInt를 하던 해서 숫자형으로 변환해주면 된다. 

function stringToNumber(string){
    return Number((stringNumber.replace(/,/g , ''));
}

const newPrice = stringToNumber(changedPrice);
console.log(newPrice) // 5000

 

 

잘 동작하는 것을 확인할 수 있다.

toLocaleString으로 화폐 단위로 출력했다가 다시 숫자형으로 변환해서 계산하고 다시 toLocaleString으로 출력하고.... 하는게 조금 귀찮긴 하지만..! 확실히 화폐 단위에 맞게 표시를 하니까 편의성이 올라간 느낌이다.

덕분에 쇼핑할 때마다 개발자들의 수고를 느끼며 감사한 마음으로 쇼핑할 수 있을 것 같다...ㅋㅋㅋ

 

화폐단위를 사용하는 웹 플랫폼을 구현할 때 toLocaleString과 다시 역변환해주는 함수가 많이 쓰일 것 같다! 따로 모듈화해놔야겠다 룰루~!