JavaScript에서 문자열을 배열로 변환하는 6가지 방법

배열은 JavaScript에서 가장 강력한 데이터 구조입니다. 문자열을 배열로 변환하여 많은 알고리즘을 풀고 있다는 것을 알게 되었습니다. 그래서 여러 가지 방법을 통합하고 비교하여 동일하게 수행하는 방법을 생각했습니다.

문자열에서 배열로의 변환은 항상 split() 메서드를 사용하여 수행되지만 ES6 이후에는 동일한 작업을 수행할 수 있는 많은 도구가 있습니다. 각 방법을 하나씩 살펴보고 각각의 장단점에 대해 논의해 봅시다.

1. .split('') 사용:

split()는 문자열을 패턴으로 정렬된 목록의 배열로 분할하는 문자열 메서드입니다. 이것은 ES6 방법이며 작업을 완료하는 가장 깨끗한 방법입니다.

////* Seperate string by space character(' ') *////

const myFavShow = 'The Office';
const myFavShowArray = myFavShow.split('');
console.log(myFavShowArray) 
//['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

이 방법의 또 다른 장점은 문자열을 문자나 공백으로 구분할 수 있다는 것입니다. 아래는 우리가 어떻게 할 수 있는지에 대한 예입니다.

////* Seperate string by whitespace(' ') *////
const myFavShow = 'The Office';
const myFavShowArray = myFavShow.split(' ');
console.log(myFavShowArray) //['The', 'Office']

////* Seperate string by a character '-' *////
const favDialogue = 'Thats-what-she-said';
const favDialogueArr = favDialogue.split('-');
console.log(favDialogueArr) //['Thats', 'what', 'she', 'said']

Regex에서도 잘 작동합니다. split() here 의 전체 문서를 찾을 수 있습니다.

이 방법은 문자열 요소를 배열로 완벽하게 분리하지만 한계가 있습니다.

NOTE: This method does not work very well with uncommon Unicode characters. This method returns the Unicode of the characters instead of actual characters which might make our job a bit more complicated(refer here) but the MDN document has been updated so that we can make it work with Unicode if we just include u flag. See here for more information.

"😄😄".split(/(?:)/); // [ "\ud83d", "\ude04", "\ud83d", "\ude04" ]
"😄😄".split(/(?:)/u); // [ "😄", "😄" ]

2. 스프레드 구문 사용([…str])

전환을 매우 쉽게 해주는 ES2015 기능입니다.

const myFavShow = 'The Office'

const myFavShowArray = [...myFavShow]

console.log(myFavShowArray) 
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

또한 split()에 있는 제한이 여기에서 제거된 것도 도움이 됩니다. 아래 예를 고려하십시오. 이 방법을 사용하여 모든 문자를 쉽게 분할할 수 있습니다.

const animal = '🦊🦊'
const animalArr = [...animal]
console.log(animalArr) // ['🦊', '🦊']

3. Array.from(str) 사용:

Array. from() 메서드는 반복 가능 객체 또는 배열과 유사한 객체에서 얕은 복사된 새 Array 인스턴스를 만듭니다.

const myFavShow = 'The Office'

const myFavShowArray = Array.from(myFavShow);

console.log(myFavShowArray) 
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

이 방법은 일반적이지 않은 문자를 처리할 때 문제를 일으키지 않습니다.

const str = '😎😎'
const arr = Array.from(str)
console.log(arr)


// ['😎', '😎']

4. Object.assign([], str) 사용

Object. assign() 메서드는 하나 이상의 소스 개체에서 대상 개체로 모든 속성을 복사합니다. 하지만 이 방법에 대해 염두에 두어야 할 두 가지 사항이 있습니다. 하나는 Object. assign()가 전체 복사라는 속성 값을 복사한다는 것입니다(전체 복사와 얕은 복사의 차이점은 여기 참조). 이 방법을 사용하기 전에 이 점을 염두에 두어야 합니다.

const myFavShow = 'The Office'

const myFavShowArray = Object.assign([], myFavShow);

console.log(myFavShowArray) 
// ['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e']

다른 하나는 split() 방법과 동일한 문제가 있다는 것입니다. 일반적이지 않은 문자를 구분할 수 없습니다(실제 문자 대신 유니코드가 표시됨).

const s = '😄😄'
const a = Object.assign([], s);
console.log(a) // ['\uD83D', '\uDE04', '\uD83D', '\uDE04']

5. 구식 방법 사용( for 루프 및 array.push() )

우리가 가지고 놀 수 있는 많은 옵션이 있지만 for 루프 및 배열 메서드 push()를 사용하여 문자열의 요소를 푸시하는 이 구식 방법을 언급해야 했습니다.

이것은 가장 깔끔한 방법은 아니지만 변화하는 JavaScript의 복잡성에서 벗어나고 싶은 사람을 언급할 가치가 있습니다(다른 방법을 선호하지만).

const s = 'the office';
const a = [];
for (const s2 of s) {
   a.push(s2);
}
console.log(a); 
// ['t', 'h', 'e', ' ', 'o', 'f', 'f', 'i', 'c', 'e']

또한 일반적이지 않은(유니코드) 문자와도 매우 잘 작동합니다. 아래 예를 보십시오.

const s = '𝟘𝟙𝟚𝟛😄😄';
const a = [];
for (const s2 of s) {
   a.push(s2);
}
console.log(a); //['𝟘', '𝟙', '𝟚', '𝟛', '😄', '😄']

6. Array.prototype.slice.call('string') 사용하기

.slice.call() 메서드에 대한 자세한 내용은 이 문서blog를 참조하십시오.

const favShow = Array.prototype.slice.call("The Office!");
console.log(favShow); //['T', 'h', 'e', ' ', 'O', 'f', 'f', 'i', 'c', 'e', '!']

이 방법도 split() 방법과 같은 문제가 있으므로 주의하여 사용하시기 바랍니다.

const favShow = Array.prototype.slice.call("😄😄");
console.log(favShow); //['\uD83D', '\uDE04', '\uD83D', '\uDE04']

참조:

https://stackoverflow.com/questions/96428/how-do-i-split-a-string-breaking-at-a-particular-character

https://stackoverflow.com/questions/4547609/how-to-get-character-array-from-a-string/34717402#34717402

https://www.stevenchang.tw/blog/2020/05/23/JavaScript-slice-call-function

MDN Web Docs: split

MDN Web Docs: spread

MDN Web Docs: Array.from

MDN Web Docs: Object.assign

https://www.samanthaming.com/tidbits/83-4-ways-to-convert-string-to-character-array

결론:

요약하자면 다음은 우리가 작업을 수행할 수 있는 방법입니다.



JavaScript에서 문자열을 배열로 변환하는 6가지 방법입니다. 작업을 완료하기 위해 다른 방법을 사용한 경우 아래에 설명하십시오.

읽어 주셔서 감사합니다!