Javascript - 문자열 자르기 [split, substring, substr]

자바스크립트에서는 문자열을 자르는 방법으로 split, substring, substr 함수를 제공합니다. 단순히 문자 값을 자르는 데에 왜 이렇게 많은 split(), substring(), substr() 함수들이  제공되고 있는 걸까요? 오늘은 split(), substring(), substr() 각 각의 함수들이 가지는 정의와 사용법에 대해 알아보도록 하겠습니다.

split 정의와 사용법

str.split([separator[, limit]])

반환

: split은 문자열을 separator를 기준으로 limit 만큼의 크기를 가진 새로운 문자 배열을 반환합니다.

 

separator [옵션]

: 구분자는 문자열을 나눌 때 기준이 되는 값으로 문자(character)이나 정규표현식을 사용할 수 있습니다. 값을 정하지 않으면 str과 동일한 값을 가진 문자 배열을 반환합니다.

 

limit [옵션]

: 반환하는 문자 배열의 최대 크기입니다. 값을 정하지 않으면 문자 배열의 크기는 제한되지 않습니다.

예제 코드

const text = 'Hello, world!';

const splitResult = text.split(',');
// ["Hello", " world!"]

const splitResultByLimit0 = text.split(',', 0);
// []

const splitResultByLimit1 = text.split(',', 1);
// ["Hello"]

const splitResultByLimit2 = text.split(',', 2);
// ["Hello", " world!"]

substring 정의와 사용법

str.substring(indexStart[, indexEnd])

반환

: substring는 기존 문자열의 indexStart 위치에서 indexEnd까지 잘라 부분으로 문자열을 반환합니다.

 

indexStart [필수]

: 자르는 문자의 시작 위치 값입니다.

 

indexEnd [옵션]

: 자르는 문자의 마지막 위치 값입니다. 생략이 가능하며 생략을 하는 경우 대상 문자열의 마지막 위치 값을 설정합니다.

예제 코드

const text = 'Hello, world!';

console.log(text.substring(0, 1));
// H
console.log(text.substring(1, 0));
// H

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

console.log(text.substring(5));
// , world!

console.log(text.substring(0));
// Hello, world!

 

 

substr 정의와 사용법

str.substr(start[, length])

반환

: substr은 기존 문자열의 start 위치에서 length 만큼 문자열을 반환합니다.

 

start [필수]

: 자르는 문자의 시작 위치 값입니다.

 

length [옵션]

: 자르는 문자열의 길이 값입니다. 생략이 가능하며 생략을 하는 경우 문자열의 start 위치부터 문자열의 끝까지 추출하여 반환합니다.

 

* substr은 ECMAScript 1, 2에 포함되지 않으며 3의 부록에 정의되어 있는 사양(spec)으로 사용이 권장되지 않습니다.

예제 코드

const text = 'Hello, world!';

console.log(text.substr(0, 1));
// H
console.log(text.substr(1, 0));
// 

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

console.log(text.substr(5));
// , world!

console.log(text.substr(0));
// Hello, world!

split(), substring(), substr()의 차이 알아보기

const text = 'Hello, world!';

console.log(text.split(','));
// ["Hello", " world!"]

console.log(text.substring(5, 6));
// ,

console.log(text.substr(5, 6));
// , worl

예제 코드의 결과를 확인하면 split(), substring(), substr() 각각의 함수가 가지는 차이를 알 수 있습니다.