자바스크립트에서 문자열을 자를 때 사용하는 substr(), substring(), slice() 3개의 함수에 차이점을 알아보자.
1. substr() 함수
string.substr(start,length)
시작위치(start)부터 해당 길이(length)만큼 문자열을 자르는 함수.
length는 생략 가능하며 생락할 경우 문자열 끝까지 자른다.
const str="나는 치킨이 좋아";
const result1=str.substr(0,2); // '나는'
const result2=str.substr(2,4); // ' 치킨이'
const result3=str.substr(2); // ' 치킨이 좋아'
result2 에 경우 2번 인덱스가 공백이기 때문에 결과값이 ' 치킨이'와 같이 앞에 공백이 있는 것을 볼 수 있다.
2.substring() 함수
string.substring(start,end)
string에서 자르고싶은 시작위치(start)부터 끝위치(end)까지 반환.
end는 생략 가능하며 생략할 경우 문자열 끝까지 자른다.
const str="나는 치킨이 좋아";
const result1=str.substring(0,2); // '나는'
const result2=str.substring(2,4); // ' 치'
const result3=str.substring(2); // ' 치킨이 좋아'result2를 보면 substr()와 다른 점을 확인할 수 있다.
substr()은 start 부터 length만큼에 길이를 자르지만
substring()은 start부터 end 인덱스에 위치만큼 자르기 때문에
(2,4)를 파라미터로 받아도 substr()은 index===2 부터 4개를 substring()은 index===2 부터 index===4에 문자를 반환한다.
substring()은 start 인덱스부터 end 인덱스 전까지 반환한다. 따라서,substring(0,1)을 할 경우 0번 인덱스에서부터 1번인덱스 이전에 문자를 반환한다. (1번 인덱스에 문자는 반환하지 않음)
const str="가나다라";
const result=str.substring(0,2); // 결과 : "가나"
// 각 단어 인덱스 가[0] 나[1] 다[2] 라[3]
3.slice() 함수
string.slice(start,end)
slice() 와 substring() 에 사용법은 같다.
const str="나는 치킨이 좋아";
const result1=str.slice(0,2); // '나는'
const result2=str.slice(2,4); // ' 치'
const result3=str.slice(2); // ' 치킨이 좋아'엥? 그러면 두 개 차이가 없나?
4.slice() , substring() 차이점
1. start > end 인 경우
let slice=str.slice(2,0); // ''
let substring=str.substring(2,0); // '나는'같은 범위를 줘도 다른 결과가 반환되는 것을 볼 수 있다.
slice() : start > end 일 경우, 빈 값("")을 반환.
substring() : start > end 일 경우, start 와 end 값을 바꾸어 처리한다.
(substring(2,0) -> substring(0,2)로 바꾸어 처리한다)
2. start , end 가 음수일 경우
let slice=str.slice(-2,8); // '좋'
let substring=str.substring(-2,8); // '나는 치킨이 좋'
let slice=str.slice(0,-2); // '나는 치킨이 '
let substring=str.substring(0,-2); // ''slice() : slice 에서 음수 값이 들어오면 음수 값을 절대값으로 바꾸어 가장 뒤에서부터 내려온 index로 취급한다.
slice(-2,8) 에서 -2 == |-2| == 2 로 취급되고
slice는 2를 str에 인덱스 뒤에서 2번째로 계산한다.
str에 길이는 9이고 slice( 9-2 ,8) 로 계산되어 slice(7,8)=='좋' 이 반환되는 것이다.
slice(0,-2) 에 경우 -2 는 뒤에서 부터 2번째 인덱스로 취급되고
slice(0,7) 과 같은 값을 갖는다.
substring() : 음수를 0으로 계산한다.
substring(-2,8) === substring(0,8)
substring(0,-2) === substring(0,0) 과 같다.
substring에 특성을 이용하여
substring(1,-2) === substring(1,0) ===substring(0,1)로 계산된다.
자바스크립트로 코딩을 하다보면 문자열을 다루는 일이 많은데 문자열을 다루는 방법은 여러가지가 있고 각각 특징이 다른 것을 알 수 있었다.
상황에 따라 알맞은 함수를 사용할 수 있게 더 깊게 알아봐야겠다...
