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

JavaScript에서 문자열을 자를 때, split(), substr(), substring(), slice()를 사용할 수 있습니다. 이 함수들이 어떻게 문자열을 자르는지 사용 방법을 소개합니다.

1. split() : 구분자로 문자열 분리하여 배열로 리턴

split()의 Syntax는 다음과 같습니다. 인자로 구분자와 limit을 받습니다. limit은 구분자로 분리할 문자열의 개수입니다. 예제와 함께 어떻게 동작하는지 확인해보겠습니다.

string.split(splitter, limit);

1.1 구분자만 인자로 전달

구분자만 인자로 전달하면 문자열을 구분자로 분리하고 배열에 담아 리턴합니다.

let str = 'Hello, World, Javascript';

console.log(str.split(','));

Output:

[ 'Hello', ' World', ' Javascript' ]

1.2 구분자와 limit을 인자로 전달

limit은 구분자로 분리할 문자열의 개수가 됩니다. limit으로 0을 전달하면 빈 배열이 리턴되며, 1을 전달하면 구분자로 1개의 문자열만 잘라서 배열로 리턴합니다.

let str = 'Hello, World, Javascript';

console.log(str.split(',', 0));
console.log(str.split(',', 1));
console.log(str.split(',', 2));
console.log(str.split(',', 3));

Output:

[]
[ 'Hello' ]
[ 'Hello', ' World' ]
[ 'Hello', ' World', ' Javascript' ]

1.3 구분자와 limit을 전달하지 않음

인자로 아무것도 전달하지 않으면 문자열 전체를 배열에 담아 리턴합니다. 길이가 1인 배열이 됩니다.

let str = 'Hello, World, Javascript';

console.log(str.split());

Output:

[ 'Hello, World, Javascript' ]

1.4 정규표현식(Regex)으로 문자열 자르기

아래와 같이 정규표현식을 인자로 전달하여 문자를 자를 수 있습니다.

let str = 'Hello,World?Java!script';
let arr = str.split(/[!,?]/);

console.log(arr);

Output:

[ 'Hello', 'World', 'Java', 'script' ]

1.5 Destructuring

아래와 같이 [a, b, c]처럼 리턴받으면, 각각의 변수에 값이 저장됩니다.

let str = 'Hello World Javascript';

let [a, b, c] = str.split(' ');

console.log(a);
console.log(b);
console.log(c);

Output:

Hello
World
Javascript

2. substr() : 특정 Index에서 원하는 길이만큼 잘라서 문자열로 리턴

substr()의 Syntax는 아래와 같습니다. start는 Index이며 이 Index부터 인자로 전달한 길이만큼 문자열을 잘라서 문자열로 리턴합니다.

str.substr(start , length)

substr(5)처럼 start만 전달하면 start부터 문자열의 마지막까지 잘라서 리턴합니다. substr(0, 5)는 Index 0부터 길이 5 만큼 문자열을 잘라 리턴합니다.

let str = 'HelloWorldJavascript';

let a = str.substr(5);
let b = str.substr(0, 5);
let c = str.substr(0, 10);

console.log(a);
console.log(b);
console.log(c);

Output:

WorldJavascript
Hello
HelloWorld

2.1 start가 음수일 때

start가 음수면 문자열 마지막에서 앞쪽으로 숫자만큼 이동한 것이 start Index가 됩니다. 아래 예제에서 Index -6은 Index 15가 됩니다.

let str = 'HelloWorldJavascript';

let a = str.substr(-6);
let b = str.substr(-6, 3);
let c = str.substr(-6, 5);

console.log(a);
console.log(b);
console.log(c);

Output:

script
scr
scrip

3. substring() : 시작 Index에서 끝 Index 전까지 문자열을 잘라서 리턴

substring()의 Syntax는 다음과 같습니다. Index start를 포함하고 Index end를 포함하지 않는 문자열을 잘라서 리턴합니다.

str.substring(start, end)

substring(6)처럼 start만 전달하면 start부터 마지막까지 문자열을 자릅니다. substring(6, 8)은 Index 6부터 Index 8을 포함하지 않는 Index 7까지 문자열을 자릅니다.

let str = 'Hello World Javascript';

let a = str.substring(6);
let b = str.substring(6, 8);
let c = str.substring(6, 0);

console.log(a);
console.log(b);
console.log(c);

Output:

World Javascript
Wo
Hello

4. slice() : substring과 비슷하지만 살짝 다른 메소드

slice()의 Syntax는 아래와 같고, 보시는 것처럼 substring()과 동일합니다. 동작도 거의 비슷한데 약간 차이가 있습니다. 차이점은 예제에서 다시 설명하겠습니다.

str.slice(start, end)

아래 예제는 위의 substring()의 예제에서 키워드만 slice()로 변경하였습니다. 거의 비슷하게 동작하기 때문에 결과는 동일합니다.

let str = 'Hello World Javascript';

let a = str.slice(6);
let b = str.slice(6, 8);
let c = str.slice(6, 0);

console.log(a);
console.log(b);
console.log(c);

Output:

World Javascript
Wo
Hello

4.1 slice와 substring의 차이점

인자로 음수가 전달되었을 때, substring()은 빈 문자열을 리턴합니다. 하지만 slice()는 음수 Index를 적용하여 문자열을 자릅니다.

let str = 'Hello World Javascript';

let a = str.substring(0, -6);
let b = str.slice(0, -6);

console.log(a);
console.log(b);

결과를 보면 substring은 빈 문자열을 리턴하였지만, slice는 0에서 15(-6)까지 잘랐습니다.


Hello World Java
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha