JavaScript substring() 메서드의 기본 사용법: substring() 메서드의 기본 문법과 사용 예제

JavaScript에서 문자열을 조작하는 것은 매우 일반적인 작업이며, 이를 위해 다양한 메서드가 제공됩니다. 그 중 하나가 substring() 메서드입니다. 이 글에서는 substring() 메서드의 기본 문법과 사용 예제를 통해 그 활용 방법을 자세히 알아보겠습니다.

substring() 메서드의 기본 개념

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

기본 문법

javascript
string.substring(indexStart, indexEnd);

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

주요 특징

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

substring() 메서드 사용 예제

기본 사용 예제

간단한 예제로 문자열의 일부를 추출해보겠습니다.

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

위 예제에서는 문자열 "Hello, World!"의 처음 다섯 문자를 추출하여 "Hello"를 반환합니다.

인덱스 순서 교환

indexStart가 indexEnd보다 큰 경우, 두 인덱스는 자동으로 교환됩니다.

javascript
let str = "JavaScript";
let result = str.substring(5, 0);
console.log(result); // "JavaS"

이 예제에서 str.substring(5, 0)은 str.substring(0, 5)와 동일하게 작동하여 "JavaS"를 반환합니다.

indexEnd 생략

indexEnd를 생략하면 문자열의 끝까지 추출합니다.

javascript
let str = "Learn JavaScript";
let result = str.substring(6);
console.log(result); // "JavaScript"

위 예제에서는 str.substring(6)이 문자열 "Learn JavaScript"에서 인덱스 6부터 끝까지 추출하여 "JavaScript"를 반환합니다.

음수 인덱스 처리

substring() 메서드는 음수 인덱스를 0으로 처리합니다.

javascript
let str = "Negative Index";
let result = str.substring(-5, 4);
console.log(result); // "Nega"

이 예제에서는 indexStart가 -5로 주어졌지만, 0으로 처리되어 인덱스 0부터 4까지 추출한 Nega를 반환합니다.

범위를 벗어난 인덱스 처리

인덱스가 문자열의 길이를 벗어나는 경우, 문자열의 끝으로 간주합니다.

javascript
let str = "Out of Range";
let result = str.substring(4, 100);
console.log(result); // " of Range"

위 예제에서 indexEnd가 문자열의 길이보다 크지만, 문자열의 끝까지 추출하여 of Range를 반환합니다.

실전 활용 예제

URL에서 도메인 추출

웹 개발 시 URL에서 특정 부분을 추출하는 작업은 매우 흔합니다. substring() 메서드를 사용하여 URL에서 도메인을 추출해보겠습니다.

javascript
let url = "https://www.example.com/path?query=123";
let start = url.indexOf("//") + 2;
let end = url.indexOf("/", start);
let domain = url.substring(start, end);
console.log(domain); // "www.example.com"

위 예제에서는 url.indexOf("//")를 사용하여 //의 위치를 찾고, 도메인의 시작 위치를 계산합니다. 이후 url.indexOf("/", start)를 사용하여 도메인의 끝 위치를 찾고, substring() 메서드를 사용하여 도메인을 추출합니다.

사용자 입력에서 특정 키워드 추출

사용자 입력에서 특정 키워드를 추출하는 것도 자주 필요한 작업 중 하나입니다.

javascript
let userInput = "Find the keyword in this sentence.";
let keyword = "keyword";
let start = userInput.indexOf(keyword);
let extractedKeyword = userInput.substring(start, start + keyword.length);
console.log(extractedKeyword); // "keyword"

이 예제에서는 userInput.indexOf(keyword)를 사용하여 키워드의 시작 위치를 찾고, substring() 메서드를 사용하여 키워드를 추출합니다.

결론

JavaScript의 substring() 메서드는 문자열의 일부를 추출하는 데 매우 유용한 도구입니다. 이 메서드는 음수 인덱스를 0으로 처리하고, 인덱스 순서를 자동으로 교환하며, 범위를 벗어난 인덱스를 문자열의 끝으로 간주하는 등 여러 특징을 가지고 있습니다. 다양한 사용 예제와 실전 활용 사례를 통해 substring() 메서드의 기본 사용법과 그 응용 방법을 살펴보았습니다.

substring() 메서드를 잘 활용하면 문자열 조작 작업을 효율적으로 처리할 수 있으며, 웹 개발 등 다양한 분야에서 그 유용성을 발휘할 수 있습니다. 이러한 기초를 바탕으로 더 복잡한 문자열 처리 작업도 능숙하게 다룰 수 있게 될 것입니다.