String.prototype.substring() 사용법

substring() 함수는
문자열의 일부분을 추출합니다.
문자열을 인수로 전달된 시작 인덱스부터 종료 인덱스 전까지 추출해서 문자열로 반환하는 함수입니다.

주의하세요
종료 인덱스는 추출하지 않습니다. 바로 전까지만 추출합니다.

  • 이 과정에서 원본 문자열은 바뀌지 않습니다.
  • 인수로 전달된 시작하는 인덱스가 종료 인덱스보다 크면 마치 두 인덱스가 바뀐 듯 함수가 작동합니다.
JavaScript 
const str = "codingEverybody";

console.log(str.substring(0, 6)); // 출력: "coding"
console.log(str.substring(6, 11)); // 출력: "Every"
console.log(str.substring(6)); // 출력: "Everybody"

/* 시작하는 인덱스가 종료 인덱스보다 크면
   마치 두 인덱스가 바뀐 듯 함수가 작동 */
console.log(str.substring(11, 6)); // 출력: "Every"

/* 👇 원본 문자열은 바뀌지 않습니다. */
console.log(str); // 출력: "codingEverybody"

substring() 함수의 형식은 다음과 같습니다.

구문

JavaScript 
str.substring(indexStart[, indexEnd])

str: substring() 함수를 적용할 원본 문자열입니다.

매개변수

substring() 함수의 매개변수
indexStart 추출을 시작할 부분 문자열의 시작 인덱스를 나타내는 정수 값입니다. 이 인덱스에 해당하는 문자를 포함하여 추출됩니다.
indexEnd 옵션. 추출을 종료할 부분 문자열의 다음 인덱스를 나타내는 정수 값입니다. 이 인덱스 이전까지의 문자열이 반환됩니다. 만약 생략하면 함수는 문자열의 끝까지 추출합니다.

반환 값

문자열을 인수로 전달된 시작 인덱스부터 종료 인덱스 전까지 추출해서 문자열로 반환합니다. 이 과정에서 원본 문자열은 바뀌지 않습니다.

매개변수와 반환 값 상세 설명

시작하는 인덱스가 종료 인덱스보다 클 경우

인수로 전달된 시작하는 인덱스(indexStart)가 종료 인덱스(indexEnd)보다 크면 마치 두 인덱스가 바뀐 듯 함수가 작동합니다.

JavaScript 
const str = "codingEverybody";

console.log(str.substring(6, 0)); // 출력: "coding"
// 마치 str.substring(0, 6)처럼 작동
종료 인덱스를 생략할 경우

종료 인덱스(indexEnd)를 생략하면 함수는 문자열의 끝까지 추출합니다.

JavaScript 
const str = "codingEverybody";

console.log(str.substring(3)); // 출력: "ingEverybody"
시작 인덱스와 종료 인덱스가 같을 경우

인수로 전달된 시작하는 인덱스(indexStart)가 종료 인덱스(indexEnd)와 같을 경우 빈 문자열("")을 반환합니다.

JavaScript 
const str = "codingEverybody";
const result = str.substring(3, 3);

console.log(result); // 출력:
console.log(typeof result); // 출력: "string"
console.log(result.length); // 출력: 0
자바스크립트 typeof 연산자 - 데이터 타입 확인하기
자바스크립트 length 속성 - 문자열의 길이를 반환
0보다 작은 인자 값을 가지는 경우

0보다 작은 인자 값을 가지는 경우 0으로 처리됩니다.

JavaScript 
const str = "codingEverybody";

console.log(str.substring(-1, 3)); // 출력: "cod"
console.log(str.substring(4, -3)); // 출력: "codi"
원본 문자열의 길이보다 큰 인자 값을 가지는 경우

원본 문자열의 길이보다 큰 인자 값을 가지는 경우에는 원본 문자열의 길이로 처리됩니다.

JavaScript 
const str = "codingEverybody";

console.log(str.substring(0, 50)); // 출력: "codingEverybody"
console.log(str.substring(0, str.length)); // 출력: "codingEverybody"
인자 값이 NaN일 경우

인자 값이 NaN일 경우 0으로 처리됩니다.

JavaScript 
const str = "codingEverybody";
const indexStart = "코딩" * 2;

console.log(indexStart); // 출력: NaN
console.log(str.substring(indexStart, 3)); // 출력: "cod"

substring()와 slice() 함수의 차이점

substring()와 slice() 함수는 거의 동일하게 작동하지만 인수를 처리하는 방식에서 몇 가지 미묘한 차이점이 있습니다.

자바스크립트 문자열 slice() 함수

아래 테이블은 substring() 및 slice() 함수의 차이점을 비교한 것입니다.

substring()와 slice() 함수의 차이점 비교
차이점 substring() slice()
음수 인덱스 지원 음수 값은 0으로 처리됨 음수 값은 끝에서부터의 역으로 카운트됨
시작 인덱스가 종료 인덱스보다 클 때 시작 인덱스가 종료 인덱스보다 클 때 교환 시작 인덱스가 종료 인덱스보다 클 때 교환 없음. 빈 문자열("")을 반환

활용 예시

substring() 함수는 특정 범위의 문자열을 추출하는 데 유용합니다. 여러 상황에서 활용할 수 있는 몇 가지 예시를 살펴보겠습니다.

전화번호 포맷팅

전화번호를 포맷하거나 일부를 마스킹하는 경우에 유용합니다.

JavaScript 
const formatPhoneNumber = phoneNumber => {
    return phoneNumber.substring(0, 3) + "-****-" + phoneNumber.substring(7);
}

console.log(formatPhoneNumber("1234567890")); // 출력: "123-****-7890"
자바스크립트 화살표 함수의 이해와 사용법

날짜 포맷 변경

날짜 문자열에서 원하는 부분만 추출하여 다른 형식으로 포맷팅할 수 있습니다.

JavaScript 
const formatDate = dateString => {
    const year = dateString.substring(0, 4);
    const month = dateString.substring(5, 7);
    const day = dateString.substring(8, 10);
    
    return `${day}/${month}/${year}`;
}

console.log(formatDate("2024-02-27")); // 출력: "27/02/2024"
자바스크립트 템플릿 리터럴 - 백틱

텍스트 일부 강조

특정 문자열의 일부를 강조 표시하거나 변형하여 보여줄 수 있습니다.

JavaScript 
const emphasizeText = (text, startIndex, endIndex) => {
    return text.substring(0, startIndex) +
           "<strong>" + text.substring(startIndex, endIndex) +
           "</strong>" + text.substring(endIndex);
}

const originalText = "JavaScript is powerful!";
console.log(emphasizeText(originalText, 0, 10)); // 출력: "<strong>JavaScript</strong> is powerful!"

브라우저 호환성

substring() 함수의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
substring() 1 12 1 1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

substring() 함수의 명세서 사양
명세서 사양
substring() ECMAScript Language Specification
#sec-string.prototype.substring

참고문헌

같이 보기