본문으로 바로가기

substr & substring - 문자열 자르기

문자열 객체의 substr 메서드 및 substring 메서드에 대해 알아봅니다.

두개의 메소드 공통점은 원 문자열은 그대로 보존한다.




substr()

문자열.substr(start, length)

1. length값은 가져올 길이값이며, 생략가능하다.

2. 두번째 매개변수인 length값이 음수값일 경우 빈 값을 반환한다. 

    (length값이 음수이라면 가져올 길이값이 마이너스이므로 당연히 빈값을 반환)


문자열에서 특정한 구간의 문자열을 추출한다.


문법(Syntax)

JavaScript
string.substr(start,length)


인자(Parameters)

 인자명

데이터형 

필수/옵션 

설명 

 start

number 

필수 

탐색 구간의 시작점(index) 

 length 

number 

옵션 

탐색구간이 끝나는 점(index), start+length 위치까지를 탐색구간으로 설정함 


반환값(Return)

string, start와 length 사이의 문자열


설명(Description)

문자열 중 첫번째 인자(start)에서부터 두번째 인자(length)까지의 구간에 해당하는 문자열을 반환합니다. 

length를 지정하지 않으면 start에서부터 문자열 전체를 처리구간으로 간주합니다. 

start가 양수일 경우, 문자의 길이 보다 작으면 빈문자열이 리턴됩니다. 

start가 음수일 경우, start의 index는 문자열의 뒤에서부터 시작됩니다.


JavaScript
var str = 'coding everybody';
console.log(str.substr(7)) // everybody
console.log(str.substr(7,5)) // every
console.log(str.substr(-4)) // body, 음수인 경우 뒤에서부터 카운팅 
console.log(str.substr(-4,2)) // bo
console.log(str);


JavaScript
var arr = ['사당.','교대.','강남.','역삼.'];
var str = '사당.교대.강남.역삼.';

console.log(arr.substr(1));  // 배열에 substr를 사용했기 때문에 에러가 발생.

//배열에는 substr 메소드가 없다.
var result = str.substr(2,5);
console.log(str);
console.log(result);




substirng()

subString(start, End)

1. 리턴값은 잘라진 문자열. 즉 시작 인덱스부터 End 바로 앞까지 반환.

2. End값은 생략가능 (시작부터 끝까지)

3. start값이 End값보다 크다면 작은 숫자가 시작위치로 큰숫자가 종료위치로 셋팅된다.

4. 매개변수 둘 중에 한개값이 음수값이라면 시작위치가 0으로 설정된다.

5. 매개변수가 둘다 음수값이라면 반환값이 무조건 없다.


문자열에서 특정한 구간의 문자열을 추출합니다.


문법(Syntax)

JavaScript
string.substring(from,to)


인자(Parameters)

 인자명

데이터형 

필수/옵션 

설명 

 from

number 

필수 

탐색구간의 시작점(index)

 to 

number 

옵션 

탐색구간이 끝나는 점, 0 index부터 시작됨


반환값(Return)

string, from과 to 사이의 문자열


설명(Description)

  • from과 to 모두 index 0부터 시작하는 위치 값을 가진다. 
  • from이 to 보다 작으면 from부터 to사이의 문자열을 리턴한다. 
  • from이 to 보다 크면 to부터 from 사이의 문자열을 리턴한다. 
  • from과 to가 같으면 빈문자열을 리턴한다.



JavaScript
var str = 'coding everybody';
console.log(str.substring(0)) // coding everybody 
console.log(str.substring(0,6)) // coding 
console.log(str.substring(7,0));  // coding 
console.log(str.substring(7,2)); // ding


JavaScript
var str2 = '사당.교대.강남.역삼.';
var result2 = str2.substring(2,5);

console.log(result2);




slice, substr, substring 비교

 var str = "coding everybody";

str.slice() 

str.substr() 

str.substring() 

 function(7)

everybody 

everybody 

everybody 

function(0, 7) 

coding

coding 

coding 

function(3, 7) 

ing 

ing eve 

ing 

function(7, 2) 

 

ev 

ding 

function(-7) 

erybody 

erybody 

coding everybody 

function(-7, 2) 

 

er 

co 

function(7, 7) 

 

everybo 

 





댓글을 달아 주세요

  1. 레페르카라 2021.05.02 12:11

    var str = 'coding everybody';

    console.log(str.substring(0,6)) // "coding"

    console.log(str.substring(7,0)); // "coding " <- 빈공백 추가된 형태

    console.log(str.substring(7,2)); // "ding " <- 빈공백 추가된 형태


    정확히는 이렇게 되는 것이니까
    따옴표로 묶어주시면
    독자들이 헷갈릴 여지가 없을 것 같네요.

    문자열 처리하는 포스팅에 대해서 적으셨는데, 공백 문제는 중요한 부분입니다.

    ---

    또한 마이너스 인덱스의 개념도 짧게 언급 됐으면 좋겠네요.

    '-(마이너스) 인덱스'라는 개념이 있습니다. 첫번째 요소의 인덱스는 0이기 때문에 리스트의 맨 마지막 요소의 인덱스는 -1이 됩니다.

    var str = 'coding everybody';

    즉 인덱스 0인 'c' 를 기준으로
    거꾸로 세면 됩니다.
    음의 방향(왼쪽)으로 인덱스를 세 개 되는 것이죠.

    console.log(str.substr(-4,2)) // bo

    따라서 마지막에서 네번째 요소인 b의 인덱스는 -4가 됩니다.

    ---

    다만 JS에서 마이너스 인덱스는
    substr, substirng 과 같은 문자열 추출 함수 사용 시에만 활용됩니다.

    Python 등의 언어와는 달리 JS에서는 arr[-1] 과 같이 특정 배열에 마이너스 인덱스를 넣어 값을 꺼낼 수는 없습니다.