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
Related Posts
- JavaScript sort() 함수, 예제 소개
- JavaScript - Set 생성 및 초기화
- JavaScript Set add() 함수
- JavaScript Set clear() 함수, 모든 값 제거
- JavaScript Set delete() 함수, 값 제거
- JavaScript Set has() 함수 (값 존재 여부 확인)
- JavaScript Array find() 함수
- JavaScript Array splice() 함수
- JavaScript의 contains() 함수
- JavaScript String split() 함수
- JavaScript - 경과 시간 계산 (Elapsed time)
- JavaScript - 실행 시간 측정 방법
- JavaScript - 날짜, 시간 포맷 (Date format)
- JavaScript - slice()로 배열 자르기, 나누기
- Node.js - 파일에 특정 문자열이 포함되어있는지 확인
- Node.js - 특정 패턴과 일치하는 모든 파일 찾기
- Node.js - 디렉토리의 파일 리스트 가져오기
- Node.js - 파일, 디렉토리(하위 파일) 삭제
- Node.js - 파일 이름 변경
- JavaScript - switch 조건문
- JavaScript - 배열의 특정 요소 찾기, Index 찾기