자바스크립트에서 문자열을 배열로 변환하는 방법은 여러 가지가 있습니다.
목적에 따라 다양한 방식으로 처리할 수 있습니다.
이 포스트에서는 문자열을 배열로 바꾸는 다양한 방법과 예제 코드를 알아보겠습니다.
Table of Contents
split() 메소드 사용
split() 메소드는 문자열을 특정 구분자(delimiter)를 기준으로 잘라서 배열로 만들어 줍니다.
string.split(separator, limit);첫 번째 매개변수인 separator는 문자열을 나눌 기준으로 공백이나 쉼표 등을 사용할 수 있습니다.
두 번째 매개변수 limit는 옵셔널 매개변수로 결과 배열의 최대 길이를 지정할 수 있습니다.
예제 1: 공백으로 나누기
const str = "Hello World shinyks.com";
const arr = str.split(" ");
console.log(arr); // ["Hello", "World", "shinyks.com"]split() 메소드의 매개변수로 ” ” 공백을 넘겨주면 문자열의 공백을 기준으로 배열로 만들어 줍니다.
예제 2: 쉼표로 나누기
const csv = "apple,banana,orange";
const fruits = csv.split(",");
console.log(fruits); // ["apple", "banana", "orange"]이전 예제와 마찬가지로 공백 대신 “,” 쉼표를 넣어주면 문자열의 쉼표를 기준으로 배열을 만듭니다.
예제 3: 문자 모두 분리
const word = "hello";
const chars = word.split("");
console.log(chars); // ["h", "e", "l", "l", "o"]매개변수로 “” 길이 0인 문자열을 전달하면 원본 문자열의 모든 문자를 배열로 분리합니다.
spread 연산자 사용
spread(전개) 연산자 ... 은 반복 가능한 객체(Iterable)를 펼쳐서 배열로 만듭니다.
문자열은 반복 가능한 객체이므로 문자 단위로 배열로 변환됩니다.
예제 1:
const text = "hello";
const arr = [...text];
console.log(arr); // ["h", "e", "l", "l", "o"]이 방법은 유니코드 문자열도 잘 처리합니다.
Array.from() 사용
Array.from() 메소드는 array like 배열 객체나 iterable 객체를 진짜 배열로 바꿔줍니다.
예제 1: 기본
const str = "hello";
const arr = Array.from(str);
console.log(arr); // ["h", "e", "l", "l", "o"]여기서 문자열은 반복 가능한 객체(Iterable) 이므로 Array.from() 메소드를 사용해 모든 문자를 배열로 바꿀 수 있습니다.
예제 2: 콜백으로 사용
const str = "1234";
const numArr = Array.from(str, x => Number(x));
console.log(numArr); // [1, 2, 3, 4]문자열의 모든 문자를 배열로 바꾸는 도중 콜백함수로 값을 받아 적당한 처리를 할 수도 있습니다.
위의 예제에서는 문자 “1”, “2”, “3”, “4”를 각각 콜백함수로 받아서 Number 객체를 통해 숫자 1, 2, 3, 4로 바꿨습니다.
정규표현식으로 문자열을 배열로 변환
split() 메소드에서는 구분자로 정규표현식을 사용할 수 있습니다.
이렇게 하면 복잡한 패턴으로 문자열을 나눌 수 있습니다.
const messy = "one,,two;;;three four";
const words = messy.split(/[,\s;]+/);
console.log(words); // ["one", "two", "three", "four"]이전 예제에서 공백이나 쉼표를 사용하여 한 가지 방법으로만 문자열을 나눴는데 위와 같이 정규표현식을 사용하면 여러가지 패턴으로 문자열을 나눌 수 있습니다.
JSON 문자열을 배열로 변환
문자열이 배열 형태의 JSON 문자열인 경우 JSON.parse() 메소드를 사용하여 바로 배열로 변환할 수 있습니다.
const jsonStr = '["apple", "banana", "cherry"]';
const arr = JSON.parse(jsonStr);
console.log(arr); // ["apple", "banana", "cherry"]이 방법을 사용하려면 문자열이 JSON 규칙을 따르는 구조여야합니다.
외부 파일에 JSON 데이터가 들어있다면 이 파일을 읽었을 때 JSON 형태의 문자열로 읽혀지므로 JSON.parse() 메소드를 통해 간편히 변환할 수 있습니다.
문자열을 배열로 변환 정리
- split(): 구분자를 기준으로 배열로 변환
- …str: 문자 하나하나를 배열 요소로 만들기
- Array.from(): iterable 객체를 배열로 변환
- JSON.parse(): JSON 형식의 문자열을 파싱
- 정규표현식: 복잡한 구분자를 처리 가능