JavaScript - substring()과 slice()의 차이점

JavaScript에서 substring()과 slice()는 문자열을 자를 때 사용하는 함수이며 사용 방법이 동일합니다. 하지만 약간의 차이점이 있습니다. 차이점에 대해서 알아보겠습니다.

1. Syntax

substring과 slice는 모두 start와 end Index를 인자로 받고 start를 포함하고 end를 포함하지 않는 문자열을 잘라서 리턴합니다.

str.substring(start, end)
str.slice(start, end)

예를 들어, 아래와 같이 인자로 0과 5를 전달하면 Index 0을 포함하고 5를 포함하지 않는 Index 4까지의 문자열을 잘라서 리턴합니다.

let str = 'Hello World';

let a = str.substring(0, 5)
let b = str.slice(0, 5)

console.log(a)
console.log(b)

Output:

Hello
Hello

2. 차이점 : start > end 일 때

start < end일 때는 위와 같이 동일한 문자열을 리턴하지만 start > end일 때는 결과가 다릅니다.

substring은 start > end일 때, start와 end의 위치를 바꿔서 결과를 계산합니다. 즉, substring(5, 0)은 substring(0, 5)으로 계산됩니다.

반면에 slice는 start > end일 때 빈 문자열('')을 리턴합니다.

let str = 'Hello World';

let a = str.substring(5, 0)
let b = str.slice(5, 0)

console.log('a: ' + a)
console.log('b: ' + b)

Output:

a: Hello
b:

3. 차이점 : start가 음수일 때

start가 음수 일 때 substring과 slice의 계산 결과가 달라집니다.

substring은 start가 음수일 때 0으로 변경되고, slice는 음수일 때 문자열 끝에서 앞쪽으로 음수만큼 이동된 Index로 계산됩니다.

예를 들어 substring(-8, 10)는 substring(0, 10)로 계산되고, slice(-8, 10)는 slice(3, 10)로 계산됩니다.

let str = 'Hello World';

let a = str.substring(-8, 10)
let b = str.slice(-8, 10)
let c = str.substring(-8)
let d = str.slice(-8)

console.log(a)
console.log(b)
console.log(c)
console.log(d)

Output:

Hello Worl
lo Worl
Hello World
lo World

4. 차이점 : end가 음수일 때

substring은 end가 음수일 때 0으로 계산되며, slice는 문자열 끝에서 앞쪽으로 이동하여 위치를 찾습니다.

아래 예제를 보시면 차이점에 대해서 확인할 수 있습니다.

let str = 'Hello World';

let a = str.substring(0, -2)
let b = str.slice(0, -2)

console.log('a: ' + a)
console.log('b: ' + b)

Output:

a:
b: Hello Wor

아래 처럼 start와 end가 모두 음수가 될 수 있으며, slice의 경우 start > end라면 빈 문자열이 아닌 문자열이 리턴됩니다. substring은 둘다 음수라서 그냥 빈 문자열이 리턴되구요.

let str = 'Hello World';

let a = str.substring(-5, -1)
let b = str.slice(-5, -1)
let c = str.slice(-5, -6)

console.log('a: ' + a)
console.log('b: ' + b)
console.log('c: ' + c)

결과를 보면 slice(-5, -1)만 문자열을 리턴하고, 나머지는 빈 문자열을 리턴하였습니다.

a:
b: Worl
c:

References

• stackoverflow - Why two different methods slice() & substring()?