웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

[JavaScript] 변수에서 특정문자 기준 자르기(나누기), split()

Last Modified : 2018-09-10 / Created : 2014-01-25
146,629
View Count

특정문자를 기준으로하여 문자열을 나누거나 구분하는 방법이 필요할 때가 있습니다. 이때 자바스크립트에서는 어떻게해야할까요? 이 경우 사용가능한 방법으로 바로 split() 함수를 사용하는 방법입니다.



# 자바스크립트 문자열을 배열로 변환하기, split()

split()은 하나의 텍스트를 기준이 되는 텍스트(예를들어 콤마 등등)로 분리하여 여러개의 값을 가진 배열로 변환 후 반환하여 줍니다. 매우 자주 사용되므로 꼭 알아두어야 할 필수 함수 중 하나입니다. 그럼 좀 더 자세히 알아보겠습니다. 아래는 사용방법입니다.

변수명.split('구분의 기준이 되는 문자열')


사용방법은 간단합니다. split()의 인자로 기준이 될 구분 문자만 전달하면 해당 문자열을 기준으로 각각 배열값으로 저장하게 됩니다.


! 언제 필요한가

어떤 경우에 이 방법이 필요할까요? 다양한 경우가 있겠지만 예를들면... 아래의 경우에 많이 사용됩니다.

  • 전화번호, 주민등록번호 등의 숫자에서 - 기분으로 구분하기
  • 하나의 문장에서 스페이스바를 기준으로 단어를 분리하기
  • ip 주소를 .로 구분하여 나타내는 경우

위와 같은 경우가 사용할 수 있는 경우입니다. 그럼 아래는 간단하게 알아보는 예제 소스입니다.



# split() 함수 예제. 전화번호를 지역번호별로 구분하기

만약 다음과 같이 전화번호가 있는 경우 지역번호만 가져오려면 어떤 방법이 가장 편리할까요? - 기호를 구분자로 사용하여 split() 함수를 사용하면 간단하게 지역번호를 확인할 수 있을 것입니다... 이 때 사용할 수 있는 함수가 split() 함수입니다. 복잡한 방법의 경우 정규표현식이 많이 사용되기나 하겠지만 이 방법이 가장 구현하기 쉽고 간단한 방법입니다. 그럼 아래 예제를 참고하세요.
var beforeStr = "02-123-4567";
var afterStr = beforeStr.split('-');

// 문자를 기준으로 나누어 배열로 저장

이제  위 코드를 실행하면 어떻게 될까요? beforeStr의 텍스트가 - 기호를 기준으로 모두 배열로 나뉘어 저장하게 되며 이는 afterStr 변수에 저장됩니다. 그럼 배열을 출력해보면 아래와 같죠.
afterStr[0] => 02 ​​​​​​​
afterStr[1] => 123
afterStr[2] => 4567 ​​​​​

이처럼 간단한 방법으로 분리되는 것을 확인해 보았습니다. 한가지 더 예제를 통해 알아볼까요? 이번에는 ip주소입니다. 만약 다음과 같은 ip 주소가 있는 경우 이를 분리해 보겠습니다.



# ip 주소를 분리하는 방법, split()

ip 주소인 경우 이를 구분자 .을 기준으로 분리하는 방법입니다.

Ex) ip주소 - 123.456.789.000

이처럼 3자리의 숫자 4개로 구성된 ip 주소를 분리하여 보겠습니다. 아래의 코드를 봐주세요.
beforeStr = '123.456.789.000';
afterStr = beforeStr.split('.');

위의 실행결과 나타날 내용은 아래와 같습니다.
afterStr  = ['123', '456', '789', '000'];
afterStr[0] => '123';
afterStr[1] => '456';
afterStr[2] => '789';
afterStr[3] => '000';

매우 간단합니다.  split() 함수는 매우 자주 사용되므로 꼭 알아두시기 바랍니다.


! 참고링크

문자열을 배열로 반환하는 것이 가능하다면 배열을 다시 문자열로 반환하는 것도 가능할 것입니다. 아래 링크는 이를 가능케하는 자바스크립트의 join() 함수입니다.
https://webisfree.com/2017-05-11/자바스크립트-배열을-텍스트로-변환-바꾸기


Previous

[JavaScript] 문자 숫자 변환, parseInt()

Previous

[자바스크립트] 데이터 타입 상수란? 상수의 선언 및 특징