[JS] 천단위로 콤마 넣기와 다시 숫자로 만들기 (replace / Intl)

인풋창에 금액을 입력할 때 보통 천의 단위마다 콤마를 넣어주는 게 일반적이고 보기도 편하다.

 

목적

1/ 금액을 넣을 경우 숫자만 들어가게 하자

2/ 숫자를 넣을 때 천의 자리마다 콤마를 자동으로 넣어주자.

 

해결 과정

정규식에 익숙하지 않은 나.. 찾아서 아래와 같이 작성.. 

1/ replace를 통해 숫자가 아닌 것들은 '' 공백으로 처리

2/ 두번째 정규식은 솔직히 이해가 안가서 공부를 해야할듯. 뭔가 3자리마다 콤마 로 대체해주는 느낌 ^^ 

 

(vue 관련 여담) 근데 해당 기능을 수정할때쯤은 vue 공부를 하기 전이라 watch를 썼는데.. 텍스트 형식을 포맷팅해서 렌더해야할 경우엔 아래 코드처럼 watch를 쓰는 것보단 computed가 낫다. 그리고 vue2에선 filters 라는 텍스트 포맷팅 전용 속성도 있었으나 vue3부턴 deprecated 되어서 요즘은 이런 포맷팅을 할때 인자를 넣어야하면 methods속성에다가 포맷팅하는 함수를 작성하거나, 전역으로 filters를 설정해주려면 포맷팅 전용 함수파일을 만들어(filter.js등..) 이를 import해와서 methods에 붙이는 방식이라고 한다...

watch: {
    amount: function () {
      let onlyNumber = this.amount.replace(/[^0-9]/g, ""); // 숫자외엔 입력 금지
      return (this.amount = onlyNumber.replace(/\B(?=(\d{3})+(?!\d))/g, ",")); // 천단위로 콤마 넣어주기
    },
  },

 

근데 문제는 input type이 'text'이고, 애초에 amount의 초기값도 '' 빈 스트링으로 잡아두었다.

이렇게 되면 1000을 입력시 '1,000'이 되고 이대로 생각없이 parseInt('1,000') 하면? 0 세개를 다 날리고 1이 된 채로 서버에 날아간다.

1000불 넘기려다 1불 넘기게 된다 ㅎㅎ

 

그래서 replace 메소드를 위에서 이렇게 써놓고 그걸 까먹고 ^^ split과 join을 짬뽕시켜 숫자로 만들었다. 

let validNum = parseInt(this.amount.split(',').join(''));

근데 이렇게 말고 replace를 쓰면 깔끔하다는 걸 깨닫고 아래와 같은 멍청한 짓을 해버렸다..

let validNum = parseInt(this.amount.replace(',',''));

 

replace는 특정 정규식을 쓰지 않고 이렇게 하면 딱 첫번째로 발견한 것만 두번째 인자로 바꿔준다 ^^!

만약 $10,000,000 라면 10000,000 으로 바꿔준다 ㅋ 이러면 parseInt를  통해 천만불을 만불로 바꿔버린다 하하

 

정규식 g를 써서 모든 콤마를 없애주자!

let validNum = parseInt(this.amount.replace(/,/g,''));

 

좀 더 replace를 연습하자면 아래와 같다

정규식에서 i가 붙으면 대소문자 구분 없이 banana 건, BANANA건 스펠링만 맞다면 yeah 로 바꿔준단 뜻!

let a = '10,000,000';
let b = a.replace(',', '');
let c = a.replace(/,/g, '');
let d = a.split(',').join('');

console.log(a, parseInt(a)) // 10,000,000 10
console.log(b, parseInt(b)) // 10000,000 10000
console.log(c, parseInt(c)) // 10000000 10000000
console.log(d, parseInt(d)) // 10000000 10000000

let str = "apple, banana, cookie, banana, Donut, Banana, BaNana";
let str2 = str.replace('banana', 'yeah')
let str3 = str.replace(/banana/g, 'yeah')
let str4 = str.replace(/banana/gi, 'yeah')

console.log(str2) // apple, yeah, cookie, banana, Donut, Banana, BaNana
console.log(str3) // apple, yeah, cookie, yeah, Donut, Banana, BaNana
console.log(str4) // apple, yeah, cookie, yeah, Donut, yeah, yeah

 

 

// 추가 내용!

숫자 천의 단위마다 콤마를 찍어주는 아주 깔끔한 방법을 발견했다. 자바스크립트 내장 객체인 Intl을 쓰는 방법이다.

// 천단위로 쪼개줌
new Intl.NumberFormat().format(숫자);
// 소숫점 자리수까지 정하는 옵션 추가 시
new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(숫자);

화면에 렌더할때 굳이 정규식을 써서 바꾸지 않아도 자동으로 천의 자리마다 콤마를 찍어준다.

다만, 타입은 여전히 string이기 때문에 parseInt를 적용할 경우 첫 콤마 뒷자리가 다 날라가니 이건 replace(/,/g, '') 로 다시 콤마를 없앤 후 숫자로 변환해줘야한다. 

let num = '0012345678910.123454'

let localBrowserNum = new Intl.NumberFormat().format(num);
let decimal = new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(num);

console.log(localBrowserNum, typeof localBrowserNum, parseInt(localBrowserNum)); 
// 12,345,678,910.123 string 12
console.log(decimal, typeof decimal, parseInt(decimal)) 
// 12,345,678,910.12 string 12