본문 바로가기
Language/web

[JavaScript] 문자열 자르기 (slice, substring, substr)

by 애기 개발자 2022. 2. 3.
반응형

자바스크립트에서는 문자열을 자르는 방법엔 3가지가 있다.

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

순서대로 보자

 

글을 보기 전에 공통적으로 쓰일 예시 하나 보고 가겠다.

 

예시로 쓸 문장과 각 인덱스 번호다.

1. slice( )

slice( )를 정의하자면

 

slice( '시작위치', '종료위치') 혹은 slice( '시작위치' )로 사용할 수 있다.

 

var str = '가나다라마바사';

var result1 = str.slice(1);
//나다라마바사

var result2 = str.slice(4);
//마바사

var reulst3 = str.slice(1, 5);
//나다라마

var result4 = str.slice(-7);
//가나다라마바사

var result5 = str.slice(-5, -2);
//다라마

var result6 = str.slice(-4, 5);
//라마

var result 7 = str.slice(2, -1);
//다라마바

 

2. substring( )

 

substring( )은 slice와 비슷하지만 하나의 차이점은 '음수 인덱스를 받지 않는다'

 

사용법은 비슷하다.

 

substring( '시작위치', '종료위치') 혹은 substring( '시작위치' )로 사용할 수 있다.

 

var str = '가나다라마바사'

var result1 = str.substring(2)
//다라마바사

var result2 = str.substring(3, 6)
//라마바

var result3 = str.substring(-3) //str.substring(0)
//가나다라마바사

var result4 = str.substring(-4, 6) //str.substring(0, 6)
//가나다라마바

var result5 = str.substring(2, -3) //str.substring(0, 2)
//가나

사용법은 slice( )와 비슷하다고 했으나 위를 보면 인덱스에 음수를 넣어도 출력이 되는 것을 확인할 수 있다.

 

하지만 자세히 보면

 

음수 인덱스를 위치와 상관없이 모두 '0'으로 바꿔서 처리하는 것을 확인할 수 있다.

 

 

3. substr( )

substr( )은 위와 방법이 살짝 다르다.

 

두 번째 변수가 '종료 위치'가 아닌 '길이'라는 것이다.

 

substr( '시작위치', '길이') 혹은 substr( '시작위치' )로 사용할 수 있다.

 

var str = '가나다라마바사'

var result1 = str.substr(1)
//나다라마바사

var result2 = str.substr(2, 4)
//다라마바

var result3 = str.substr(3, 4)
//라마바사

var result4 = str.substr(3)
//라마바사

var result5 = str.substr(-2)
//바사

var result6 = str.substr(-5, 4)
//다라마바

 

substr( ) 은 음수 인덱스가 사용 가능하며, 두 번째 인자는 무조건 '길이'로 해당된다.

 

var str = '가나다라마바사'

var result1 = str.substr(1, -4)
//결과값 없음

var result2 = str.substr(1, 200)
//나다라마바사

위와 같이 '길이' 위치에 음수가 들어가면 빈 값이 출력되며

 

아무리 큰 값을 넣어도 해당 문자열의 끝까지 읽는 것을 알 수 있다.

반응형

댓글