[JavaScript] 문자열 자르기 - substr(), substring(), slice()

문자열을 다루다 보면 원하는대로 문자열을 자르고 싶은 경우가 많이 존재한다.

 

문자열을 자르는데 사용되는 대표적인 함수로 substr(), substring(), slice()가 있다는 건 알고 있지만,

매번 필요할 때마다 검색해서 내 상황에 맞는 함수를 선택하고, 적용하기를 반복하다 보니

"아, 그냥 내 블로그에 정리해두자;;"라는 생각이 들었다 ㅋㅋ;;

 

💡 급하신 분들을 위한 간단 요약

• 문자열을 특정 위치부터 원하는 길이만큼 자르고 싶다. (정방향, 역방향 둘 다 가능)
  👉🏻 substr(startIdx, length?)
  
  
• 문자열에서 특정 구간을 추출하고 싶다.
  인자 값이 음수일 때 해당 값을 0으로 취급하고 싶다.
  👉🏻 substring(startIdx, endIdx?)
  
  
• 문자열에서 특정 구간을 추출하고 싶다.
  문자열을 뒤에서부터 특정 위치까지 자르고 싶다
  👉🏻 slice(startIdx, endIdx?)

사실 원하는 길이만큼 자르고 싶을 땐 substr() 사용하면 되고,
인덱스를 활용하여 원하는 구간을 자르고 싶을 땐 substring() 사용하면 된다.
slice()는 잘 안 쓰게 됨 ㅋㅋ

 

---

1️⃣ substr()

substr() 메소드는 문자열의 특정 위치(startIdx)부터 원하는 길이(length)만큼 자른 문자열을 반환한다.

 

✔ Syntax/Parameters

str.substr(startIdx, length?)

• startIdx
  추출하고자 하는 문자열의 시작 위치.
  음수가 주어지면 문자열총길이 + start의 값으로 취급된다.
• length (option)
  추출할 문자열의 총 길이.
  생략되면 문자열의 끝까지 추출하여 반환한다.

 

✔ Examples

const str = 'devcarrot';

console.log(str.substr(0, 3)); // dev
console.log(str.substr(3));    // carrot

 

• start가 문자열 길이 이상이거나 length가 0이하인 경우
  빈 문자열을 반환한다.

console.log(str.substr(str.length)); 	 //
console.log(str.substr(str.length + 1)); //
console.log(str.substr(0, -1));		 //

 

• start가 음수이면서 절대값이 문자열 길이보다 작은 경우
  start를 (문자열총길이 + start)로 취급하기 때문에 문자열 끝에서 |start| 만큼 뺀 곳에서 시작하게 된다.

console.log(str.substr(-3)); // rot

 

• start가 음수이면서 절대값이 문자열 길이보다 크거나 같은 경우
  start를 0으로 취급한다.

console.log(str.substr(-str.length)); 	   // devcarrot
console.log(str.substr(-(str.length + 1)); // devcarrot

 

✔ Usage

문자열을 특정 위치부터 "원하는 길이" 만큼 자르고 싶을 경우

문자열을 뒤에서부터 "원하는 길이" 만큼 자르고 싶은 경우

 

2️⃣ substring()

substring() 메소드는 문자열의 시작 인덱스(startIdx)로부터 종료 인덱스(endIdx) 전까지의 문자열을 반환한다.

 

✔ Syntax/Parameters

str.substring(startIdx, endIdx?)

• startIdx
  추출하고자 하는 문자열의 시작 위치.
• endIdx (option)
  추출하고자 하는 문자열의 마지막 위치 + 1.
  생략되면 문자열의 끝까지 추출하여 반환한다.

 

✔ Examples

const str = 'devcarrot';

console.log(str.substring(0, 3)); // dev
console.log(str.substring(3));    // carrot

 

• start가 end와 같은 경우
  빈 문자열을 반환한다.

console.log(str.substring(1, 1)); //

 

• start가 end보다 큰 경우
  마치 두 개의 인자가 서로 바뀐듯이 작동한다.

console.log(str.substring(1, 0)); // d
console.log(str.substring(7, 4)); // arr

 

• 인자 값이 음수인 경우
  0으로 취급된다.

console.log(str.substring(-1, 3)); // dev

 

• 인자 값이 문자열 길이보다 큰 경우
  문자열 길이로 취급된다.

console.log(anyString.substring(0, 10)); // devcarrot

 

✔ Usage

문자열의 특정 구간을 추출하고 싶은 경우

인자 값이 음수일 때 해당 값을 0으로 취급하고 싶은 경우

 

3️⃣ slice()

slice() 메소드는 문자열의 시작 인덱스(startIdx)로부터 종료 인덱스(endIdx) 전까지의 문자열을 반환한다.

정의는 substring()과 같지만 인자 값이 음수인 경우, 문자열 길이보다 큰 경우 등의 핸들링이 다르기 때문에 두 메소드의 결과값은 항상 같은 것은 아니다.

 

✔ Syntax/Parameters

str.slice(startIdx, endIdx?);

• startIdx
  추출하고자 하는 문자열의 시작 위치.
  음수가 주어지면 문자열총길이 + start의 값으로 취급된다.
• endIdx (option)
  추출하고자 하는 문자열의 마지막 위치 + 1.
  음수가 주어지면 문자열총길이 + end의 값으로 취급되며, 생략되면 문자열의 끝까지 추출하여 반환한다.

 

✔ Examples

const str = 'My name is devcarrot.';

console.log(str.slice(3, 7)); // name
console.log(str.slice(4));    // ame is devcarrot.

 

• start가 문자열 길이 이상인 경우
  빈 문자열을 반환한다.

console.log(str.slice(20)); //

 

• start가 음수이면서 절대값이 문자열 길이보다 작은 경우
  start를 (문자열총길이 + start)로 취급하기 때문에 문자열 끝에서 |start| 만큼 뺀 곳에서 시작하게 된다.

console.log(str.slice(-3)); // 역방향으로 3개를 세므로 ot.

 

• start(end)가 음수이면서 절대값이 문자열 길이보다 크거나 같은 경우
  start(end)를 0으로 취급한다.

console.log(str.slice(-20)); // My name is devcarrot.
console.log(str.slice(0, -20)); //

 

• end가 음수이면서 절대값이 문자열 길이보다 작은 경우
  end를 (문자열총길이 + end)로 취급하기 때문에 |end| 만큼 뺀 곳에서 끝난다. (포함되지 않음)

console.log(str.slice(1, -7)); // y name is dev

 

✔ Usage

문자열의 특정 구간을 추출하고 싶은 경우

문자열을 뒤에서부터 자르고 싶은 경우

 

✅ Difference

const str = 'devcarrot';

console.log(str.substr(2, 3));    // vca
console.log(str.substring(2, 5)); // vca
console.log(str.slice(2, 5));     // vca

 

console.log(str.substr(5, 2));    // rr
console.log(str.substring(5, 2)); // vca
console.log(str.slice(5, 2));     //

 

console.log(str.substr(-5, 2));     // ar
console.log(str.substr(-5, -2));    //

console.log(str.substring(-5, 2));  // de
console.log(str.substring(-5, -2)); // 

console.log(str.slice(-5, 2));      //
console.log(str.slice(-5, -2));     // arr

 

---

 

비슷하면서도 다른 3개의 메서드.

일반적인 기댓값이 아닌 경우에 메서드마다 핸들링하는 방법이 다르니 원하는 메서드를 본인이 잘 판단해서 사용하는 것이 좋을듯!

 

 

 

출처:

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/substr

String.prototype.substr() - JavaScript | MDN

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/substring

String.prototype.substring() - JavaScript | MDN

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/slice

String.prototype.slice() - JavaScript | MDN