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

split javascript array

Question

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

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

Answer 1

Dado que esta pregunta se formuló originalmente hace más de cinco años, las personas siguen haciendo este tipo de tareas. Como sugiere hippietrail , la respuesta de meder puede romper pares sustitutos y malinterpretar "caracteres". Por ejemplo:

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

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

Operador de propagación ( ya contestado por insertusernamehere)

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

Array.from

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

RegExp u flag

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

Use /(?=[/s/S])/u lugar de /(?=.)/u porque . no coincide con las nuevas líneas .

Si aún está en la era ES5.1 (o si su navegador no maneja esta expresión regular de forma correcta, 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 no coincidentes 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>

Answer 2

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

Puede usar la función Object.assign para obtener el resultado deseado:

Object.assign([], "Hello, world!")
[ ''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 de MDN.

Answer 3

No necesitas hacer nada. Ya es matriz de char.

Answer 4

Sin utilizar ninguna función:

function key(e) {
  if (e.keyCode === 13) {
    var st = document.getElementById(''txt'').value;
    var char = [];
    for (var i = 0; i < st.length; i++) {
      char.push(st[i]);
    }
    document.getElementById(''chr'').innerHTML = char;
  }
}

<input type="text" id="txt" onkeypress="key(event)"></input>
<p>Click Enter for char array:</p>
<p id="chr"></p>

Answer 5

También puede utilizar Array.from .

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

Este método ha sido introducido en ES6.

Referencia

Array.from

Answer 6

Ya es:

var mystring = ''foobar'';

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

O para una versión más antigua del navegador, use:

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

Answer 7

La sintaxis spread

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 tres primeros resultados en:

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

El último resulta en

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

Soporte del navegador

Compruebe la tabla de compatibilidad ECMAScript ES6 .

Otras lecturas

• MDN: Operador de propagación
• ECMAScript 2015 (ES6): 12.2.5 Array Initializer

spread también se conoce como " splat " (por ejemplo, en PHP o Ruby o como " scatter " (por ejemplo, en Python ).

Manifestación

Prueba antes de comprar

Answer 8

> "Hello world!".split('''')
["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

Simplemente dividirlo por una cadena vacía.

Consulte String.prototype.split() documentos MDN .