자바스크립트 전화번호 포맷팅: 010-1234-5678 변환 팁

자바스크립트에서 전화번호를 010-1234-5678 또는 02-1234-5678 형식으로 자동 변환하는 함수 `getCallNumFormat`은 입력된 숫자 문자열의 길이에 따라 적절한 하이픈을 삽입하여 가독성을 높입니다. 특히 11자리 휴대폰 번호는 3-4-4, 10자리 지역 번호는 3-3-4 또는 2-4-4 패턴으로 구분하여 적용합니다.

자바스크립트 전화번호 형식 자동 변환 함수

개발 환경에서 자주 사용되는 자바스크립트의 `getCallNumFormat` 함수는 다양한 형태의 전화번호 문자열을 표준 형식으로 변환하는 유용한 도구입니다. 이 함수는 입력된 전화번호가 이미 하이픈(-)이 포함된 유효한 형식인지 먼저 확인하며, 만약 그렇지 않다면 특수문자나 공백을 제거한 후 순수 숫자만 추출합니다. 이후 추출된 숫자의 길이를 기준으로 휴대폰 번호(11자리)와 지역 전화번호(10자리)를 구분하여 각각 010-XXXX-XXXX, 031-XXXX-XXXX 또는 02-XXXX-XXXX와 같은 형식으로 자동 포맷팅합니다. 실제 개발 시, 사용자 입력값이나 외부 API에서 받은 전화번호 데이터를 일관된 형식으로 통일해야 할 때 이 함수를 활용하면 사용자 경험을 크게 향상시킬 수 있습니다.

함수는 먼저 입력된 `callNum` 값이 null, undefined, 또는 빈 문자열이 아닌지 확인하는 기본적인 유효성 검사를 수행합니다. 이어서 정규 표현식 `^(\d{2}|\d{3})-(\d{3}|\d{4})-\d{4}$`를 사용하여 이미 올바른 형식의 전화번호인지 검사합니다. 만약 형식이 맞지 않으면, `replace` 메서드를 사용하여 전화번호에 포함될 수 있는 각종 특수문자(!@#$%^&*().,?:;/_{}+=-)와 공백을 모두 제거합니다. 이후, 제거된 문자열이 순수 숫자로만 구성되어 있는지 ` /^\\\d+$/ ` 정규식으로 다시 한번 확인합니다. 이 과정을 거쳐 정제된 숫자 문자열의 길이에 따라 분기 처리가 이루어집니다. 11자리인 경우 `(\\\d{3})(\\\d{4})(\\\d{4})` 패턴으로 3-4-4 형식에 하이픈을 삽입하고, 10자리인 경우 서울 지역 번호(02)인지 일반 지역 번호(031~064)인지 구분하여 각각 2-4-4 또는 3-3-4 형식으로 변환합니다. 만약 예상치 못한 길이의 문자열이거나 숫자로 변환되지 않는 경우, 콘솔에 에러 메시지를 출력하여 개발자가 문제를 인지하도록 돕습니다.

전화번호 포맷팅 시 고려사항 및 예외 처리

전화번호 포맷팅 함수를 구현할 때는 예상치 못한 입력값에 대한 예외 처리가 중요합니다. `getCallNumFormat` 함수는 `try...catch` 구문을 사용하여 함수 실행 중 발생할 수 있는 모든 오류를 포괄적으로 처리합니다. 예를 들어, 함수 로직상 발생할 수 있는 `replaceCallNum`의 길이가 예상 범위(10자리 또는 11자리)를 벗어나거나, 숫자 변환 과정에서 오류가 발생할 경우, 해당 오류를 콘솔에 기록하여 디버깅을 용이하게 합니다. 또한, 함수는 최종적으로 포맷팅된 전화번호 문자열을 반환하며, 이 과정에서 반환되는 데이터의 길이와 실제 값을 `console.warn`으로 출력하여 개발자가 최종 결과를 쉽게 확인할 수 있도록 돕습니다. 이러한 상세한 로깅과 예외 처리는 함수를 더욱 견고하고 신뢰성 있게 만들어줍니다.

[IMAGE_2]

이 함수는 반환되는 데이터의 길이를 `returnData.length`로 확인하고, 실제 변환된 전화번호 값(`returnData`)을 `console.warn`으로 출력합니다. 이는 개발 과정에서 함수가 올바르게 작동하는지 즉시 확인할 수 있도록 돕는 디버깅 기능입니다. 만약 입력값이 유효하지 않거나 예상치 못한 오류가 발생하면, 콘솔에 에러 메시지가 기록되어 문제 해결에 도움을 줍니다. 예를 들어, 숫자로 변환되지 않는 문자열이 입력되거나, 길이가 10자리 또는 11자리가 아닌 경우에 대한 오류 메시지가 출력될 수 있습니다. 이러한 상세한 로깅은 함수를 더욱 견고하게 만들고, 실제 서비스 환경에서 발생할 수 있는 다양한 예외 상황에 효과적으로 대처할 수 있도록 지원합니다.