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

다음 네 가지 방법은 한 단어를 하나의 문자 그룹으로 나누는 것이다.'분할'은 가장 흔하고 신뢰할 수 있는 방식이다.그러나 ES6가 추가됨에 따라 JS 무고에는 더 많은 도구가 제공된다🧰
나는 항상 가능한 모든 해결 방법을 보는 것을 좋아한다. 왜냐하면 이렇게 하면 너는 너의 용례를 위해 가장 좋은 방법을 선택할 수 있기 때문이다.또한 누군가의 코드 라이브러리에 나타나는 것을 보면 쉽게 이해할 수 있다👍‬

const string = 'word';

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

// Option 2
[...string];

// Option 3
Array.from(string);

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

// Result:
// ['w', 'o', 'r', 'd']

줄거리

각기 다른 방식의 이해득실을 분석하는 것이 아니다.나는 너에게 다른 장면을 보여 주겠다. 그 중 한 장면이 다른 장면보다 더 환영을 받는다.

문자 배열

만약 네가 모든 문자열 문자로 문자열을 구분하고 싶을 뿐이라면, 모든 방법은 좋은 것이고, 너에게 같은 결과를 줄 것이다

const string = 'hi there';

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

// Result
// [ 'h', 'i', ' ', 't', 'h', 'e', 'r', 'e' ]

특수 분리기

문자열을 특정한 문자로 분할하고 싶다면 split 이 가장 좋은 선택이다.

const string = 'split-by-dash';

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

기타 방법은 모든 문자열의 제한을 받는다

const string = 'split-by-dash';

const usingSpread = [...string];
const usingArrayFrom = Array.from(string);
const usingObjectAssign = Object.assign([], string);

// Result:
// [ 's', 'p', 'l', 'i', 't', '-', 'b', 'y', '-', 'd', 'a', 's', 'h' ]

이모티콘 포함 문자열

문자열에 이모티콘이 포함되어 있다면 split 또는 Object.assign 는 최선의 선택이 아닐 수도 있습니다.무슨 일이 일어날지 봅시다.

const string = 'cake😋';

const usingSplit = string.split('');
const usingObjectAssign = Object.assign([], string);

// Result
// [ 'c', 'a', 'k', 'e', '�', '�' ]

그러나 다른 방법을 사용할 경우 효과가 있습니다.

const usingSpread = [...string];
const usingArrayFrom = Array.from(string);

// Result
// [ 'c', 'a', 'k', 'e', '😋' ]

이는 split가 UTF-16 코드 단원으로 문자를 구분하기 때문에 문제가 있는데, 이모티콘이 UTF-8이기 때문이다.우리yum이모티콘'😋'을 살펴보면 사실상 두 글자로 구성된 것이지 우리가 상상하는 한 글자로 구성된 것이 아니다.

'😋'.length; // 2

이른바 grapheme clusters 사용자들은 그것을 하나의 단원으로 간주하지만, 엔진 뚜껑 아래에서는 사실상 여러 단원으로 구성된다.새로운 방법spread과 Array.from로 이 문제들을 더욱 잘 처리하고 흑연 묶음을 통해 문자열을 분할할 것이다👍

물체에 대한 경고.할당⚠️

주의해야 할 점Object.assign은 실제로 순수조를 생성하지 않았다는 것이다.그것의 정의부터 시작합시다

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object

여기서 관건은'매거할 수 있는 모든 자체 속성을 복제하는 것'이다.따라서, 우리가 여기 Object.assign([], string) 에서 한 일은 모든 문자열 속성을 새 그룹에 복사하는 것입니다.이것은 우리가 하나의 수조와 일부 문자열 방법을 가지고 있다는 것을 의미한다.

TypeScript 테스트: 결과 배열이 문자열 [] 유형이 아닙니다.😱

만약 우리가 타자 스크립트 플레이 gound를 사용한다면, 이 점은 더욱 뚜렷하다.코드를 마음대로 복사해서 playground 에 붙여넣으십시오. 마우스를 변수에 걸어서 유형을 볼 수 있습니다.이것은 단지 한 편의 문장이기 때문에, 나는 결과를 여기에 붙일 것이다. 그러면 너는 따라갈 수 있을 것이다.

const word = 'word';

const usingSplit = string.split('');
const usingSpread = [...string];
const usingArrayFrom = Array.from(string);

// Result:
// string[] 👈 Which means it's an Array of strings

그러나 결과 유형Object.assign을 살펴보면그것은 우리에게 문자열 그룹을 주지 않았다.

const usingObjectAssign = Object.assign([], string);

// Result:
// never[] & "string" 👈 which means NOT Array of strings 😱

TypeScript 테스트:결과 배열에서 문자열 속성에 액세스할 수 있음😱

우리는 aString에만 사용할 수 있는 속성에 접근해서 이 점을 더욱 검사할 수 있다.

const string = 'string';
const array = [];

string.bold; // ✅(method) String.bold(): string
array.bold; //  ❌Property 'bold' does not exist on type

이것은 만약 내가 수조에서 호출된다면 bold 이 속성이 존재하지 않는다는 것을 알려야 한다는 것을 의미한다.이것이 바로 우리가 바라는 것이다.

Array.from('string').bold;
// Property 'bold' does not exist on type

단, bold 에서 만든 가설수 그룹 Object.assign 을 호출하면 작동합니다.😱

Object.assign([], 'string').bold;
// (method) String.bold(): string

☝️ 이것은 Object.assign 원시 문자열의 모든 속성을 복사했기 때문입니다.다음은 내가 어떻게 비개발자의 용어로 그것을 해석하는가이다.너는 상점에 가서 개를 사라.그런데 상점Object.assign에서 용 날개만 있는 개를 팔았어요.멋있게 들리지만 임대 친선형 애완동물은 아니다.은마르코프 모형...나는 이것이 나의 가장 좋은 예라고 생각하지 않는다.내 뜻을 알 것 같아.😂

브라우저에서 변환하는 것은 괜찮을 것 같습니다🙂

지금 나는 이것이 중대한 거래 파괴자라고 생각하지 않는다. 왜냐하면:

It seems that browsers have some kind of mechanism in place to "safely" do Object.assign([], "string") and avoid adding the methods of that string to the array.

이런 지식을 나눠주셔서 감사합니다.👏 그는 또한 타자 스크립트 코드를 만들어서 네가 볼 수 있도록 했다.

지역사회 투입

[@CaptainOrion] (map 함수를 사용하여 문자열을 문자 배열로 변환)🤣

Array.prototype.map.call('word', eachLetter => eachLetter);

// ['w', 'o', 'r', 'd']

: Array.prototype.slice.call('string')나도 할 거야.
안에.코드: 추가 정보: 확장 연산자(두 번째 방법)를 사용하는 것이 String.prototype.split('')(첫 번째 방법)보다 안전합니다. split()는 흔치 않은 문자를 처리할 수 없기 때문입니다.
@faerberr: åæāă 등 특수 문자를 포함하는 문자열이 있습니다. .split('') 방법으로 분리해서 실행할 때 .length 예상 값의 두 배로 되돌아옵니다.spread 연산자로 전환해서 이 문제를 복구했습니다.

리소스

MDN Web Docs: split

MDN Web Docs: spread

MDN Web Docs: Array.from

MDN Web Docs: Object.assign

Stack Overflow: How do I split a string, breaking at a particular character?

Stack Overflow: How do you get a string to a character array in JavaScript?

Stack Overflow: How do I split a string into an array of characters?

Stack Overflow: Convert utf-8 to Unicode to find emoji in string in java

최초 발표www.samanthaming.com

읽어주셔서 감사합니다.❤
인사!||SamanthaMing.com