JavaScript substring() vs slice(), 두 메서드의 차이점과 사용 사례 비교

작성일 : 2024-03-23

JavaScript substring() vs slice(): 두 메서드의 차이점과 사용 사례 비교

JavaScript에서 문자열을 조작하는 것은 매우 일반적인 작업이며, 이를 위해 다양한 메서드가 제공됩니다. 그 중에서도 substring() 과 slice() 메서드는 문자열의 부분 문자열을 추출하는 데 자주 사용됩니다. 이 두 메서드는 매우 유사해 보이지만, 중요한 차이점이 존재합니다. 이번 글에서는 substring() 과 slice() 메서드의 차이점과 사용 사례를 비교하여 어떤 상황에서 어떤 메서드를 사용하는 것이 더 적합한지 알아보겠습니다.

substring() 메서드

기본 개념

substring() 메서드는 문자열의 일부를 추출하여 새로운 문자열을 반환합니다. 이 메서드는 두 개의 매개변수를 사용하여 추출할 부분의 시작과 끝 인덱스를 지정합니다.

문법


javascript
string.substring(indexStart, indexEnd);

indexStart : 추출을 시작할 인덱스. 이 인덱스는 포함됩니다.
indexEnd (선택 사항): 추출을 끝낼 인덱스. 이 인덱스는 포함되지 않습니다. 지정하지 않으면 문자열의 끝까지 추출합니다.

주요 특징

음수 인덱스 처리: substring() 메서드는 음수 인덱스를 0으로 처리합니다.
인덱스 순서 교환: indexStart 가 indexEnd 보다 큰 경우, 두 인덱스는 자동으로 교환됩니다.
범위를 벗어난 인덱스 처리: 인덱스가 문자열의 길이를 벗어나는 경우, 문자열의 끝으로 간주합니다.

사용 예제


javascript
let str = "Hello, World!";
let result = str.substring(0, 5);
console.log(result); // "Hello"

result = str.substring(7);
console.log(result); // "World!"

result = str.substring(7, 2);
console.log(result); // "ello,"

slice() 메서드

기본 개념

slice() 메서드는 배열이나 문자열의 일부를 추출하여 새로운 배열이나 문자열을 반환합니다. 이 메서드 역시 두 개의 매개변수를 사용하여 추출할 부분의 시작과 끝 인덱스를 지정합니다.

문법


javascript
string.slice(beginIndex, endIndex);

beginIndex : 추출을 시작할 인덱스. 이 인덱스는 포함됩니다.
endIndex (선택 사항): 추출을 끝낼 인덱스. 이 인덱스는 포함되지 않습니다. 지정하지 않으면 문자열의 끝까지 추출합니다.

주요 특징

음수 인덱스 처리: slice() 메서드는 음수 인덱스를 문자열의 끝에서부터의 인덱스로 처리합니다.
인덱스 순서 유지: beginIndex 가 endIndex 보다 큰 경우, 빈 문자열을 반환합니다.
범위를 벗어난 인덱스 처리: 인덱스가 문자열의 길이를 벗어나는 경우, 문자열의 끝으로 간주합니다.

사용 예제


javascript
let str = "Hello, World!";
let result = str.slice(0, 5);
console.log(result); // "Hello"

result = str.slice(7);
console.log(result); // "World!"

result = str.slice(-6, -1);
console.log(result); // "World"

substring() vs slice() : 주요 차이점

음수 인덱스 처리

substring() : 음수 인덱스를 0으로 처리합니다.
slice() : 음수 인덱스를 문자열의 끝에서부터의 인덱스로 처리합니다.

인덱스 순서

substring() : indexStart 가 indexEnd 보다 큰 경우, 두 인덱스를 자동으로 교환합니다.
slice() : beginIndex 가 endIndex 보다 큰 경우, 빈 문자열을 반환합니다.

범위를 벗어난 인덱스

두 메서드 모두 범위를 벗어난 인덱스를 문자열의 끝으로 간주합니다.

사용 사례 비교

특정 문자열 추출

substring() 과 slice() 모두 특정 부분 문자열을 추출하는 데 사용할 수 있지만, 음수 인덱스를 사용해야 할 때는 slice() 가 더 적합합니다.

예제: 도메인 추출


javascript
let url = "https://www.example.com/path?query=123";

// Using substring()
let start = url.indexOf("//") + 2;
let end = url.indexOf("/", start);
let domain = url.substring(start, end);
console.log(domain); // "www.example.com"

// Using slice()
domain = url.slice(start, end);
console.log(domain); // "www.example.com"

문자열 끝 부분 추출

문자열의 끝 부분을 추출할 때, 음수 인덱스를 사용하는 slice() 가 더 직관적입니다.

예제: 파일 확장자 추출


javascript
let filename = "document.pdf";

// Using substring()
let extension = filename.substring(filename.lastIndexOf("."));
console.log(extension); // ".pdf"

// Using slice()
extension = filename.slice(filename.lastIndexOf("."));
console.log(extension); // ".pdf"

문자열 뒤집기

음수 인덱스를 사용하여 문자열의 특정 부분을 쉽게 추출할 수 있는 slice() 를 사용하면 문자열 뒤집기 작업이 더 간단해집니다.

예제: 문자열 뒤집기


javascript
let str = "abcdef";

// Using substring()
let reversed = str.split("").reverse().join("");
console.log(reversed); // "fedcba"

// Using slice()
reversed = str.split("").reverse().join("");
console.log(reversed); // "fedcba"

결론

JavaScript의 substring() 과 slice() 메서드는 문자열의 부분 문자열을 추출하는 데 매우 유용합니다. 두 메서드는 유사한 기능을 제공하지만, 음수 인덱스 처리 방식과 인덱스 순서 처리 방식에서 중요한 차이점이 있습니다.

음수 인덱스를 사용해야 하는 경우 slice() 메서드가 더 적합합니다.
인덱스 순서가 혼동될 수 있는 상황에서는 substring() 메서드가 더 유용할 수 있습니다.

이러한 차이점을 이해하고, 상황에 맞게 적절한 메서드를 선택하여 사용할 수 있도록 하는 것이 중요합니다. 이를 통해 문자열 조작 작업을 더욱 효율적으로 수행할 수 있을 것입니다.