[Javascript] 문자열 자르기 substr(), substring(), slice() 비교 자바스크립트 함수

Javascript 문자열 자르기 substr(), substring(), slice()

JavaScript 문자열 자르기

JavaScript에서 문자열을 자르는 방법은 여러 가지가 있지만, 그중 가장 많이 사용되는 세 가지 함수인 substr(), substring(), slice()를 비교하며 자세히 알아보겠습니다. 이 글을 읽고 나면 각 함수의 차이점과 사용법을 확실히 이해하고, 상황에 맞게 활용할 수 있을 거예요! 함수 설명, 예제 코드, 결과를 하나씩 살펴보며 정리해보겠습니다.

 

 

1. substr() 함수

• substr(start, length)는 문자열에서 시작 위치(start)부터 지정한 길이(length)만큼의 문자열을 반환합니다.
• 첫 번째 매개변수(start): 자르기 시작할 인덱스(0부터 시작).
• 두 번째 매개변수(length): 추출할 문자 수(생략 가능, 생략 시 문자열 끝까지 반환).
• 특징: 음수 인덱스를 사용할 경우, 문자열 끝에서부터 계산합니다(다만, 최신 브라우저에서는 잘 동작하지 않을 수 있으니 주의).

예제 코드

const str = "Hello, JavaScript!";

console.log(str.substr(0, 5)); // "Hello"

console.log(str.substr(7, 10)); // "JavaScript"

console.log(str.substr(6)); // ", JavaScript!"

console.log(str.substr(-10, 10)); // "JavaScript"

 

결과 화면

"Hello"

"JavaScript"

", JavaScript!"

"JavaScript"

사용 팁

• 특정 길이만큼 문자열을 자르고 싶을 때 유용합니다.
• 하지만 substr()은 비표준 메서드로 간주되며, 최신 코드에서는 substring()이나 slice()를 권장합니다.

 

---

2. substring() 함수

• substring(start, end)는 시작 인덱스(start)부터 끝 인덱스(end) 직전까지의 문자열을 반환합니다.
• 첫 번째 매개변수(start): 자르기 시작할 인덱스.
• 두 번째 매개변수(end): 자르기를 멈출 인덱스(해당 인덱스는 포함되지 않음, 생략 시 문자열 끝까지).
• 특징: 음수 값을 사용하면 0으로 간주하며, start가 end보다 크면 두 값을 자동으로 바꿔 처리합니다.

예제 코드

const str = "Hello, JavaScript!";

console.log(str.substring(0, 5)); // "Hello"

console.log(str.substring(7, 17)); // "JavaScript"

console.log(str.substring(6)); // ", JavaScript!"

console.log(str.substring(5, 1)); // "ello"

console.log(str.substring(-5, 5)); // "Hello"

 

결과 화면

"Hello"

"JavaScript"

", JavaScript!"

"ello"

"Hello"

사용 팁

• 시작과 끝 인덱스를 기준으로 자르고 싶을 때 적합합니다.
• 음수 처리가 필요 없는 경우나, 인덱스 순서가 뒤바뀌어도 안전하게 동작해야 할 때 유용합니다.

 

---

3. slice() 함수

• slice(start, end)는 substring()과 비슷하지만, 음수 인덱스를 지원하며 더 유연합니다.
• 첫 번째 매개변수(start): 자르기 시작할 인덱스(음수면 끝에서부터 계산).
• 두 번째 매개변수(end): 자르기를 멈출 인덱스(포함되지 않음, 생략 시 끝까지).
• 특징: start가 end보다 크면 빈 문자열을 반환하며, 음수 인덱스를 활용해 뒤에서부터 자를 수 있습니다.

예제 코드

const str = "Hello, JavaScript!";

console.log(str.slice(0, 5)); // "Hello"

console.log(str.slice(7, 17)); // "JavaScript"

console.log(str.slice(6)); // ", JavaScript!"

console.log(str.slice(-10, -1)); // "JavaScript"

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

 

결과 화면

"Hello"

"JavaScript"

", JavaScript!"

"JavaScript"

""

사용 팁

• 음수 인덱스를 활용해 문자열 끝에서부터 자르고 싶을 때 최적입니다.
• 배열에서도 동일하게 사용할 수 있어 범용성이 높습니다.

---

세 함수 비교 표

함수	매개변수	음수 인덱스 지원	start > end 처리	특징
substr()	start, length	제한적	해당 없음	길이 기반 자르기
substring()	start, end	없음(0으로 처리)	두 값 교환	인덱스 기반, 안전성 높음
slice()	start, end	있음	빈 문자열 반환	유연성 높음, 배열 호환

---

어떤 함수를 써야 할까?

• 간단한 길이 기반 자르기: substr()을 고려할 수 있지만, 비표준이므로 주의.
• 안정적이고 직관적인 자르기: substring()이 적합합니다.
• 음수 인덱스와 유연성 필요: slice()를 추천합니다.

개인적으로는 slice()가 가장 범용적이고 현대적인 선택이라고 생각해요. 하지만 프로젝트의 요구사항과 팀의 코드 스타일에 맞춰 선택하는 것도 중요합니다.

이제 이 세 함수의 차이를 확실히 아셨죠? 직접 코드를 작성해보고 결과를 확인하면서 익혀보세요. 질문이 있다면 언제든 댓글로 남겨주세요!

 

 

 

 

 

 

 

[MySQL] 날짜 형식/포맷 변환 함수 (DATE_FORMAT 함수)
https://tkpark86.tistory.com/22

[MySQL] 날짜 형식/포맷 변환 함수 (DATE_FORMAT 함수)

 

 

 

 

 

 

 

 

#Javascript #문자열자르기 #substr() #substring() #slice() #비교 #자바스크립트함수 #인덱스 #순서 #매개변수