JavaScript에서 문자열을 문자 배열로 가져 오는 방법은 무엇입니까?

JavaScript에서 문자열을 문자형 배열로 어떻게 변환합니까?

"Hello world!"배열 과 같은 문자열을 얻는 것을 생각하고 있습니다.
['H','e','l','l','o',' ','w','o','r','l','d','!']

참고 : 이것은 유니 코드와 호환되지 않습니다. "I💖U".split('')4 개의 문자 배열이 ["I", "�", "�", "u"]발생하여 위험한 버그가 발생할 수 있습니다. 안전한 대안은 아래 답변을 참조하십시오.

빈 문자열로 나누십시오.

var output = "Hello world!".split('');
console.log(output);

String.prototype.split()MDN 문서를 참조하십시오 .

으로 hippietrail 알 , MEDER의 대답은 서로 게이트 쌍과 오해 깰 수 "자." 예를 들면 다음과 같습니다.

// DO NOT USE THIS!
> '𝟘𝟙𝟚𝟛'.split('')
[ '�', '�', '�', '�', '�', '�', '�', '�' ]

이러한 문자 시퀀스를 올바르게 처리하려면 다음 ES2015 기능 중 하나를 사용하는 것이 좋습니다.

(확산 구문 이미 대답 insertusernamehere에 의해)

> [...'𝟘𝟙𝟚𝟛']
[ '𝟘', '𝟙', '𝟚', '𝟛' ]

배열

> Array.from('𝟘𝟙𝟚𝟛')
[ '𝟘', '𝟙', '𝟚', '𝟛' ]

RegExp u플래그

> '𝟘𝟙𝟚𝟛'.split(/(?=[\s\S])/u)
[ '𝟘', '𝟙', '𝟚', '𝟛' ]

사용 /(?=[\s\S])/u대신 /(?=.)/u하기 때문에 .줄 바꿈과 일치하지 않습니다 .

당신이 ES5.1 시대에 여전히 (또는 브라우저가 올바르게 정규식을 처리하지 않는 경우 - 에지 같은) 경우,이 대안을 사용할 수 있습니다 (에 의해 transpiled 바벨 ) :

> '𝟘𝟙𝟚𝟛'.split(/(?=(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]))/);
[ '𝟘', '𝟙', '𝟚', '𝟛' ]

Babel은 일치하지 않는 대리자를 올바르게 처리하려고 시도합니다. 그러나 이것은 대리가 낮은 대리모에 대해서는 효과가없는 것 같습니다.

브라우저에서 모두 테스트하십시오.

function run_test(){
  str=document.getElementById('nonBMP').checked ? '𝟘_NL_𝟙_HIGH_𝟚_LOW_𝟛' : '0_NL_1_HIGH_2_LOW_3';
  str=str.replace('_NL_'  ,document.getElementById('nl'  ).checked ? '\n'          : '');
  str=str.replace('_HIGH_',document.getElementById('high').checked ? '𝟘'.charAt(0) : '');
  str=str.replace('_LOW_' ,document.getElementById('low' ).checked ? '𝟘'.charAt(1) : '');
  
  //wrap all examples into try{ eval(...) } catch {} to aloow script execution if some syntax not supported (for example in Internet Explorer)
        document.getElementById("testString"   ).innerText=JSON.stringify(str);
  try { document.getElementById("splitEmpty"   ).innerText=JSON.stringify(eval('str.split("")'));            } catch(err) { }
  try { document.getElementById("splitRegexDot").innerText=JSON.stringify(eval('str.split(/(?=.)/u)'));      } catch(err) { }
  try { document.getElementById("spread"       ).innerText=JSON.stringify(eval('[...str]'));                 } catch(err) { }
  try { document.getElementById("arrayFrom"    ).innerText=JSON.stringify(eval('Array.from(str)'));          } catch(err) { }
  try { document.getElementById("splitRegex"   ).innerText=JSON.stringify(eval('str.split(/(?=[\\s\\S])/u)')); } catch(err) { }
  try { document.getElementById("splitBabel"   ).innerText=JSON.stringify(eval('str.split(/(?=(?:[\\0-\\uD7FF\\uE000-\\uFFFF]|[\\uD800-\\uDBFF][\\uDC00-\\uDFFF]|[\\uD800-\\uDBFF](?![\\uDC00-\\uDFFF])|(?:[^\\uD800-\\uDBFF]|^)[\\uDC00-\\uDFFF]))/)')); } catch(err) { }
}


document.getElementById('runTest').onclick=run_test;

th, td {
    border: 1px solid black;
    padding: 4px;
}

<div><input type="checkbox" id="nonBMP" checked /><label for="nonBMP">Codepoints above U+FFFF</label></div>
<div><input type="checkbox" id="nl"     checked /><label for="nl"    >Newline</label></div>
<div><input type="checkbox" id="high"           /><label for="high"  >Unmached high surrogate</label></div>
<div><input type="checkbox" id="low"            /><label for="low"   >Unmached low surrogate</label></div>
<button type="button" id="runTest">Run Test!</button>

<table>
  <tr><td>str=</td>                     <td><div id="testString"></div></td></tr>
  <tr><th colspan="2">Wrong:</th></tr>
  <tr><td>str.split("")</td>            <td><div id="splitEmpty"></div></td></tr>
  <tr><td>str.split(/(?=.)/u)</td>      <td><div id="splitRegexDot"></div></td></tr>
  <tr><th colspan="2">Better:</th></tr>
  <tr><td>[...str]</td>                 <td><div id="spread"></div></td></tr>
  <tr><td>Array.from(str)</td>          <td><div id="arrayFrom"></div></td></tr>
  <tr><td>str.split(/(?=[\s\S])/u)</td> <td><div id="splitRegex"></div></td></tr>
  <tr><td>str.split(/(?=(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]))/)</td><td><div id="splitBabel"></div></td></tr>
</table>

spread구문

ECMAScript 2015 (ES6) 표준에 도입 된 Array Initializer 인 spread 구문을 사용할 수 있습니다 .

var arr = [...str];

예

function a() {
    return arguments;
}

var str = 'Hello World';

var arr1 = [...str],
    arr2 = [...'Hello World'],
    arr3 = new Array(...str),
    arr4 = a(...str);

console.log(arr1, arr2, arr3, arr4);

처음 세 결과는 다음과 같습니다.

["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

마지막 결과

{0: "H", 1: "e", 2: "l", 3: "l", 4: "o", 5: " ", 6: "W", 7: "o", 8: "r", 9: "l", 10: "d"}

브라우저 지원

ECMAScript ES6 호환성 표를 확인하십시오 .

추가 자료

• MDN : 스프레드 연산자
• ECMAScript 2015 (ES6) : 12.2.5 어레이 이니셜 라이저

spread" splat"(예 : PHP 또는 Ruby 또는 " scatter"(예 : Python )) 라고도 합니다.

데모

구입하기 전에 시도

을 사용할 수도 있습니다 Array.from.

var m = "Hello world!";
console.log(Array.from(m))

이 방법은 ES6에서 도입되었습니다.

참고

배열

이것은 오래된 질문이지만 아직 나열되지 않은 다른 솔루션을 발견했습니다.

Object.assign 함수를 사용하여 원하는 출력을 얻을 수 있습니다.

var output = Object.assign([], "Hello, world!");
console.log(output);
    // [ 'H', 'e', 'l', 'l', 'o', ',', ' ', 'w', 'o', 'r', 'l', 'd', '!' ]

반드시 옳고 그른 것은 아니며 다른 옵션 일뿐입니다.

Object.assign은 MDN 사이트에 잘 설명되어 있습니다.

이미 다음과 같습니다.

var mystring = 'foobar';
console.log(mystring[0]); // Outputs 'f'
console.log(mystring[3]); // Outputs 'b'

또는 더 오래된 브라우저 친화적 인 버전의 경우 다음을 사용하십시오.

var mystring = 'foobar';
console.log(mystring.charAt(3)); // Outputs 'b'

"캐릭터"로 생각할 수있는 것은 적어도 세 가지가 있으며 결과적으로 세 가지 다른 범주의 접근 방식을 사용할 수 있습니다.

UTF-16 코드 단위로 분할

JavaScript 문자열은 원래 UTF-16 코드 단위와 유니 코드 코드 포인트간에 일대일 관계가 있었을 때 역사상 어느 시점에서 UTF-16 코드 단위의 시퀀스로 발명되었습니다. .length문자열 의 속성은 UTF-16 코드 단위의 길이를 측정하며, 그럴 때 i 번째 UTF-16 코드 단위 someString[i]를 얻습니다.someString .

결과적으로 인덱스 변수와 함께 C 스타일 for-loop를 사용하여 문자열에서 UTF-16 코드 단위 배열을 얻을 수 있습니다 ...

const yourString = 'Hello, World!';
const charArray = [];
for (let i=0; i<=yourString.length; i++) {
    charArray.push(yourString[i]);
}
console.log(charArray);

.split()빈 문자열을 구분 기호로 사용하는 것과 같이 동일한 일을 달성하는 여러 가지 짧은 방법도 있습니다 .

const charArray = 'Hello, World!'.split('');
console.log(charArray);

그러나 문자열에 여러 UTF-16 코드 단위로 구성된 코드 포인트가 포함되어 있으면이를 개별 코드 단위로 분할하므로 원하는 것이 아닐 수 있습니다. 예를 들어 문자열 '𝟘𝟙𝟚𝟛'은 4 개의 유니 코드 코드 포인트 (코드 포인트 0x1D7D8-0x1D7DB)로 구성되며, UTF-16에서는 각각 2 개의 UTF-16 코드 단위로 구성됩니다. 위의 방법을 사용하여 해당 문자열을 분할하면 8 개의 코드 단위 배열이 생성됩니다.

const yourString = '𝟘𝟙𝟚𝟛';
console.log('First code unit:', yourString[0]);
const charArray = yourString.split('');
console.log('charArray:', charArray);

유니 코드 코드 포인트로 분할

따라서 대신 문자열을 유니 코드 코드 포인트로 분할하려고합니다! ECMAScript 2015 가 언어에 iterable 이라는 개념을 추가 한 이후 가능했습니다 . 문자열은 이제 반복 가능하며 반복 할 때 (예 : for...of루프 사용) UTF-16 코드 단위가 아닌 유니 코드 코드 포인트를 얻습니다.

const yourString = '𝟘𝟙𝟚𝟛';
const charArray = [];
for (const char of yourString) {
  charArray.push(char);
}
console.log(charArray);

우리는 이것을 Array.from암시 적으로 전달 된 iterable에 대해 반복 하여 이것을 단축 할 수 있습니다 :

const yourString = '𝟘𝟙𝟚𝟛';
const charArray = Array.from(yourString);
console.log(charArray);

그러나 유니 코드 코드 포인트는 아마도 "문자"로 간주 될 수있는 가장 큰 가능한 것이 아니다 중 하나 . 합리적으로 단일 "문자"로 간주 될 수 있지만 여러 코드 포인트로 구성 될 수있는 몇 가지 예는 다음과 같습니다.

• 악센트가 결합 코드 포인트로 적용된 경우 악센트 문자
• 플래그
• 일부 이모티콘

위의 반복 메커니즘을 통해 이러한 문자가 포함 된 문자열을 배열로 변환하려고하면 결과 배열에서 문자가 분리됩니다. (시스템에서 캐릭터가 렌더링되지 않는 경우 yourString아래는 급성 악센트 가있는 대문자 A , 영국 국기, 흑인 여성으로 구성됩니다.)

const yourString = 'Á🇬🇧👩🏿';
const charArray = Array.from(yourString);
console.log(charArray);

최종 배열에서 이들 각각을 단일 항목으로 유지하려면 코드 포인트가 아닌 graphemes 배열이 필요합니다 .

그래 핀으로 분할

JavaScript는 적어도 아직 지원하지 않습니다. 그래서 우리는 코드 포인트의 조합이 grapheme을 구성하는 유니 코드 규칙을 이해하고 구현하는 라이브러리가 필요합니다. 다행히도 orling의 grapheme-splitter가 있습니다. npm으로 설치하거나 npm을 사용하지 않는 경우 index.js 파일을 다운로드하여<script> 태그 . 이 데모에서는 jsDelivr에서로드하겠습니다.

그래 핀 스플리터는 우리에게 제공합니다 GraphemeSplitter: 세 가지 방법으로 클래스를 splitGraphemes, iterateGraphemes하고 countGraphemes. 당연히, 우리는 원한다 splitGraphemes:

const splitter = new GraphemeSplitter();
const yourString = 'Á🇬🇧👩🏿';
const charArray = splitter.splitGraphemes(yourString);
console.log(charArray);

<script src="https://cdn.jsdelivr.net/npm/grapheme-splitter@1.0.4/index.js"></script>

그리고 거기에 우리는 세 개의 graphemes의 배열입니다 . 아마 당신이 원했던 것일 것입니다.

문자열 길이를 반복 하고 각 위치에서 문자를 푸시 할 수 있습니다 .

const str = 'Hello World';

const stringToArray = (text) => {
  var chars = [];
  for (var i = 0; i < text.length; i++) {
    chars.push(text[i]);
  }
  return chars
}

console.log(stringToArray(str))

간단한 답변 :

let str = 'this is string, length is >26';

console.log([...str]);

하나의 가능성은 다음입니다.

console.log([1, 2, 3].map(e => Math.random().toString(36).slice(2)).join('').split('').map(e => Math.random() > 0.5 ? e.toUpperCase() : e).join(''));

이건 어때요?

function stringToArray(string) {
  let length = string.length;
  let array = new Array(length);
  while (length--) {
    array[length] = string[length];
  }
  return array;
}

Array.prototype.slice 도 작업을 수행합니다.

const result = Array.prototype.slice.call("Hello world!");
console.log(result);