Web/Javascript

[JS/Str] 문자열(str)자르기 총 정리: substr( ), substring( ), slice( )

outwater 2020. 12. 27. 14:47

자바스크립트의 문자열 객체에는 문자열을 자르기 위한 여러 메소드(method)가 존재한다.

대표적으로 str.slice( ) 와 str.subtring( ) , str.substr( ) 으로 세가지 메소드는 모두 비슷하지만 조금씩 그 작동방법이 다르기에 작동의 차이를 중심으로 포스팅을 남겨보려고 한다.

 

slice( )

str.slice( from, to )

str.sliice은 시작점의 Index와 끝점의 Index를 받아 시작점 글자 부터 끝점 글자 전까지의 문자열을 추출한다. 

인자 필수 설명 미지정시
from 필수 자르고 싶은 문자열의
시작점의 Index		  
to 옵션 자르고 싶은 문자열의 
끝점의 Index		 문자열 끝까지 출력

사용사례

const str = 'Merry Christmas'
str.slice(0, 5)  // 'Merry'      str[0]부터 str[5]전 까지
str.slice(6, 15) // 'Christmas'  str[6]부터 str[15]전 까지

*끝점의 인덱스를 주지 않았을 때는 시작점부터 문자열 끝까지 출력
str.silce(0)    // 'Merry Christmas'
str.slice(6)    // 'Christmas'

*인덱스가 음수라면 문자열 제일 끝 부터 인덱스 시작 함(str.length -(index) 과 같음)
str.slice(0, -3) // 'Merry Christ'
str.slice(0, str.length-3) // 'Merry Christ' *str.length = 15

substring( )

str.substring( from, to )

str.substring 역시 slice와 같이 시작점의 Index와 끝점의 Index를 받아시작점 글자 부터 끝점 글자 전까지의 문자열을 추출한다. 

인자 필수 설명 미지정시
from 필수 자르고 싶은 문자열의 
시작점의 Index number		  
to 옵션 자르고 싶은 문자열의 
끝점의 Index number		 문자열끝까지 출력

사용사례

const str = 'Merry Christmas'
str.substring(0, 5)  // 'Merry'      str[0] 부터 str[5]전 까지
str.substring(6, 15) // 'Christmas'  str[6] 부터 str[15]전 까지

*끝점의 인덱스를 주지 않았을 때는 시작점부터 문자열 끝까지 출력
str.substring(0)    // 'Merry Christmas'
str.substring(6)    // 'Christmas'

*인덱스가 음수라면 0 으로 취급 ( <-> slice() 에서는 끝에서 부터 index)
str.slice(0, -3) // 'undefined'  *str[0]부터 str[0]전까지이므로

substr( )

str.substr( start, length )

substr( ) 의 가장 큰 차이점은 두번째 인자가 끝점의 Index가 아니라 '시작점부터 출력할 문자열의 길이' 라는 점이다.
str.substr 은 시작점의 Index와 출력한 문자의 길이를 받아 시작점 글자 부터 입력 길이만큼의 문자열을 추출한다. 

인자 필수 설명 미지정시
start 필수 자르고 싶은 문자열의 
시작점의 Index number		 -
length 옵션 자르고 싶은 문자열의 
끝점의 Index number		 문자열 끝까지 출력

사용사례

const str = 'Merry Christmas'
str.substr(0, 5)  // 'Merry'  str[0]부터 5글자
str.substr(6, 5) // 'Christ'  str[6]부터 5글자

*끝점의 인덱스를 주지 않았을 때는 시작점부터 문자열 끝까지 출력
str.substr(0)    // 'Merry Christmas'
str.substr(6)    // 'Christmas'

*인덱스가 음수라면 문자열 제일 끝 부터 인덱스 시작 함(str.length -(index) 과 같음)
str.substr(-9) // 'Christ'
str.substr(str.length-9) // 'Christ' *str.length = 15

 

차이점

str.slice( )  VS  str.substring( )

slice( ) 와 substring( )은 모두 시작점부터 끝점까지의 문자열을 추출하지만, 2가지의 차이점이  존재하는데,
첫번째는 음수 index의 취급방법이다.

slice( )는 음수 index 를 인자로 받으면 문자열 끝에서 부터 계산한다.(혹은 str.length -index로 계산)
하지만 substring( )은 음수 index를 0 으로 처리한다.


두번째는 시작점index > 끝점 index 경우 slice()는 빈문자열을 반환하지만
substirng() 은 자동으로 작은숫자를 시작점으로 큰숫자를 끝점으로 바꾸어 출력한다.

*차이점1) 음수index의 처리방식
const str = 'Merry Christmas'

str.slice(-9, 15)     //'Christmas'  str[ str.length-9 ] 부터 str[15]전 까지
str.slice(-3, -1)     // 'ma'

str.substring(-9, 15) // 'Merry Christmas' str[0]부터 str[15]전 까지
str.substring(-3, -1) // undefined  str[0]부터 str[0]전 까지


*차이점2) from(시작점 index)의 값이 to(끝점 index) 보다 클 경우 처리

str.slice(5, 2)       //  ''    빈문자열
str.substring(5, 2)   // 'rry' str.substrign(2, 5)로 처리

 

str.substring( )  VS  str.substr( )

substring( )과 substr( ) 의 가장 큰 차이점은 두번째 인자로 각각 끝점의 index 번호와 추출할 문자의 길이를 받는다.

 
두번째는 음수 index의 취급방법이다.

substring( )은 음수 index를 0 으로 처리하는 반면 substr( )는 slice()와 같이 문자열 끝에서 부터 계산한다.(혹은 str.length -index로 계산)

*차이점1) 두번째 인자가 의미하는 바가 다름
const str = 'Merry Christmas'
str.substring(6, 11)    // 'Chris' (from , to ) 인자를 받음 str[6]부터 str[11]전까지
str.substr(6, 5)        // 'Chris' (strat, length ) 인자를 받음 str[6]부터 5개 출력

*차이점2) 음수index의 처리방식
str.substr(-9, 5)     //'Chris'  str[ str.length-9 ] 부터 5출력 *str.length = 15

str.substring(-9, 5) // 'Merry' str[0]부터 str[5]전 까지

참고

str.split( ) 

str.split(' value' ) 은 value 인자값을 기준으로 str을 잘라내어 새로운 배열에 담아 반환하는 메소드이다.
즉 문자열이 아닌 배열이 return 된다.

const str = 'Merry Christmas';

const splitArray = str.split(" ");   // " " 빈칸을 기준으로 str을 잘라냄
splitArray // ['Merry', 'Christmas']

const str2 = 'insoo, outwater, sooveloper, insoonge';
splitArray2 = str2.split(", ");
splitArray2 // ['insoo', 'outwater', 'sooveloper', 'insoonge']

str.splice( )

splice( ) 는 문자열에서 사용할 수 있는 메소드가 아니다!!
splice( ) 는 배열을 자르는 배열 객체의 메소드이다.

const str = 'Merry Christmas'
str.splice(0, 5)   // ERROR 'str.splice is not a function'

const array = ['insoo', 'sooveloper', 'outwater', 'insoonge']
const splicedArray = array.splice(0,2) //

splicedArray  // ['insoo', 'sooveloper']    // splice( )는 추출 된 요소로 만든 배열을 리턴한다.
array         // ['outwater', 'insoonge']   // splice( )는 원 배열을 바꾼다.(immmutable 하지않음!)
                                            // array에는 splice된 값들이 빠져나간 나머지 요소만 담긴다