숫자에 하이픈 (-) 넣기

김영준·2020년 10월 15일
1
post-thumbnail

자바스크립트에서 숫자 자릿수에 맞게 하이픈을 추가하는 기능을 넣어보자!!

조건

  • 현재 회사에서는 사업자등록번호전화번호 타입 두개의 타입에 대해서 하이픈을 넣어야 했다.

어떤 기능을 사용하여 진행할 것인가 ?!

우린 substr 함수를 사용할 것이다.

코드를 보면 간단한 쓰임을 알 수 있다.

let num = "01022777337"
let parition = num.substr(0,3)

console.log(partition) // ==> "010"

substr첫번째 인자는 시작하는 index 이고, 두번째 인자는 첫번째 index 부터 몇번째 까지 보여주는지 위치이다.

우리는 위 기능을 사용해서 하이픈을 넣을 것이다.

  1. 첫번째로 사업자 등록번호일때 하이픈을 넣는 로직일 경우
  • 사업자 등록번호는 123-45-67890 형식으로 끊어줘야 한다.
1 export const numSorting = ({ type = null, num }) => {
2   let result;
3   if (type === "regnum") {
4     result = num.substr(0, 3) + "-" + num.substr(3, 2) + "-" + num.substr(5);
5     return result;
6   } 
7 };

9 numSorting({ type: "regnum", num: '1234567890' })
  • line 9 : numSorting 함수에 객체 형식으로 type 과 num 을 넣어준다.
  • line 1 : type이 없을 경우 null 이 기본값으로 들어감, num은 기본값이 없음.
  • line 4 : num.substr(0,3)123을 따로 뽑고 난 뒤, num.substr(3,2)에서 45를 분리하고, num.substr(5)에서 5번째 index 부터 끝가지 가져온다는 뜻.
  1. 두번째로 전화번호 일 때, 하이픈을 넣는 로직이다.
  • 전화번호는 여러가지 타입이 있다.
  • ex1 : 01022777337
  • ex2 : 021234567
  • ex3 : 0212345678
  • ex4 : 0311234566
  • ex5 : 03112345678
  • ex6 : 050212345678
  • 등등...
1 export const numSorting = ({ type = null, num }) => {
2   let result;
3  if (type === "regnum") {
4    // * 사업자 등록번호에 하이픈 추가
5    result = num.substr(0, 3) + "-" + num.substr(3, 2) + "-" + num.substr(5);
6    return result;
7  } else if (type === "tel") {
8      // * 숫자만 있을 경우 하이픈 추가 로직
9      if (num.substr(0, 2) === "02") {
10        // * 02(서울) 일 경우 나머지 숫자가 7자리 이면, 8자리 이면으로 로직 설정.
11        if (num.substr(2).length === 7) {
12         // *ex)023322346 ==> 02-332-2346
13          result =
14            num.substr(0, 2) + "-" + num.substr(2, 3) + "-" + num.substr(5);
15        } else if (num.substr(2).length === 8) {
16          // * ex) 0260200594 ==> 02-6020-0594
17          result =
18            num.substr(0, 2) + "-" + num.substr(2, 4) + "-" + num.substr(6);
19        }
20        return result;
21      } else {
22        // * 서울 이외 지역
23        if (num.substr(3).length === 7) {
24          // * ex) 0317329932 ==> 031-732-9923
25          result =
26            num.substr(0, 3) + "-" + num.substr(3, 3) + "-" + num.substr(6);
27        } else {
28          // * ex) 03112345678 ==> 031-1234-5678
29          // * ex) 050712345678 ==> 050-7123-45678 (인터넷 전화같은 예외 케이스일 경우)
30          result =
31            num.substr(0, 3) + "-" + num.substr(3, 4) + "-" + num.substr(7);
32        }
33        // if()
34        return result;
35      }
36  }
37 };

39 numSorting({type:'tel', num:"0212345678"})
  • line9 부터 설명하자면, 02로 시작하는 번호일 경우 02 뒷번호 개수가 7개면 3개, 4개마다 하이픈을 추가(ex:02-123-4567), 02 뒷번호 개수가 8개면 4개,4개 마다 하이픈을 추가 (ex:02-1234-5678) 한다.
  • line21 설명하면 서울 이외 (02 제외, 010,031,033 등등) 에는 앞 세자리를 제외하고 뒷 자리 개수가 7개 8개에 따라서 마찬가지로 위 처럼 하이픈을 추가한다.

추신 : 사실인터넷 전화일경우에도 하이픈을 다르게 추가해야 하지만, 회사전화에서 인터넷 전화가 없을거라 판단(?) 하고 넣지는 않았다...

이렇게 하이픈 넣는 함수를 만들었다. substr 기능을 이용해서 자리수에 따라서 string 을 잘라 사용하는 법을 배웠다.

profile
프론트엔드 개발자 김영준 입니다. 디테일함을 키우고 있습니다

0개의 댓글