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() 함수는 문자열의 특정 범위의 문자열을 잘라내어(slice) 추출한 결과를 새로운 문자열로 반환합니다.
문자열을 인수로 전달된 시작 인덱스부터 종료 인덱스 전까지 추출해서 문자열로 반환하는 함수입니다.

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

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

// substring()
console.log(str.substring(4, 1));  // "ava"

// slice()
console.log(str.slice(4, 1));  // "" (빈 문자열)

활용 예시

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

참고문헌

같이 보기