자바스크립트(JS)문자열 자르기 함수(split, substr, substring, slice)

JavaScript에서 문자열을 자를 때 사용하는 방법을 소개합니다.

• 1. split() : 구분자로 문자열을 잘라서 배열로 리턴
• 2. substr() : 특정 Index에서 원하는 길이만큼 잘라서 문자열로 리턴
• 3. substring() : 시작 Index에서 끝 Index 전까지 문자열을 잘라서 리턴
• 4. slice() : substring과 비슷하지만 약간의 차이점이 있는 메소드

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

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

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 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 전까지 문자열을 잘라서 리턴

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 JavascriptWoHello

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

slice()의 Syntax는 아래와 같고, 보시는 것처럼 substring()과 동일합니다. 동작도 거의 비슷한데 약간 차이가 있습니다. 차이점은 예제에서 다시 설명하겠습니다. 알고리즘 문제를 풀면서 주로 slice()사용해서 문자열을 자르는데 그 이유는 밑에 나오는 것처럼 slice()는 음수 처리까지 모두다 되기 때문이다.

str.slice(start, end)

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)까지 잘랐습니다.

Output: Hello World Java