String을 내가 원하는 문자열로 바꾸는 퀘스트가 많다.
어떤 단어를 추출해야 한다던지, 정규식을 사용하여 검사를 해야 한다던지.
쿼리스트링으로 받아온 값을 object안에 넣어야 한다던지 등.

https://www.samanthaming.com/ 에 여러방법이 소개되고 있어 공부를 정리할 겸 글을 올린다.

JavaScript에서 문자열을 문자형 배열로 변환하기

String을 문자 배열로 분할 하는 방법은 split() 이 일반적이고 가장 자주 쓰는 방법이나, ES6가 되면서 더 많은 변환 방법이 추가 되었다.

const string = 'Radagast';

// Option 1
string.split('');

// Option 2
[...string];

// Option 3
Array.from(string);

// Option 4
Object.assign([], string);

// Result :
// ['R', 'a', 'd', 'a', 'g', 'a', 's', 't']

문자형배열

위의 4가지 방법 모두, 단순히 String 을 Array of Charcter 로 바꾸려면 가능하다.

const string = 'hello world';
 
const usingSplit = string.split('');
const usingSpread = [...string];
const usingArrayFrom = Array.from(string);
const usingObjectAssign = Object.assign([], string);

// Result
// [ 'h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd' ]

특정 구분 기호로 분리

만약 특정 단어 (&,-,_...etc)로 구분 하고 싶다면 split() 을 사용해야 한다.

const string = 'split-by-dash';

const usingSplit = string.split('-');
// ['split', 'by', 'dash']

다른 3가지 방법들은 각각의 Character 로만 분리된다.

Emoji 가 포함된 문자열

문자열에 Emoji가 있는 경우 string.split() 과 object.assign()은 피하자!

const string = 'hello🙌';

const usingSplit = string.split('');
const usingObjectAssign = Object.assign([], string);
// ['h', 'e', 'l', 'l', 'o', '�', '�']

split 은 UTF-16 코드 단위로 문자를 구분하는데, Emoji는 UTF-8이기 때문이다.
실제로 '🙌' 이모지의 길이를 출력하면 2가 나온다.

'🙌'.length; // 2

⚠️ Object.assign 주의사항

Object.assign은 실제로 배열을 생성하지 않는다.
The Object.assign() method copies all enumerable own properties from one or more source objects to a target object

여기서 copies all enumerable own properties 라고 설명 되어있는데,
Object.assign 은 원본 문자열에서 모든 속성을 복사 하기 때문에 String 이라는 속성도 복사하는 것이다.

즉, Object.assign([],string) 이 뱉는 결과는 string[] 이 아니라 string 이다.