Wie kann ich aus einer Zeichenfolge ein Zeichenarray erhalten?

Wie konvertiert man in JavaScript eine Zeichenfolge in ein Zeichenarray?

Ich denke darüber nach, mir eine Saite zu besorgen "Hello world!" zum Array
['H','e','l','l','o',' ','w','o','r','l','d','!']

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

Teilen Sie es einfach durch eine leere Zeichenfolge auf.

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

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

Wie Hippietrail andeutet, kann Meders Antwort Ersatzpaare auflösen und „Zeichen“ falsch interpretieren. Zum Beispiel:

// DO NOT USE THIS!
const a="𝟘𝟙𝟚𝟛".split('');
console.log(a);
// Output: ["�","�","�","�","�","�","�","�"]

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

Spread-Syntax (bereits beantwortet von insertusernamehere)

const a = [...'𝟘𝟙𝟚𝟛'];
console.log(a);

Array.von

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

RegExp u Flagge

const a="𝟘𝟙𝟚𝟛".split(/(?=[\s\S])/u);
console.log(a);

Verwenden /(?=[\s\S])/u anstatt /(?=.)/u Weil . stimmt nicht mit Zeilenumbrüchen überein. 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 die folgende Alternative verwenden (transpiliert von Babel). Beachten Sie, dass Babel versucht, auch nicht übereinstimmende Ersatzzeichen korrekt zu verarbeiten. Dies scheint jedoch bei unübertroffenen niedrigen Surrogaten nicht zu funktionieren.

const a="𝟘𝟙𝟚𝟛".split(/(?=(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]))/);
console.log(a);

A for ... of ... Schleife

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

Der spread Syntax

Du kannst den … benutzen Spread-Syntaxein Array-Initialisierer, eingeführt in ECMAScript 2015 (ES6)-Standard:

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"]

Das 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üf den ECMAScript ES6-Kompatibilitätstabelle.

Weiterführende Literatur

• MDN: Spread-Syntax
• ECMAScript 2015 (ES6): 12.2.5 Array-Initialisierer

spread wird auch bezeichnet als „splat” (z. B. in PHP oder Rubin oder als „scatter” (z. B. in Python).

Demo

Probieren Sie es vor dem Kauf aus

Es gibt (mindestens) drei verschiedene Dinge, die Sie sich als „Charakter“ vorstellen können, und folglich auch drei verschiedene Kategorien von Herangehensweisen, die Sie möglicherweise verwenden möchten.

Aufteilung in UTF-16-Codeeinheiten

JavaScript-Strings 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. Der .length Die Eigenschaft einer Zeichenfolge misst ihre Länge in UTF-16-Codeeinheiten, und wenn Sie dies tun someString[i] Du verstehst das ichDie UTF-16-Codeeinheit von someString.

Folglich können Sie ein Array von UTF-16-Codeeinheiten aus einem String erhalten, 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, dasselbe zu erreichen, wie zum Beispiel die Verwendung .split() mit 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 sie dadurch in einzelne Codeeinheiten aufgeteilt, was möglicherweise nicht Ihren Wünschen entspricht. Zum Beispiel die Zeichenfolge '𝟘𝟙𝟚𝟛' besteht 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 genannten 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);

Aufteilung in Unicode-Codepunkte

Vielleicht möchten wir stattdessen unsere Zeichenfolge in Unicode-Codepunkte aufteilen! Dies ist möglich, seit ECMAScript 2015 das Konzept eines hinzugefügt hat wiederholbar zur Sprache. Strings sind jetzt iterierbar, und wenn Sie über sie iterieren (z. B. mit a for...of Schleife), 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 mit verkürzen Array.fromdas über das iterierbare Element iteriert, das implizit übergeben wird:

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

Unicode-Codepunkte sind jedoch nicht die größtmögliche Größe, die möglicherweise als „Zeichen“ betrachtet werden könnte. entweder. Einige Beispiele für Dinge, die vernünftigerweise als ein einzelnes „Zeichen“ betrachtet werden könnten, aber aus mehreren Codepunkten bestehen, sind:

• Zeichen mit Akzent, wenn der Akzent mit einem kombinierenden Codepunkt angewendet wird
• Flaggen
• Einige Emojis

Wir können unten sehen, dass, wenn wir versuchen, eine Zeichenfolge mit solchen Zeichen über den oben genannten Iterationsmechanismus in ein Array umzuwandeln, die Zeichen im resultierenden Array aufgelöst werden. (Falls eines der Zeichen auf Ihrem System nicht gerendert wird, yourString unten besteht aus einem Kapital A mit scharfem 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 Graphemekeine Codepunkte.

Aufteilung in Grapheme

JavaScript bietet hierfür keine integrierte Unterstützung – zumindest noch nicht. Wir brauchen also eine Bibliothek, die die Unicode-Regeln dafür versteht und implementiert, welche Kombination von Codepunkten ein Graphem darstellt. Zum Glück gibt es eines: Orlings Graphem-Splitter. Sie sollten es mit npm installieren oder, wenn Sie npm nicht verwenden, die Datei index.js herunterladen und sie mit a bereitstellen <script> Schild. Für diese Demo lade ich sie von jsDelivr.

Grapheme-Splitter gibt uns eine GraphemeSplitter Klasse mit drei Methoden: splitGraphemes, iterateGraphemesUnd 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 Anordnung von drei Graphemen wahrscheinlich was du wolltest.

Sie können verwenden Array.from.

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

Diese Methode wurde in ES6 eingeführt.

Referenz

Array.von

Der Array.from() Die statische Methode erstellt eine neue, flach kopierte Datei Array Instanz von einem wiederholbar oder arrayartig Objekt.

Du kannst den … benutzen Objektzuweisung Funktion, um die gewünschte Ausgabe zu erhalten:

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

Es ist nicht unbedingt richtig oder falsch, sondern nur eine weitere Option.

Object.assign ist auf der MDN-Site gut beschrieben.

Es ist bereits:

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'