[JavaScript] 문자열 자르기 함수 substr() / substring() / slice() / splice() / split()

 

자바스크립트에서 문자열, 배열을 자르기 위해서는 substr(), substring(), slice(), splice(), split() 함수를 사용하면 됩니다. 

 

 

1. substr()

"문자열".substr(startIndex, length); //startIndex : 시작위치,  length : 길이

 

• substr() 함수는 문자열의 일부를 일정 길이만큼 추출하고 싶을 때 사용합니다.
• length 는 생략 가능하며 생략 할 경우 문자열 끝까지 자릅니다.
• startIndex 인자로 음수 인덱스(-)를 넘길 수도 있습니다.

var str = 'Hello, JavaScript';

var result1 = str.substr(0, 5);
// 결과 : "Hello"

var result2 = str.substr(5,1);;
// 결과 : ","

var result3 = str.substr(7);
// 결과 : "JavaScript"

var result4 = str.substr(-10);
// 결과 : "JavaScript"

 

❗ MDN 에서 string.substr 은 웹 표준에 맞지 않아 deprecated, 즉 폐기된 함수이므로, substring()을 사용하기를 권장하고 있습니다.

 

2. substring()

"문자열".substring(startIndex, endIndex); //startIndex : 시작위치  ,  endIndex : 종료위치

• substring() 함수는 문자열을 시작과 종료 인덱스를 기준으로 자르고 싶을 때 사용합니다.
• length 는 생략 가능하며 생략 할 경우 startIndex부터 문자열 끝까지 자른다.
• substr() 함수와 다른 점은 종료위치를 인덱스로 받으며, 종료 위치의-1까지 문자열을 자른다는 것입니다.
• 두 번째 인자를 음수로 넘기면 0을 넘긴 것처럼 작동합니다.

var str = 'Hello, JavaScript';

var result1 = str.substring(0,5);
// 결과 : "Hello"

var result2 = str.substring(-1,5);
// 결과 : "Hello"

var result3 = str.substring(7);
// 결과 : "JavaScript"

var result4 = str.substring(-1);
// 결과 : 'Hello, JavaScript'

 

3. slice()

"배열".slice(startIndex, endIndex); //startIndex : 시작위치, endIndex : 종료위치

• slice() 함수는 기본적인 사용법은 substring() 함수와 동일하며, 다른 점은 음수(-)를 자유롭게 사용할 수 있어서 뒤에서부터 문자열을 자를 때 유용하게 사용할 수 있습니다.
• 배열뿐만 아니라 문자열을 상대로도 사용할 수 있습니다.
• endIndex 는 생략 가능하며 생략 할 경우 startIndex부터 문자열 끝까지 자릅니다.
• 주의할 점은 두번째 인자로 넘어온 종료 인덱스가 가리키는 값은 포함하지 않는다는 것입니다. 즉 endIndex -1 

var str = '자바스크립트';

var result1 = str.slice(0, 2);
// 결과 : "자바"

var result2 = str.slice(2, 6);
// 결과 : "스크립트"

var result3 = str.slice(2);
// 결과 : "스크립트"

 

4. splice

"배열".splice(start[, deleteCount[, item1[, item2[, ...]]]]);  

• startIndex : 시작위치
• deleteCount : 배열에서 제거할 요소의 수 (생략가능)
• item : 배열에 추가할 요소
• splice() 함수는 원본 배열에 새로운 요소를 추가하거나 기존요소를 삭제 또는 교체하여 원본 배열을 변경하고 제거된 새로운 배열을 반환합니다.

4-1.배열 요소 추가

var num = [0,1,2,3,5,6];

// 배열 6번째 위치한곳에 숫자 7를 추가한다.
num.splice(6,0,7); // [0, 1, 5, 2, 3]

// 배열 7번째 위치한곳에 숫자 8,9을 추가한다.
num.splice(7,0,8,9); //[0, 1, 2, 3, 5, 6, 7, 8, 9]

4-2.배열 요소 삭제

var num = [0,1,2,3,5,6];

// 배열 1번째 부터 1개를 제거한다.
num.splice(1,1); // [0, 2, 3, 5, 6]

// 배열 1번째 부터 2개를 제거한다.
num.splice(1,2); //[0, 5, 6]

4-3.배열 요소 변경

var num = [0,1,2,3,5,6];


// 배열 1번째부터 1개를 제거하고 숫자 99로 추가한다.
num.splice(1,1,99); // [0, 99, 2, 3, 5, 6]

// 배열 1번째부터 2개를 제거하고 숫자 22로 추가한다.
num.splice(1,2,22); //[0, 22, 3, 5, 6]

 

4-4. 인자가 한개일 때

let arr = ['A','B','C','D','E'];

console.log(arr.splice(2)); // 결과 : ['C', 'D', 'E']

console.log(arr); // 결과 : ['A', 'B']


let arr2 = ['A','B','C','D','E'];

console.log(arr.splice(0)); // 결과 : ['A', 'B', 'C', 'D', 'E']

console.log(arr); // 결과 : []

 

5. split()

split("구분자 문자열","분할개수")

• split 함수를 사용하면 특정 구분자를 기준으로 문자열을 분리하여 결과를 배열로 반환합니다.
• 두 번째 인자 분할개수는 생략가능합니다.
• 파라미터로 아무것도 전달하지 않는다면, 문자열 전체를 length 1(길이가 1)인 배열에 담아 리턴합니다.

let str = 'JavaScript String split()';

let substr = str.split();  // 결과 : ['JavaScript String split()']

var str1 = 'HTML,CSS,JavaScript';
var words = str1.split(',', 2); // 결과 : ['HTML', 'CSS']

var str2 = 'HTML,CSS,JavaScript';
var words2 = str2.split(',', 3); // 결과 : ['HTML', 'CSS', 'JavaScript']


let answer = '1,2   ,3 ,  4';

console.log(answer); // 결과 : '1,2   ,3 ,  4'

answer.split(','); // 결과 : ['1', '2   ', '3 ', '  4']

answer = '1,2   ,3 ,  4';
let indexArr = answer.split(',').map(x => x.trim());

console.log(indexArr); //결과 : ['1', '2', '3', '4']

answer = '1,2   ,3 ,  4';
let indexArr = answer.split(',').map(Number);

console.log(indexArr); //결과 : [1, 2, 3, 4]

 

 

 

 

Reference

• Mdn web docs
• 모던 JavaScript