JavaScript String substring() Method : 자바스크립트 문자열 자르기

오늘은 자바스크립트에서 자주 사용하는 문자열 함수에 대해 알아보도록 한다.

우리는 자바스크립트를 사용하면서 문자열을 상당히 많이 다루게된다.

자주 사용되지만 할때마다 까먹는게 우리 현실이다.

매번 찾아다니기도 귀찮고 문자열 관련 함수들을 예제코드와 함께 정리해놓을테니

즐겨찾기를 추가하거나 링크를 따로 저장해서 필요할때마다 써먹도록 하자.

해당 토픽에 대한 추가적인 사항은 매번 업데이트 할 예정이다.

자바스크립트에서 문자열을 자르는 방법은 여러가지가 존재한다.

아래 함수들을 살펴보자.

설명보다 예제코드와 실행 결과를보면 어떻게 사용하는지 쉽게 알수있을것이다.

• substring() 함수

var str1 = "열코의 프로그래밍 일기";

var str2 = str1.substring(0, 2) // str2의 값은 "열코"

자르고자하는 문자열은 "열코의 프로그래밍 일기"이며 str1 이라는 이름의 변수(var)에 저장되어있다.

여기서 나는 "열코"만 자르고싶다.

이때 사용하는 함수가 substring() 함수이다. (물론 아래 다른 함수들을 사용해도 자를순있다.)

2번째 줄을 보면 str1.substring(0, 2); 가 보인다.

자르고자하는 문자열 변수에서 substring() 함수를 호출하는것이다.

substring() 함수를 호출할때에는 기본적으로 2개의 매개변수를 넘겨줘야한다.

=> 시작인덱스, 종료인덱스

(인덱스가 뭐냐고 묻는다면 그냥 번호라고 생각해라.)

위의 예제코드에서는 0과 2를 콤마(,)를 사용하여 함수를 호출했다.

참고1) 대부분의 프로그래밍 언어에서 인덱스의 시작은 1이아닌 0부터 시작한다.

문자열	열	코	의	(공백)	프	로	그	래	밍	(공백)	일	기
인덱스	0	1	2	3	4	5	6	7	8	9	10	11

종료 인덱스는 포함하지 않는다. 

따라서 인덱스 0부터 1까지만 자르게 되므로 "열코"만 잘리게 되는것이다.

"프로그래밍"을 자르고 싶다면 substring(4, 9)을 사용하면 될것이다.

그렇다면 매개변수를 1개만 주면 어떻게될까?

위의 str1변수를 아래와 같이 첫번째 매개변수만 줘보자.

str1.substring(0, ); 

str1.substring(5, ); 

위의 두 코드의 결과는 어떻게 될까? (실제로 저 코드가 출력이 되지는 않는다. 자른 문자열만 반환할 뿐)

첫번째 코드 반환 문자열 : "열코의 프로그래밍 일기"

두번째 코드 반환 문자열 : "로그래밍 일기"

두번째 매개변수를 주지않는 경우 자동으로 끝 인덱스까지 포함하여 자르는것을 알 수있다.

그렇다면 첫번째 매개변수를 생략하는 경우에는?

첫번째 매개변수를 생략하거나, 첫번째와 두번째 매개변수를 모두 생략하는 경우

다음과 같은 자바스크립트 문법 에러(Syntax Error)가 발생한다.

Uncaught SyntaxError : Unexpected token ,

에러가 뜨면 무섭다. 두번째 매개변수만 생략하는것이 가능하다.

참고2) 문자열 자체에서 "열코의 프로그래밍 일기".substring(0, 3); 이런식으로 자르는 방법도 존재한다.

• substr() 함수

substr() 함수는 substring() 함수와 비슷한 역할을 한다.

(생긴것도 비슷하지 않은가?)

사용방법도 똑같다. 결과값만 다를뿐.

var str1 = "이번엔 다른 문자열로 좀 해보자";

var str2 = str1.substr(0, 6);

자 이번엔 substr() 함수가 어떤 기능을 하는지 알려줄테니 출력값을 유추해보자.

substr() 함수의 매개변수로 0과 6을 주었다.

첫번째 매개변수인 0은 위 substring() 함수와 동일하게 "시작인덱스"를 뜻한다.

두번째 매개변수인 6은 위 substring() 함수와 조금 다른 "자를 문자열 길이"를 뜻한다.

자 그렇다면 결과 값은 어떻게 될까??

여러분들은 나보다 똑똑하니 이해력이 좋을거라 생각된다.

(아니라면 위로 올라가서 다시한번 정독하자. 열코 블로그를 구독하고 모든 강좌글들을 정독해도 좋다.)

결과는 "이번엔 다른"이다.

시작인덱스가 0이므로 완전 처음부터 시작한다.

길이가 6이므로 6자리만큼만 자른다.(공백도 인덱스 셀때 포함시켜라)

또한 substring() 함수와 마찬가지로 두번째 인덱스를 생략하면 문자열 끝까지 포함해서 자르는것이고

첫번째 매개변수를 생략하거나 둘 다 생략했을 경우 문법 오류가 발생한다.

참고3) substring()이나 substr() 함수나 둘 중하나만 알고있어도 서로의 기능은 하나의 함수로

구현이 가능하다. 둘 다 사용해보고 자신한테 맞는 하나만 알고있으면 된다.

• split() 함수

split() 함수는 매우 다양하게 사용되며 중요한 함수이니 꼭 기억하기 바란다.

var str1 = "열코의 프로그래밍 일기";

자 위와 같은 문자열이 있다고 한다. (문자열이 너무 식상하지만 그냥 봐주자.)

이런 경우가 생길 수도 있다.

"저 문자열을 공백을 기준으로 자르고 싶어"

본인은 프로그래밍하면서 그런 경우는 생기지 않았다고?

그렇게 생각한다면 split() 함수는 따로 보지않고 나가도 괜찮다.

(하지만 다시 들어온다고 장담하지.)

위의 문자열을 공백을 기준으로 자르는 방법은 아래와 같다.

var str2 = str1.split(" ");

자르고자하는 문자열(또는 변수)에서 매개변수로 자르는 기준이 되는 문자(또는 문자열)를 입력하여 호출.

위의 문자열은 아래와 같이 잘리게 된다.(잔인)

str2[0] = "열코의";

str2[1] = "프로그래밍";

str2[2] = "일기";

인덱스는 0부터 시작하여 자른 문자열 개수만큼의 배열이 생성된다.

실제로 split() 함수는 아주 다양한곳에서 유용하게 사용되는 함수이다.

지금 당장 사용되지 않아도 함수(또는 내 블로그)를 알고 있다면 문자열을 다룰 때

언젠가는 한번 사용하게 될 함수라고 단언할 수 있다.

혹시 위 강좌글을 보면서 더 궁금한 점이나 질문 또는 오타가 발생했다면 댓글로 남겨주기바란다.

참고로 비회원이 비밀댓글로 달고 나중에 확인못하는 경우가 대다수니 

다른 프린이(프로그래밍 어린이)들도 볼 수 있게 공개 댓글로 달아주는 센스를 발휘하자.

또한 강좌글 요청은 대환영이다. (제발 요청해줘)