Wie bekomme ich ein Zeichenarray aus einer Zeichenfolge?

Wie konvertiert man in JavaScript eine Zeichenfolge in ein Zeichenarray?

Ich denke, ich bekomme eine Zeichenfolge wie "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. Siehe Antworten unten für 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 andeutet, kann Meders Antwort Ersatzpaare brechen und „Charaktere“ 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 da . stimmt nicht mit Zeilenumbrüchen überein. Wenn Sie sich noch in der ES5.1-Ära befinden (oder wenn Ihr Browser diesen Regex nicht richtig verarbeitet – wie Edge), können Sie die folgende Alternative (transpiled by Babel). Beachten Sie, dass Babel versucht, auch nicht übereinstimmende Surrogate korrekt zu handhaben. Dies scheint jedoch nicht für unerreicht niedrige Surrogate zu funktionieren.

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

Reduce-Methode (bereits von Mark Amery beantwortet)

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

Die spread Syntax

Du kannst den … benutzen Spread-Syntaxein Array-Initialisierer, der in eingeführt wurde 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"]

Letzteres 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.

Weiterlesen

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

spread wird auch bezeichnet als „splat“ (zB im PHP oder Rubin oder als “scatter“ (zB im Python).

Demo

Probieren Sie es vor dem Kauf aus

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.von

Es gibt (mindestens) drei verschiedene Dinge, die Sie sich unter einem „Charakter“ vorstellen können, und folglich drei verschiedene Kategorien von Herangehensweisen, die Sie 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. Die .length -Eigenschaft einer Zeichenfolge misst ihre Länge in UTF-16-Codeeinheiten, und wenn Sie dies tun someString[i] du bekommst die ichte UTF-16-Codeeinheit von someString.

Folglich können Sie ein Array von UTF-16-Codeeinheiten aus einer Zeichenfolge 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 Wege, um dasselbe zu erreichen, wie z. B. using .split() mit dem leeren String 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 obigen Methoden aufteilen, erhalten wir ein Array von 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 unsere Zeichenfolge stattdessen in Unicode-Codepunkte aufteilen! Dies ist möglich, seit ECMAScript 2015 das Konzept einer 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.fromdie über das Iterable iteriert, das implizit übergeben wird:

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

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

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

Wir können unten sehen, dass, wenn wir versuchen, einen String mit solchen Zeichen über den obigen 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 EIN 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 Graphemekeine Codepunkte.

Aufspaltung in Grapheme

JavaScript hat dafür keine eingebaute 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 einen: Orling’s Graphem-Splitter. Sie sollten es mit npm installieren oder, wenn Sie npm nicht verwenden, die Datei index.js herunterladen und mit a bereitstellen <script> Schild. Für diese Demo lade ich sie von jsDelivr.

grapheme-splitter gibt uns a 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 – ein Array aus drei Graphemen, das ist wahrscheinlich was du wolltest.

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

Sie können die Funktion Object.assign verwenden, 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', '!' ]

Nicht unbedingt richtig oder falsch, nur eine weitere Option.

Object.assign ist auf der MDN-Site 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'