[Javascript] substr(), substring(), slice() 비교

string.slice(start, end)

Javascript에서 substr(), substring(), slice() 함수는 모두 문자열을 잘라주는 역할을 합니다.

 

이 함수들은 모두 비슷하지만, 조금씩 작동 방법이 다릅니다.

이 세가지 함수를 비교해 보도록 하겠습니다.

 

 

substr() 

string.substr(start, length)

substr() 함수는, 파라미터로 입력받은 start index부터 length 길이만큼 string을 잘라내어 반환하는 함수입니다..

첫번째 글자의 index는 0에서 시작합니다.

See the Pen 첫번째-마지막문자 by anna (@hianna) on CodePen.

위 예제에서 첫번째 글자 하나를 가져오기 위해서 start=0, length=1을 파라미터로 전달하였습니다.

 

 

substring()

string.substring(start, end)

substring()함수는 substr() 함수와 같이 특정 문자열을 잘라내여 반환합니다.

substr() 함수와 다른 점은 매개변수로 잘라내고 싶은 문자열의 start index와 last index를 전달한다는 것입니다.

substr() 함수와 마찬가지로 index는 0부터 시작합니다.

See the Pen 첫번째-마지막문자 by anna (@hianna) on CodePen.

 

위 예제에서 첫번째 글자 하나를 가져오기 위해 start=0, end=1의 값을 파라미터로 전달하는 것을 볼 수 있습니다.

 

 

slice()

slice() 함수는 substring() 함수와 사용법이 같습니다.

substring() 함수와 마찬가지로 파라미터로 자를 문자열의 start index와 end index를 전달합니다.

See the Pen 첫번째-마지막문자 by anna (@hianna) on CodePen.

 

위 예제만 본다면 slice() 함수는 substring() 함수와 완벽하게 동일하게 작용합니다.

 

 

substring() vs slice()

그렇다면 두 함수의 차이점은 무엇일까요?

 

start > end 일 경우 처리

See the Pen substring vs slice 1 by anna (@hianna) on CodePen.

 

파라미터로 전달되는 start > end 일 경우 두 함수의 처리가 다릅니다.

 

start > end 인 경우,

 

substring() : 

start 값과 end 값을 바꾸어서 처리합니다.

위 예제에서 substring(1, 0)은 실제로는 substring(0, 1)로 처리되어 string의 첫번째 글자 하나를 리턴합니다.

 

slice() :

그냥 비어있는 string, 즉 ""을 리턴합니다.

 

start 또는 end 값이 음수인 경우

See the Pen substring vs slice 2 by anna (@hianna) on CodePen.

 

slice() :

string의 가장 뒤에서 음수의 절대값만큼 내려온 index로 취급합니다.

slice(-2, 6) 예제의 경우 start값이 -2로 음수입니다.

이 경우 string의 뒤에서 2번째자리를 start값으로 취급하여 계산하게 됩니다.

즉, '안녕하세요?' string의 뒤에서 2번째 자리 글자는 '요'입니다.

내부적으로 slice(-2, 6)의 start 매개변수의 값은 '요'의 index인 '4'값으로 취급되어

slice(4, 6)으로 계산되게 됩니다.

 

start값이 음수인 경우와 마찬가지로, end값이 음수인 경우에도

end값은 string의 가장 뒤에서 음수의 절대값만큼 내려온 index로 취급합니다.

위 예제에서 slice(0, -2)의 경우

뒤에서 2번째 자리 글자는 '요'이고, '요'의 index는 4이므로

내부적으로는 slice(0, 4)로 처리되게 됩니다.

 

substring() : 

start값이 음수인 경우, start값은 0으로 취급됩니다.

위 예제에서 substring(-2, 6)의 start값은 0으로 취급되어,

내부적으로는 substring(0, 6)으로 계산되게 됩니다.

end값이 음수인 경우에도, start값과 마찬가지로 end값은 0으로 취급됩니다.

 

slice() : start 또는 end값이 음수이고, 음수의 절대값이 전체 string 길이보다 클때

See the Pen substring vs slice 3 by anna (@hianna) on CodePen.

 

위에서 slice() 함수의 파라미터로 음수값이 전달되면, 

string의 가장 뒤에서부터 음수의 절대값만큼 내려온 index로 취급된다고 하였습니다.

그렇다면, string의 길이보다 파라미터로 전달된 음수의 절대값이 더 크다면 어떻게 될까요?

 

이 경우, 음수는 단순히 0으로 처리됩니다.

 

위 예제와 같이 slice(-10, 6)의 -10의 절대값은 string의 길이인 6보다 크므로

내부적으로는 slice(0, 6)과 같이 처리됩니다.

slice(0, -10) 예제도 마찬가지입니다.

이는 내부적으로 slice(0, 0)으로 처리됩니다.

 

 

지금까지 substr(), substring(), slice() 함수의 차이점을 살펴보았습니다.

이름도 비슷하고, 기능도 비슷해서 더 어렵고, 헷갈리는 것 같습니다.

그럴수록, 차이점을 정확히 알아서, 예상하지 못한 결과가 나오는 것을 막아야 할 것 같습니다.