JavaScript/문자열

[JavaScript]문자열을 배열로 변환하는 방법

DevStory 2022. 10. 1.

문자열을 배열로 변환하는 방법

JavaScript에서 문자열을 배열로 변환해야 하는 상황이 발생할 수 있습니다.

 

예를 들어, 문자열 "010-1234-5678"에서 하이픈(-)을 기준으로 문자열을 분리하고 분리된 문자열을 배열로 구성할 수 있습니다.

['010', '1234', '5678']

또 다른 상황으로 단일 문자를 요소로 가지는 배열로 변환하거나 크기가 1인 배열로 변환해야 하는 상황이 발생할 수 있습니다.

// 문자열 "010-1234-5678"을 단일 문자로 구성된 배열로 변환
['0', '1', '0', '-', '1', '2', '3', '4', '-', '5', '6', '7', '8']

// 문자열 "010-1234-5678"을 크기가 1인 배열로 변환
['010-1234-5678']

이번 포스팅은 문자열을 배열로 변환할 수 있는 몇 가지 방법을 소개합니다. 


방법 1. 특정 구분자를 기준으로 문자열을 분리

특정 구분자를 기준으로 분리된 문자열을 배열로 구성하고 싶은 경우 split() 메서드를 사용할 수 있습니다.

 

split() 메서드는 분리된 문자열을 요소로 가지는 배열을 반환하고 특정 구분자는 문자열 또는 정규 표현식으로 설정할 수 있습니다.

 

[문자열 기준으로 분리]

다음 예제는 문자열 "010-1234-5678"을 하이픈(-) 기준으로 분리합니다.

const strValue = "010-1234-5678";
const strValueSplit = strValue.split("-");

console.log(strValueSplit); // ['010', '1234', '5678']

 

[정규 표현식 기준으로 분리]

다음 예제는 문자열 "A1B2C3D4E"를 숫자 기준으로 분리합니다.

const strValue = "A1B2C3D4E";
const strValueSplit = strValue.split(/\d/);

console.log(strValueSplit); // ['A', 'B', 'C', 'D', 'E']

split() 메서드 사용 방법은 아래 포스팅에서 세부적으로 설명합니다.

 

[JavaScript]문자열을 분리하는 방법

문자열을 분리하는 방법 JavaScript에서 문자열을 분리해야 하는 상황이 발생할 수 있습니다. 예를 들어, 문자열 "010-1234-5678"에서 하이픈(-)을 기준으로 문자열을 분리할 수 있습니다. ["010", "1234", "

developer-talk.tistory.com


방법 2. 단일 문자를 요소로 가지는 배열로 변환

문자열을 문자로 구성된 배열로 변환하는 방법입니다.

 

[split() 메서드]

split() 메서드의 첫 번째 매개변수로 빈 문자열("")을 전달하여 문자열을 문자로 구성된 배열로 변환합니다.

const strValue = "ABCDE😋";
const strValueSplit = strValue.split("");

console.log(strValueSplit); // ['A', 'B', 'C', 'D', 'E', '\uD83D', '\uDE0B']

split() 메서드는 한 가지 문제점이 있는데, 특정 이모티콘을 1개의 문자로 처리하지 않고 2개의 문자로 처리합니다.

 

특정 이모티콘들은 2개의 문자로 구성되어 있기 때문입니다.

'😋'.length // 2
'⌛'.length // 1

 

[spread 연산자]

spread 연산자인 ...을 사용하여 문자열을 문자로 구성된 배열로 변환합니다.

const strValue = "ABCDE😋";
const strValueSplit = [...strValue];

console.log(strValueSplit); // ['A', 'B', 'C', 'D', 'E', '😋']

 

[Array 클래스의 from 메서드]

Array 클래스의 from() 메서드를 사용하여 문자열을 문자로 구성된 배열로 변환합니다.

const strValue = "ABCDE😋";
const strValueSplit = Array.from(strValue);

console.log(strValueSplit); // ['A', 'B', 'C', 'D', 'E', '😋']

방법 3. 크기가 1인 배열로 변환

split() 메서드에 매개변수를 전달하지 않으면, 크기가 1인 배열을 반환합니다.

const strValue = "ABCDE😋";
const strValueSplit = strValue.split();

console.log(strValueSplit); // ['ABCDE😋']
반응형

댓글