본문 바로가기
Frontend

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

by unknownomad 2022. 2. 9.

문자열 자르는 함수

//substr()
str.substr(start[, length])

//substring()
str.substring(indexStart[, indexEnd])

//slice()
str.slice(beginIndex[, endIndex])

 

  • 위 세 가지 함수의 인수 중 대괄호([]) 부분은 생략 가능
  • 생략 시 시작 위치부터 문자열 끝까지 자름

substr()

* 문법

substr("시작 위치", "길이")
substr("시작 위치")

 

* 정의

  • 시작 위치부터 해당 길이만큼 문자열을 자르는 함수
  • "길이" 부분을 생략하면 시작 위치부터 문자열 끝까지 자름

출처 : https://gent.tistory.com/414

 

* 예제

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

var result1 = str.substr(0, 2); // 자바
var result2 = str.substr(2, 4); // 스크립트
var result3 = str.substr(2); // 스크립트

 


substring()

* 문법

substring("시작 위치", "종료 위치")
substring("시작 위치")

 

* 정의

  • 시작 위치에서 종료 위치까지 문자열을 자름
  • 주의점 : 종료 위치의 -1까지 문자열을 자름

출처 : https://gent.tistory.com/414

 

* 예제1

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

var result1 = str.substring(0, 2); // 자바
var result2 = str.substring(2, 5); // 스크립
var result3 = str.substring(2, 6); // 스크립트
var result4 = str.substring(2); // 스크립트

 

* substring() 함수에서 음수(-) 사용 시 주의사항

  • substring() 함수에서 인자에 음수(-)를 대입하면 해당 값은 "0"으로 치환됨
  • 종료 위치가 음수(-) 또는 "0"인 경우 첫 번째 인수와 두 번째 인수가 뒤바뀜

 

* 예제2

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

var result1 = str.substring(-4, 5); // = str.substring(0, 5) // 자바스크립
var result2 = str.substring(2, -1); // = str.substring(0, 2) // 자바

 


slice(): 뒤에서부터 자르기

* 문법

slice("시작 위치", "종료 위치")
slice("시작 위치")

 

* 정의

  • 기본 사용법
    substring() 함수와 동일
  • 다른 점
    음수(-)를 자유롭게 사용할 수 있어, 뒤에서부터 문자열을 자를 때 유용하게 사용
    음수(-)인 index값 = 문자열의 길이 + 음수(-)인 index값

출처 : https://gent.tistory.com/414

 

  • str.slice(-4)
    문자열의 뒤에서 4번째 자리부터 끝까지 문자열을 자르라는 의미

 

* 예제1

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

//기본
var result1 = str.slice(0, 2); // 자바
var result2 = str.slice(2, 6); // 스크립트
var result3 = str.slice(2); // 스크립트

//음수
var result4 = str.slice(-4); // 스크립트
var result5 = str.slice(-4, 5); // 스크립
var result6 = str.slice(2, -1); // 스크립

 

* 예제2

const str = "abcde";

const result1 = str.slice(-2, str.length); // de
const result2 = str.slice(-2); // de

document.writeln(result1);
document.writeln(result2);

 


출처

https://gent.tistory.com/414

https://hianna.tistory.com/383

댓글