input 창으로 숫자를 입력받아 세자리 수 마다 콤마(,)를 추가하는 함수를 만들어보자.
왜 $(document).ready()를 써야만 작동이 되는지는 아직 모르겠지만
$(document).ready()를 사용해서 페이지가 로드 됐을 때, 작동하게 한다.
방법은
1. 숫자를 받아서 문자열길이를 3으로 나눈 다음,
2. 나머지로 나온 숫자 인덱스부터 콤마(,)를 찍기 시작하면 된다.
3. 그래서 나머지 숫자만큼 문자열을 자르고
4. 콤마를 추가하고
5. 그 다음 3개 문자열을 잘라내고
6. 콤마를 추가하고
7. 그것을 반복한다.
그래서 while문으로 콤마가 찍힐 인덱스가 문자열 길이보다 커지면 끝나도록 설정한다.
input으로 문자를 받아오는 방법
은 document.getElementById("input").value
으로 받아온다.
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- jquery -->
<script src="../../js/jquery-3.5.1.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세자리 수 마다 콤마(,) 추가하기</title>
<!-- div 스타일 지정 -->
<style>
#output {
width: 100px;
height: 100px;
border: 1px solid;
padding: 220px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var $confirm = $("#confirm");
var $output = $("#output");
// '확인' 버튼을 클릭했을 때 실행되는 함수
$confirm.click(function () {
$output.text(comma(document.getElementById("input").value));
});
// 콤마(,) 찍는 함수
function comma(num) {
var len, point, str;
num = num + ""; // 입력된 숫자
point = num.length % 3; // 글자수를 3으로 나눈 나머지
len = num.length; // 숫자의 길이
str = num.substring(0, point); // 들어온 숫자를 0번 인덱스부터 글자수를 3으로 나눈 나머지까지 잘라낸다.
while (point < len) { // 콤마(,) 찍는 인덱스가 숫자 길이보다 커지면 while문을 중지한다.
if (str != "") str += ","; // 앞 번호부터 잘라낸 숫자 더미가 빈칸이 아니라면 더미에 콤마(,)를 추가한다.
str += num.substring(point, point + 3); // 그리고 잘라낸 문자열 다음부터 3개의 숫자를 잘라낸다.
point += 3; // 잘라낸 인덱스 번호에 3을 더해서 3번째마다 콤마(,)가 찍힐 수 있도록 한다.
}
return str; // 최종적으로 콤마가 찍힌 숫자를 반환한다.
}
// 출처: https://fruitdev.tistory.com/160 [과일가게 개발자]
}
);
</script>
</head>
<div>
<input type="text" id="input">
<button id="confirm">확인</button>
<div id="output">
0
</div>
</div>
</body>
</html>
<참고>
https://fruitdev.tistory.com/160
[Javascript] 숫자 3자리 단위마다 콤마(comma) 찍기
숫자형식의 값을 화면에 보여줄때에는 화폐단위처럼 숫자 3자리마다 콤마(comma)를 추가해주면 가독성이 좋아진다. 프로그래밍 언어별로 이러한것을 처리하기 위해 숫자를 특정 형식대로 포맷팅
fruitdev.tistory.com
<다른 방식으로 코드 작성>
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- jquery -->
<script src="../../js/jquery-3.5.1.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세자리 수 마다 콤마(,) 추가하기</title>
<!-- div 스타일 지정 -->
<style>
#output {
width: 100px;
height: 100px;
border: 1px solid;
padding: 220px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var $input = $("#input");
var $output = $("#output");
// '확인' 버튼을 클릭했을 때 실행되는 함수
$("#confirm").click(function () {
var value = $input.val();
var result = conversion(value);
$output.html("<p>" + value + "==>" + result + "</p>");
});
function conversion(value){
if(value.length <= 3){
return value;
}
// 3 단어씩 자를 반복 횟수 구하기
var count = Math.floor((value.length-1)/3);
var newStr = "";
for(var i = 0; i < count; i++){
var length = value.length;
var strCut = value.substring(length-3, length);
newStr = "," + strCut + newStr;
value = value.slice(0, length-3);
}
newStr = value + newStr;
return newStr;
}
}
);
</script>
</head>
<div>
<input type="text" id="input">
<button id="confirm">확인</button>
<div id="output">
0
</div>
</div>
</body>
</html>728x90
반응형
'HTML > Javascript 기초' 카테고리의 다른 글
| [Javascript/jQuery] 해당 스타일 읽어오기(feat. 자바스크립트, jQuery) (0) | 2020.08.04 |
|---|---|
| [Javascript] 자바스크립트 date 클래스 사용하기 (0) | 2020.07.31 |
| [Javascript] string 기초 배워보기 (0) | 2020.07.31 |
| [Javascript] Math 이용해서 실습 (0) | 2020.07.31 |
| [Javascript] 자바스크립트 수학(Math) 사용해보기 (0) | 2020.07.31 |
