[javascript] 자바스크립트 문자열 자르는 3가지 함수(substring, substr, slice)

안녕하세요 이번 포스팅에서는 자바스크립트에서는 여러 가지 문자열 관련 함수가 있는데요. 그중에서 문자열을 자르는 함수에 대해 알아보겠습니다.

목차

1. substring( startIdx, endIdx )

substring은 startIdx와 endIdx 사이의 문자열을 반환하는 함수입니다. endIdx가 가리키는 문자는 포함하지 않습니다.

 

사용법

let str = 'Hello World';
let substringResult = str.substring( 1, 3 );

console.log( 'substring:' + substringResult );

// 결과
"substring:el"

참고로 아래는 str 변수안의 문자열의 문자 인덱스 값입니다

0	1	2	3	4	5	6	7	8	9	10
H	e	l	l	o		W	o	r	l	d

 

 

2. substr( startIdx, length )

substr은 startIdx 시작 인덱스에서 length 만큼의 길이를 반환합니다.

 

사용법

let str = 'Hello World';
let substrResult = str.substr(1, 3);

console.log( 'substr:' + substrResult );

// 결과
"substr:ell"

3. slice( startIdx, endIdx )

slice 메소드는 substring과 같이 start와 endIdx 사이의 문자열을 반환합니다. 하지만 startIdx, endIdx 값에 음수를 넣으면 조금 달라집니다. 

 

사용법

let str = 'Hello World';
let sliceResult = str.slice(1, 5);

console.log( 'slice:' + sliceResult );

// 결과
"slice:el"

 

4. slice와 substring의 차이

위에서 말했듯이 slice 와 substring의 차이는 인자값에 음수를 넣었을 때 와 startIdx값이 endIdx값보다 클 때입니다.

1. startIdx값이 endIdx값보다 클 때

let str = 'Hello World';

let substringResult = str.substring(3, 0);
let sliceReslut = str.slice(3, 0);

console.log('substringResult:' + substringResult);
console.log('sliceReslut:' + sliceReslut);

//결과
"substringResult:Hel"
"sliceReslut:"

2. startIdx값이 음수일 때

substring은 startIdx가 음수일 때는 0으로 처리가 되고 slice는 맨 끝에서 뒤로 이동합니다. 예제 문자열을 예로 들면 -3이라면 startIdx값이 8과 같기 때문에 "r"을 가리키고 있습니다.

let str = 'Hello World';

let substringResult = str.substring(-3, 5);
let sliceReslut = str.slice(-3, 5);

console.log('substringResult:' + substringResult);
console.log('sliceReslut:' + sliceReslut);
console.log('sliceReslut2:' + str.slice(-3, 9));//는 str.slice(8, 9) 와 같은 결과가 나옵니다

//결과
"substringResult:Hello"
"sliceReslut:"
"sliceReslut2:r"

3. endIdx값이 음수일 때

substring에서는 endIdx값이 음수라면 0으로 변경되어 계산되고 slice에서 끝에서부터 왼쪽으로 계산됩니다. 아래 예제를 보시면 확인할 수 있습니다.

let str = 'Hello World';

let substringResult = str.substring(0, -8);
let sliceReslut = str.slice(0, -8); // str.slice(0, 3) 과 같은 결과가 나옵니다.

console.log('substringResult:' + substringResult);
console.log('sliceReslut:' + sliceReslut);

결과
"substringResult:"
"sliceReslut:Hel"

 

이렇게 자바스크립트의 문자열 함수인 substring, substr, slice의 사용법과 예제에 대해 알아봤습니다. 감사합니다.