자바스크립트 substring() 메서드 사용법: 부분 문자열 추출 완벽 가이드

자바스크립트의 substring() 메서드는 두 인덱스 위치 사이의 문자 범위를 추출합니다. 끝 인덱스를 생략하면 시작 지점부터 문자열 끝까지의 모든 문자를 손쉽게 가져올 수 있습니다.

부분 문자열(substring)이란 더 큰 문자열의 일부를 의미합니다. 개발자들은 문자열에서 필요한 특정 데이터만 골라내기 위해 부분 문자열을 자주 활용합니다.

예를 들어, 사용자의 생년월일에서 연도, 월, 일을 세 개의 변수로 나누어 저장할 수 있습니다. 이렇게 하면 날짜 전체를 하나의 변수로 관리하는 대신 각 값을 개별적으로 다룰 수 있죠.

또는 사용자 이름에서 첫 두 글자만 잘라내야 하는 경우에도 유용합니다. 이번 글에서는 자바스크립트에서 substring을 활용하는 다양한 방법을 예제와 함께 살펴보겠습니다.

자바스크립트 substring() 메서드 기본 사용법

substring() 메서드는 두 인덱스 값 사이에 있는 문자열의 일부를 추출합니다. 두 번째 인덱스 값을 지정하지 않으면, 해당 인덱스 이후의 모든 문자를 반환합니다.

substring() 메서드는 두 개의 인수를 받습니다.

메서드의 기본 문법은 다음과 같습니다.

"test".substring(start, end);

substring() 메서드는 문자열 뒤에 붙여서 사용하며, start 매개변수만 필수로 전달하면 됩니다.

고양이 이름이 담긴 문자열이 있다고 가정해 보겠습니다. 이름의 첫 두 글자를 제거하고 남은 부분을 확인하고 싶다면 substring() 메서드를 사용하면 됩니다.

const catName = "Pickles";
const newCatName = catName.substring(2);
console.log(newCatName);

첫 번째 줄에서 catName이라는 변수를 선언하고 "Pickles"라는 값을 할당했습니다. 그다음, catName 변수에서 부분 문자열을 추출해 새로운 변수에 담습니다.

substring() 메서드에 2를 매개변수로 전달했기 때문에, 인덱스 2 이후의 모든 글자가 반환됩니다. 실행 결과는 다음과 같습니다.

ckles

인덱스 2 이후에 등장하는 모든 글자를 확인할 수 있습니다.

문자열의 한 지점부터 다른 지점까지 추출하려면 substring()에 두 개의 값을 전달해야 합니다. 첫 번째 인수는 시작 위치, 두 번째 인수는 종료 위치입니다.

고양이 이름의 첫 세 글자를 추출해 보겠습니다.

const catName = "Pickles";
const newCatName = catName.substring(0, 3);
console.log(newCatName);

실행 결과는 다음과 같습니다.

Pic

substring(0, 3)은 인덱스 0부터 2까지의 문자를 반환합니다. 주의할 점은 종료 인덱스 자체는 결과에 포함되지 않는다는 것입니다. 또한 문자열 인덱스는 0부터 시작하므로, 첫 번째 문자를 가져오려면 반드시 0부터 시작해야 합니다.

이번에는 문자열의 마지막 문자를 추출해 보겠습니다. substring() 메서드는 음수 인덱스를 지원하지 않습니다. 대신 length 속성으로 문자열의 길이를 구한 뒤, 이를 활용해 마지막 문자를 가져올 수 있습니다.

const catName = "Pickles";
const newCatName = catName.substring(catName.length - 1, catName.length);
console.log(newCatName);

실행 결과는 다음과 같습니다.

s

catName.length는 문자열의 길이, 즉 문자 개수를 반환합니다. 여기서 1을 빼면 마지막 문자의 인덱스가 되므로, 문자열의 맨 마지막 글자를 얻을 수 있습니다.

자바스크립트의 substring() 메서드는 두 인덱스 값 사이의 문자를 반환합니다. 끝 인덱스를 지정하지 않으면 주어진 인덱스 이후의 모든 문자를 반환합니다.

개발자들은 substring() 메서드를 활용해 문자열을 여러 조각으로 나눕니다. 문자열에서 특정 정보만 필요할 때 특히 유용하게 쓰입니다.

자바스크립트 코딩을 더 깊이 배우고 싶다면, 초보자를 위한 자바스크립트 학습 로드맵과 튜토리얼 가이드도 함께 확인해 보세요.