¿Cómo puedo obtener una matriz de caracteres de una cadena?

¿Cómo se convierte una cadena en una matriz de caracteres en JavaScript?

Estoy pensando en obtener una cadena como "Hello world!" a la matriz
['H','e','l','l','o',' ','w','o','r','l','d','!']

Nota: Esto no es compatible con Unicode. "I💖U".split('') da como resultado la matriz de 4 caracteres ["I", "�", "�", "u"] lo que puede conducir a errores peligrosos. Consulte las respuestas a continuación para conocer alternativas seguras.

Simplemente divídalo por una cadena vacía.

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

Ver el String.prototype.split() documentos de MDN.

Como sugiere hippietrail, la respuesta de meder puede romper los pares sustitutos y malinterpretar los “caracteres”. Por ejemplo:

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

Sugiero usar una de las siguientes funciones de ES2015 para manejar correctamente estas secuencias de caracteres.

Difundir sintaxis (ya respondida por insertusernamehere)

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

Array.from

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

RegExp u bandera

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

Usar /(?=[\s\S])/u en lugar de /(?=.)/u porque . no coincide con las nuevas líneas. Si todavía está en la era ES5.1 (o si su navegador no maneja esta expresión regular correctamente, como Edge), puede usar la siguiente alternativa (transpilada por Babel). Tenga en cuenta que Babel también intenta manejar sustitutos no coincidentes correctamente. Sin embargo, esto no parece funcionar para sustitutos bajos sin igual.

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

Método de reducción (ya respondido por Mark Amery)

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

El spread Sintaxis

Puedes usar el sintaxis extendidaun inicializador de matriz introducido en Estándar ECMAScript 2015 (ES6):

var arr = [...str];

Ejemplos

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

Los tres primeros dan como resultado:

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

El último resulta

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

Compatibilidad con navegador

Comprobar el Tabla de compatibilidad de ECMAScript ES6.

Otras lecturas

• MDN: sintaxis extendida
• ECMAScript 2015 (ES6): 12.2.5 Inicializador de matriz

spread también se menciona como “splat” (por ejemplo, en PHP o Rubí o como “scatter” (por ejemplo, en Pitón).

Manifestación

Probar antes de comprar

Hay (al menos) tres cosas diferentes que podría concebir como un “personaje” y, en consecuencia, tres categorías diferentes de enfoque que podría querer usar.

División en unidades de código UTF-16

Las cadenas de JavaScript se inventaron originalmente como secuencias de unidades de código UTF-16, en un momento de la historia en el que había una relación uno a uno entre las unidades de código UTF-16 y los puntos de código Unicode. El .length propiedad de una cadena mide su longitud en unidades de código UTF-16, y cuando lo hace someString[i] obtienes el iª unidad de código UTF-16 de someString.

En consecuencia, puede obtener una matriz de unidades de código UTF-16 de una cadena mediante el uso de un ciclo for de estilo C con una variable de índice…

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

También hay varias formas cortas de lograr lo mismo, como usar .split() con la cadena vacía como separador:

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

Sin embargo, si su cadena contiene puntos de código que se componen de varias unidades de código UTF-16, esto los dividirá en unidades de código individuales, lo que puede no ser lo que desea. Por ejemplo, la cadena '𝟘𝟙𝟚𝟛' se compone de cuatro puntos de código Unicode (puntos de código 0x1D7D8 a 0x1D7DB) que, en UTF-16, se componen cada uno de dos unidades de código UTF-16. Si dividimos esa cadena usando los métodos anteriores, obtendremos una matriz de ocho unidades de código:

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

División en puntos de código Unicode

Entonces, ¡tal vez queramos dividir nuestra cadena en puntos de código Unicode! Eso ha sido posible desde que ECMAScript 2015 agregó el concepto de un iterable al idioma Las cadenas ahora son iterables, y cuando itera sobre ellas (por ejemplo, con un for...of bucle), obtiene puntos de código Unicode, no unidades de código UTF-16:

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

Podemos acortar esto usando Array.fromque itera sobre el iterable que se pasa implícitamente:

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

Sin embargo, los puntos de código Unicode no son lo más grande posible que podría considerarse un “carácter” cualquiera. Algunos ejemplos de cosas que razonablemente podrían considerarse un solo “carácter” pero que se componen de múltiples puntos de código incluyen:

• Caracteres acentuados, si el acento se aplica con un punto de código de combinación
• Banderas
• algunos emojis

Podemos ver a continuación que si intentamos convertir una cadena con tales caracteres en una matriz a través del mecanismo de iteración anterior, los caracteres terminan divididos en la matriz resultante. (En caso de que alguno de los caracteres no aparezca en su sistema, yourString abajo consta de un capitel A con acento agudo, seguida de la bandera del Reino Unido, seguida de una mujer negra.)

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

Si queremos mantener cada uno de estos como un solo elemento en nuestra matriz final, entonces necesitamos una matriz de grafemasno puntos de código.

División en grafemas

JavaScript no tiene soporte incorporado para esto, al menos no todavía. Entonces, necesitamos una biblioteca que comprenda e implemente las reglas de Unicode para qué combinación de puntos de código constituyen un grafema. Afortunadamente, existe uno: orling’s divisor de grafema. Querrá instalarlo con npm o, si no está usando npm, descargue el archivo index.js y sírvalo con un <script> etiqueta. Para esta demostración, la cargaré desde jsDelivr.

grapheme-splitter nos da una GraphemeSplitter clase con tres métodos: splitGraphemes, iterateGraphemesy countGraphemes. Naturalmente, queremos 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>

Y ahí estamos: una matriz de tres grafemas, que es probablemente que querías.

También puedes usar Array.from.

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

Este método se ha introducido en ES6.

Referencia

Array.from

Puedes usar el Objeto.asignar función para obtener la salida deseada:

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

No es necesariamente correcto o incorrecto, solo otra opción.

Object.assign se describe bien en el sitio de MDN.

ya lo es:

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

O para una versión más antigua compatible con el navegador, use:

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