Wie erhält man eine Zeichenfolge zu einem Zeichenarray in JavaScript?

Wie konvertiert man eine Zeichenfolge in ein Zeichenarray in JavaScript?

Ich denke, einen String wie "Hello world!"das Array zu bekommen
['H','e','l','l','o',' ','w','o','r','l','d','!']

Hinweis: Dies ist nicht Unicode-kompatibel. "I💖U".split('')führt zu einem 4-Zeichen-Array, ["I", "�", "�", "u"]das zu gefährlichen Fehlern führen kann. In den Antworten unten finden Sie sichere Alternativen.

Teilen Sie es einfach durch eine leere Zeichenfolge.

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

Siehe die String.prototype.split()MDN-Dokumente .

Wie Hippietrail vorschlägt , kann die Antwort des Meders Ersatzpaare brechen und „Zeichen“ falsch interpretieren. Zum Beispiel:

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

Ich schlage vor, eine der folgenden ES2015-Funktionen zu verwenden, um diese Zeichenfolgen korrekt zu handhaben.

Spread-Syntax ( bereits von insertusernamehere beantwortet )

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

Array.from

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

RegExp- uFlag

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

Verwenden Sie /(?=[\s\S])/uanstelle von " /(?=.)/uweil" .nicht mit Zeilenumbrüchen übereinstimmt .

Wenn Sie sich noch in der ES5.1-Ära befinden (oder wenn Ihr Browser diesen regulären Ausdruck nicht richtig verarbeitet - wie Edge), können Sie diese Alternative verwenden (von Babel transpiliert ):

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

Beachten Sie, dass Babel versucht, auch nicht übereinstimmende Surrogate korrekt zu behandeln. Dies scheint jedoch nicht für unübertroffene niedrige Surrogate zu funktionieren.

Testen Sie alles in Ihrem Browser:

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>

Die spreadSyntax

Sie können die Spread-Syntax verwenden , einen Array-Initialisierer, der im ECMAScript 2015 (ES6) -Standard eingeführt wurde :

var arr = [...str];

Beispiele

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);

Die ersten drei ergeben:

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

Der letzte ergibt

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

Browser-Unterstützung

Überprüfen Sie die ECMAScript ES6-Kompatibilitätstabelle .

Weiterführende Literatur

• MDN: Spread-Operator
• ECMAScript 2015 (ES6): 12.2.5 Array Initializer

spreadwird auch als " splat" (z. B. in PHP oder Ruby oder als " scatter" (z . B. in Python ) bezeichnet.

Demo

Versuchen Sie es vor dem Kauf

Sie können auch verwenden Array.from.

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

Diese Methode wurde in ES6 eingeführt.

Referenz

Array.from

Dies ist eine alte Frage, aber ich bin auf eine andere Lösung gestoßen, die noch nicht aufgeführt ist.

Mit der Object.assign-Funktion können Sie die gewünschte Ausgabe erhalten:

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

Nicht unbedingt richtig oder falsch, nur eine andere Option.

Object.assign wird am MDN-Standort gut beschrieben.

Es ist schon:

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

Oder verwenden Sie für eine ältere browserfreundliche Version:

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

Es gibt (mindestens) drei verschiedene Dinge, die Sie sich als "Charakter" vorstellen können, und folglich drei verschiedene Kategorien von Ansätzen, die Sie möglicherweise verwenden möchten.

Aufteilung in UTF-16-Codeeinheiten

JavaScript-Zeichenfolgen wurden ursprünglich als Sequenzen von UTF-16-Codeeinheiten erfunden, zu einem Zeitpunkt in der Geschichte, als es eine Eins-zu-Eins-Beziehung zwischen UTF-16-Codeeinheiten und Unicode-Codepunkten gab. Die .lengthEigenschaft eines Strings misst seine Länge in UTF-16-Codeeinheiten, und wenn Sie dies tun, erhalten someString[i]Sie die i- te UTF-16-Codeeinheit von someString.

Folglich können Sie ein Array von UTF-16-Codeeinheiten aus einer Zeichenfolge abrufen, indem Sie eine for-Schleife im C-Stil mit einer Indexvariablen verwenden ...

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

Es gibt auch verschiedene kurze Möglichkeiten, um dasselbe zu erreichen, z. B. die Verwendung .split()der leeren Zeichenfolge als Trennzeichen:

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

Wenn Ihre Zeichenfolge jedoch Codepunkte enthält, die aus mehreren UTF-16-Codeeinheiten bestehen, werden diese in einzelne Codeeinheiten aufgeteilt, die möglicherweise nicht Ihren Wünschen entsprechen. Beispielsweise besteht die Zeichenfolge '𝟘𝟙𝟚𝟛'aus vier Unicode-Codepunkten (Codepunkte 0x1D7D8 bis 0x1D7DB), die in UTF-16 jeweils aus zwei UTF-16-Codeeinheiten bestehen. Wenn wir diese Zeichenfolge mit den oben beschriebenen Methoden aufteilen, erhalten wir ein Array mit acht Codeeinheiten:

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

Aufteilen in Unicode-Codepunkte

Vielleicht möchten wir stattdessen unsere Zeichenfolge in Unicode-Codepunkte aufteilen! Dies ist möglich, seit ECMAScript 2015 der Sprache das Konzept einer Iterierbarkeit hinzugefügt hat . Strings sind jetzt iterabel, und wenn Sie sie durchlaufen (z. B. mit einer for...ofSchleife), erhalten Sie Unicode-Codepunkte, keine UTF-16-Codeeinheiten:

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

Wir können dies verkürzen, indem wir Array.fromüber das Iterable iterieren, das implizit übergeben wird:

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

Unicode-Codepunkte sind jedoch nicht die größtmögliche Sache, die möglicherweise auch als "Zeichen" betrachtet werden könnte . Einige Beispiele für Dinge, die vernünftigerweise als ein einziges "Zeichen" betrachtet werden könnten, aber aus mehreren Codepunkten bestehen, sind:

• Akzentzeichen, wenn der Akzent mit einem kombinierten Codepunkt angewendet wird
• Flaggen
• Einige Emojis

Wir können unten sehen, dass, wenn wir versuchen, eine Zeichenfolge mit solchen Zeichen über den obigen Iterationsmechanismus in ein Array zu konvertieren, die Zeichen im resultierenden Array aufgelöst werden. (Falls eines der Zeichen in Ihrem System nicht gerendert wird, yourStringbesteht es unten aus einem Großbuchstaben A mit akutem Akzent, gefolgt von der Flagge des Vereinigten Königreichs, gefolgt von einer schwarzen Frau.)

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

Wenn wir jedes dieser Elemente als einzelnes Element in unserem endgültigen Array behalten möchten, benötigen wir ein Array von Graphemen , keine Codepunkte.

Aufteilung in Grapheme

JavaScript hat keine integrierte Unterstützung dafür - zumindest noch nicht. Wir brauchen also eine Bibliothek, die die Unicode-Regeln versteht und implementiert, für welche Kombination von Codepunkten ein Graphem besteht. Zum Glück gibt es eines: Orlings Graphemspalter . Sie möchten es mit npm installieren oder, wenn Sie npm nicht verwenden, die Datei index.js herunterladen und mit einem <script>Tag versehen. Für diese Demo werde ich es von jsDelivr laden.

Graphem-Splitter gibt uns eine GraphemeSplitterKlasse mit drei Methoden: splitGraphemes, iterateGraphemes, und countGraphemes. Natürlich wollen wir splitGraphemes:

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.js"></script>

Und da sind wir - eine Reihe von drei Graphemen, was Sie wahrscheinlich wollten.

Sie können über die Länge der Zeichenfolge iterieren und das Zeichen an jeder Position verschieben :

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))

einfache Antwort:

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

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

Eine Möglichkeit ist die nächste:

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(''));

Wie wäre es damit?

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

Array.prototype.slice erledigt die Arbeit ebenfalls.

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