String.prototype.substring()
사용법
substring()
함수는
문자열의 일부분을 추출합니다.
문자열을 인수로 전달된 시작 인덱스부터 종료 인덱스 전까지 추출해서 문자열로 반환하는 함수입니다.
주의하세요
종료 인덱스는 추출하지 않습니다. 바로 전까지만 추출합니다.
- 이 과정에서 원본 문자열은 바뀌지 않습니다.
- 인수로 전달된 시작하는 인덱스가 종료 인덱스보다 크면 마치 두 인덱스가 바뀐 듯 함수가 작동합니다.
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()
함수의 형식은 다음과 같습니다.
구문
str.substring(indexStart[, indexEnd])
str
: substring()
함수를 적용할 원본 문자열입니다.
매개변수
indexStart |
추출을 시작할 부분 문자열의 시작 인덱스를 나타내는 정수 값입니다. 이 인덱스에 해당하는 문자를 포함하여 추출됩니다. |
---|---|
indexEnd |
옵션. 추출을 종료할 부분 문자열의 다음 인덱스를 나타내는 정수 값입니다. 이 인덱스 이전까지의 문자열이 반환됩니다. 만약 생략하면 함수는 문자열의 끝까지 추출합니다. |
반환 값
문자열을 인수로 전달된 시작 인덱스부터 종료 인덱스 전까지 추출해서 문자열로 반환합니다. 이 과정에서 원본 문자열은 바뀌지 않습니다.
매개변수와 반환 값 상세 설명
시작하는 인덱스가 종료 인덱스보다 클 경우
인수로 전달된 시작하는 인덱스(indexStart
)가 종료 인덱스(indexEnd
)보다 크면 마치 두 인덱스가 바뀐 듯 함수가 작동합니다.
const str = "codingEverybody";
console.log(str.substring(6, 0)); // 출력: "coding"
// 마치 str.substring(0, 6)처럼 작동
종료 인덱스를 생략할 경우
종료 인덱스(indexEnd
)를 생략하면 함수는 문자열의 끝까지 추출합니다.
const str = "codingEverybody";
console.log(str.substring(3)); // 출력: "ingEverybody"
시작 인덱스와 종료 인덱스가 같을 경우
인수로 전달된 시작하는 인덱스(indexStart
)가 종료 인덱스(indexEnd
)와 같을 경우 빈 문자열(""
)을 반환합니다.
const str = "codingEverybody";
const result = str.substring(3, 3);
console.log(result); // 출력:
console.log(typeof result); // 출력: "string"
console.log(result.length); // 출력: 0
0
보다 작은 인자 값을 가지는 경우
0
보다 작은 인자 값을 가지는 경우 0
으로 처리됩니다.
const str = "codingEverybody";
console.log(str.substring(-1, 3)); // 출력: "cod"
console.log(str.substring(4, -3)); // 출력: "codi"
원본 문자열의 길이보다 큰 인자 값을 가지는 경우
원본 문자열의 길이보다 큰 인자 값을 가지는 경우에는 원본 문자열의 길이로 처리됩니다.
const str = "codingEverybody";
console.log(str.substring(0, 50)); // 출력: "codingEverybody"
console.log(str.substring(0, str.length)); // 출력: "codingEverybody"
인자 값이 NaN
일 경우
인자 값이 NaN
일 경우 0
으로 처리됩니다.
const str = "codingEverybody";
const indexStart = "코딩" * 2;
console.log(indexStart); // 출력: NaN
console.log(str.substring(indexStart, 3)); // 출력: "cod"
substring()
와 slice()
함수의 차이점
substring()
와 slice()
함수는 거의 동일하게 작동하지만 인수를 처리하는 방식에서 몇 가지 미묘한 차이점이 있습니다.
아래 테이블은 substring()
및 slice()
함수의 차이점을 비교한 것입니다.
차이점 | substring() |
slice() |
---|---|---|
음수 인덱스 지원 | 음수 값은 0 으로 처리됨 |
음수 값은 끝에서부터의 역으로 카운트됨 |
시작 인덱스가 종료 인덱스보다 클 때 | 시작 인덱스가 종료 인덱스보다 클 때 교환 | 시작 인덱스가 종료 인덱스보다 클 때 교환 없음. 빈 문자열("" )을 반환 |
활용 예시
substring()
함수는 특정 범위의 문자열을 추출하는 데 유용합니다. 여러 상황에서 활용할 수 있는 몇 가지 예시를 살펴보겠습니다.
전화번호 포맷팅
전화번호를 포맷하거나 일부를 마스킹하는 경우에 유용합니다.
const formatPhoneNumber = phoneNumber => {
return phoneNumber.substring(0, 3) + "-****-" + phoneNumber.substring(7);
}
console.log(formatPhoneNumber("1234567890")); // 출력: "123-****-7890"
날짜 포맷 변경
날짜 문자열에서 원하는 부분만 추출하여 다른 형식으로 포맷팅할 수 있습니다.
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"
텍스트 일부 강조
특정 문자열의 일부를 강조 표시하거나 변형하여 보여줄 수 있습니다.
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!"
브라우저 호환성
메서드 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
substring()
|
1 | 12 | 1 | 1 |
명세서
명세서 사양 | |
---|---|
substring()
|
ECMAScript Language Specification #sec-string.prototype.substring |
같이 보기
- 자바스크립트 split() 함수 - 문자열을 분리해서 배열로 변환
- 자바스크립트 문자열 slice() 함수 - 문자열 자르기
- 자바스크립트 replace() 함수 - 개념 정리 및 사용 예제
- 자바스크립트 문자열 includes() 함수 - 문자열에 특정 문자열 포함 여부 확인
- 자바스크립트 문자열 indexOf() 함수 - 문자열에서 문자의 위치 찾기
- 자바스크립트 문자열 lastIndexOf() 함수 – 특정 문자열의 마지막 등장한 위치 찾기
- 자바스크립트 문자열 search() 함수 - 개념 정리 및 사용 예제
- 자바스크립트 문자열 match() 함수 - 개념 정리 및 사용 예제