메서드 구현
- parameter로 (변경할 값, 변경할 값이 null 일 때 보여줄 값)을 받는다
- null일 경우 두 번째 입력 값(없으면 '')을 반환한다
- 소숫점으로 정수부 (integer) 와 소수부 (decimal) 로 분리한다 (split)
- 세 자리 숫자에 한자리 숫자가 더해진 정규표현식을 정의하고,
while문으로 해당 패턴 검색결과가 없을 때까지 replace를 수행한다 ❗❗test()는 인자로 전달받은 문자열에 대해
정규표현식의 패턴을 검색하여
매칭 결과를 Boolean 값으로 반환한다 - 결과로 세 자리 단위로 콤마(,)를 찍은 문자열을 반환한다👌
테스트 코드
난수값을 가지는 버튼 클릭 시 포맷팅을 반복👀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>seunghwan</title>
</head>
<body>
<button id="addCommaBtn"></button>
</body>
</html>
<script>
//================================================================
// 숫자값에 세자리 콤마(,) 추가하는 메서드
const addComma = (value, defaultStr = '') => {
// null 체크, 값이 없으면 두번째 parameter 값을 반환 (default 값 : '')
if(value == null || value.length == 0 || value == undefined) {
return defaultStr;
}
let integerAndDecimal = value.split('.'); // 소숫점 . 을 기점으로 나눠준다
let integer = integerAndDecimal[0]; // 정수부
let decimal = integerAndDecimal.length > 1 ? '.' + integerAndDecimal[1] : ''; // 소수부가 있을 때 .xxx형식으로 표현, 없으면 공백
let rgx = /(\d+)(\d{3})/; // 세자리 숫자에 한자리 숫자가 더해진 정규표현식을 정의
while (rgx.test(integer)) { // test() : 정규 표현식 패턴을 검색하여 매칭결과를 Boolean으로 반환
integer = integer.replace(rgx, '$1' + ',' + '$2'); // 세자리마다 콤마를 추가한다
}
// let result = integer+decimal; // 소숫점이 필요하다면 붙여주면 된다
let result = integer; // 정수값만을 반환
return result ;
}
//================================================================
//================================================================
// 버튼으로 테스트하기
let reloadYN = false; // 리로딩 여부
// 버튼 이벤트
const onClick = (e) => {
if (reloadYN) {
location.reload();
}
reloadYN = true;
let val = e.target.innerText;
let val_add_comma = addComma(val);
console.log("=========================");
console.log("변경 전 : ",val);
console.log("변경 후 : ",val_add_comma);
console.log("=========================");
e.target.innerText = val_add_comma;
}
let bnf = document.querySelector('#addCommaBtn');
bnf.innerText = Math.random()*100000000000;
bnf.addEventListener("click",onClick);
//================================================================
</script>
소소한 개발일지💻