Frontend Study - 2/Javascript

자바스크립트 string methods - substring() / slice() / splice() 차이점

갓데미 2022. 6. 26. 21:01

1. substring()

 

substring() 메소드는 string 객체의 시작 인덱스(포함) 부터 종료 인덱스 전(불포함) 까지의 부분 문자열을 반환(return) 합니다.

 

str.substring(indexStart[, indexEnd])
 
indexStart : 반환문자열의 시작 인덱스
 
indexEnd : (옵션)  반환문자열의 마지막 인덱스 (포함하지 않음.)

 

const str = 'Mozilla';

console.log(str.substring(1, 3));
// expected output: "oz"

console.log(str.substring(2));
// expected output: "zilla"

 

 

  • 만약 indexEnd 가 생략된 경우, substring() 문자열의 끝까지 모든 문자를 추출합니다.
  • 만약 indexStart 가 indexEnd와 같을 경우, substring() 빈 문자열을 반환합니다.
  • 만약 indexStart 가 indexEnd보다 큰 경우, substring() 메서드는 마치 두 개의 인자를 바꾼 듯 작동하게 됩니다. 
  • 0보다 작은 인자 값을 가지는 경우에는 0으로, stringName.length 보다 큰 인자 값을 가지는 경우, stringName.length 로 처리됩니다.
  • NaN 값은 0으로 처리됩니다.

 

2. slice()

slice() 메소드는 문자열의 일부를 추출하면서 새로운 문자열을 반환합니다.

문자열의 변경은 다른 문자열에 영향을 미치지 않습니다.

 

str.slice(beginIndex[, endIndex])
beginIndex : 추출 시작점인 0부터 시작하는 인덱스입니다.
  • 만약 음수라면, beginIndex는  strLength(문자열 길이) + beginIndex로 취급됩니다. (예를 들어 beginIndex가 -3이면 시작점은 strLength - 3)
  • 만약 beginIndex가 strLength 보다 크거나 같은 경우, slice()는 빈 문자열을 반환합니다.
 
endIndex(Optional) : 0부터 시작하는 추출 종료점 인덱스로 그 직전까지 추출됩니다.
  • 인덱스 위치의 문자는 추출에 포함되지 않습니다.
  • 만약 endIndex가 생략된다면, silce()는 문자열 마지막까지 추출합니다.
  • 만약 음수라면, endIndex는 strLength(문자열 길이) + endIndex 로 취급됩니다(예를 들어 endIndex가 -3이면 종료점은 strLength - 3).

 

const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.slice(31));
// expected output: "the lazy dog."

console.log(str.slice(4, 19));
// expected output: "quick brown fox"

console.log(str.slice(-4));
// expected output: "dog."

console.log(str.slice(-9, -5));
// expected output: "lazy"

 

return 하기

아래 예시는 새 문자열을 생성하기 위해 slice()를 사용합니다.

 

var str1 = 'The morning is upon us.', // the length of str1 is 23.
    str2 = str1.slice(1, 8),
    str3 = str1.slice(4, -2),
    str4 = str1.slice(12),
    str5 = str1.slice(30);
console.log(str2); // OUTPUT: he morn
console.log(str3); // OUTPUT: morning is upon u
console.log(str4); // OUTPUT: is upon us.
console.log(str5); // OUTPUT: ""

 

음수 index 사용하기

아래 예시는 slice()에 음수 인덱스를 사용합니다.

 

var str = 'The morning is upon us.';
str.slice(-3);     // returns 'us.'
str.slice(-3, -1); // returns 'us'
str.slice(0, -1);  // returns 'The morning is upon us'

 

3. splice()

배열의 기존 요소를 교체, 삭제, 추가하여 배열의 내용을 변경합니다. 원본수정 (O)

 

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

 

start : 변경을 시작할 인덱스, 추출 시작점인 0부터 시작하는 인덱스입니다.
  • 음수인 경우 : 음수인 경우 배열의 끝에서부터 요소를 세어나갑니다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 array.length - n번째 인덱스와 같음)
  • 배열의 길이보다 큰수 : 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됩니다. 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됩니다.
 
deleteCount(Optional) : 배열에서 제거할 요소의 수입니다.
  •  deleteCount를 생략하거나 값이 array.length - start보다 크면 start부터의 모든 요소를 제거합니다. deleteCount가 0 이하라면 어떤 요소도 제거하지 않습니다. 이 때는 최소한 하나의 새로운 요소를 지정해야 합니다.

item1, item2, ... (Optional) : 배열에 추가할 요소입니다.

  • 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 합니다.

 

return 하기

제거한 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환합니다.

아무 값도 제거하지 않았으면 빈 배열을 반환합니다.

 

 

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var arr1 = arr.splice(10, 2, 'a', 'b', 'c');
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, "a", "b", "c"]
console.log(arr1); // [11, 12]
-------------------------------------------------------
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var arr1 = arr.splice(-6, 4);
console.log(arr); // [1, 2, 3, 4, 5, 6, 11, 12]
console.log(arr1); // [7, 8, 9, 10]

 

3. substring() 과 slice() 의 차이. 

 

두 methods는 비슷해 보이지만 차이점이 있습니다.

 

 

1) substring() method는 indexStart 값이 indexEnd값보다 크다면 둘의 위치를 바꿉니다. 즉 둘의 위치를 바꿔서 값이 발생합니다. 하지만 slice() method의 경우 빈 string을 리턴하게 됩니다. 

 

var text = 'Mozilla';
console.log(text.substring(5, 2)); // => "zil"
console.log(text.slice(5, 2));     // => ""
 
2) 만약 두개의 인자가 모두 음수이거나, NaN 타입일 때, substring()의 경우 그것들을 0으로 취급합니다. 
 
console.log(text.substring(-5, 2)); // => "Mo"
console.log(text.substring(-5, -2)); // => ""

 

slice() 또한 NaN 인자를 0으로 취급하지만 음수값의 경우 문자열의 뒷부분부터 카운트 하여 값을 추출해 냅니다.