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

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

Estoy pensando en obtener una cadena como "Hello world!"en 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"]que puede conducir a errores peligrosos. Vea las respuestas a continuación para alternativas seguras.

Simplemente divídalo por una cadena vacía.

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

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

Como sugiere hippietrail , la respuesta de meder puede romper pares sustitutos y malinterpretar "personajes". Por ejemplo:

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

Sugiero usar una de las siguientes características de ES2015 para manejar correctamente estas secuencias de caracteres.

Sintaxis extendida ( ya respondida por insertusernamehere)

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

Array.from

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

uBandera RegExp

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

Usar en /(?=[\s\S])/ulugar de /(?=.)/uporque .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 esta alternativa (transpilada por Babel ):

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

Tenga en cuenta que Babel también trata de manejar sustitutos inigualables correctamente. Sin embargo, esto no parece funcionar para sustitutos bajos sin igual.

Prueba todo en tu navegador:

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>

La spreadsintaxis

Puede usar la sintaxis de propagación , un Array Initializer introducido en el 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 primeros tres resultan en:

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

El último da como resultado

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

Soporte de navegador

Consulte la tabla de compatibilidad de ECMAScript ES6 .

Otras lecturas

• MDN: operador extendido
• ECMAScript 2015 (ES6): 12.2.5 Array Initializer

spreadtambién se menciona como " splat" (por ejemplo, en PHP o Ruby o como " scatter" (por ejemplo, en Python ).

Manifestación

Probar antes de comprar

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

Esta es una vieja pregunta, pero encontré otra solución que aún no figura en la lista.

Puede usar la función Object.assign 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 necesariamente correcto o incorrecto, solo otra opción.

Object.assign se describe bien en el sitio MDN.

Ya es:

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

O para una versión anterior más amigable para el navegador, use:

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

Hay (al menos) tres cosas diferentes que podría concebir como un "personaje" y, en consecuencia, tres categorías diferentes de enfoque que puede utilizar.

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 punto de la historia cuando había una relación uno a uno entre las unidades de código UTF-16 y los puntos de código Unicode. La .lengthpropiedad de una cadena mide su longitud en unidades de código UTF-16, y cuando lo hace someString[i], obtiene la i ª unidad de código UTF-16 desomeString .

En consecuencia, puede obtener una matriz de unidades de código UTF-16 de una cadena utilizando un bucle 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 están formados por múltiples unidades de código UTF-16, esto los dividirá en unidades de código individuales, que pueden 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, están formados por 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 queremos dividir nuestra cadena en puntos de código Unicode! Eso ha sido posible desde que ECMAScript 2015 agregó el concepto de un iterable al lenguaje. Las cadenas ahora son iterables, y cuando iteras sobre ellas (por ejemplo, con un for...ofbucle), obtienes 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 este uso Array.from, que 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 los más grandes que sea posible que, posiblemente, podría ser considerado un "carácter" o bien . Algunos ejemplos de cosas que razonablemente podrían considerarse un solo "personaje" 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 combinado
• 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, a yourStringcontinuación se incluye una A mayúscula con un 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 nuestro conjunto final, entonces necesitamos un conjunto de grafemas , no puntos de código.

Dividirse en grafemas

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

grafema-divisor nos da una GraphemeSplitterclase con tres métodos: splitGraphemes, iterateGraphemes, y 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/[email protected]/index.js"></script>

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

Puede iterar sobre la longitud de la cadena y empujar el carácter en cada posición :

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

respuesta simple:

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

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

Una posibilidad es la siguiente:

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

¿Qué tal esto?

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

Array.prototype.slice también hará el trabajo.

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