remover - string to char array javascript




Como vocΓͺ obtΓ©m uma string para um array de caracteres em JavaScript? (6)

Como essa pergunta é originalmente feita há mais de cinco anos, as pessoas ainda estão errando esse tipo de tarefa. Como hippietrail sugere , a resposta do meder pode quebrar pares substitutos e interpretar erroneamente “caracteres”. Por exemplo:

// DO NOT USE THIS!
> 'πŸ˜πŸ™πŸšπŸ›'.split('')
[ 'οΏ½', 'οΏ½', 'οΏ½', 'οΏ½', 'οΏ½', 'οΏ½', 'οΏ½', 'οΏ½' ]

Sugiro usar um dos seguintes recursos do ES2015 para lidar corretamente com essas seqüências de caracteres.

Spread-operator ( já respondido por insertusernamehere)

> [...'πŸ˜πŸ™πŸšπŸ›']
[ '𝟘', 'πŸ™', '𝟚', 'πŸ›' ]

Array.from

> Array.from('πŸ˜πŸ™πŸšπŸ›')
[ '𝟘', 'πŸ™', '𝟚', 'πŸ›' ]

RegExp u flag

> 'πŸ˜πŸ™πŸšπŸ›'.split(/(?=[\s\S])/u)
[ '𝟘', 'πŸ™', '𝟚', 'πŸ›' ]

Use /(?=[\s\S])/u vez de /(?=.)/u porque . não corresponde a novas linhas .

Se você ainda estiver na era ES5.1 (ou se o seu navegador não manejar esse regex corretamente - como o Edge), você pode usar essa alternativa (transpilada pelo Babel ):

> 'πŸ˜πŸ™πŸšπŸ›'.split(/(?=(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]))/);
[ '𝟘', 'πŸ™', '𝟚', 'πŸ›' ]

Note que o Babel também tenta manipular corretamente os substitutos incomparáveis. No entanto, isso não parece funcionar para substitutos baixos incomparáveis.

Teste tudo no seu 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>

Como você obtém uma string para um array de caracteres em JavaScript?

Estou pensando em pegar uma string como "Hello world!" para o array ['H','e','l','l','o',' ','w','o','r','l','d','!']


Esta é uma pergunta antiga, mas me deparei com outra solução ainda não listada.

Você pode usar a função Object.assign para obter a saída desejada:

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

Não necessariamente certo ou errado, apenas outra opção.

Object.assign é descrito bem no site do MDN.


Mapa de matriz também é uma boa opção

const name = "Hello World !"
const map = Array.prototype.map
const arr = map.call(name, single => {
    return `${single}`
})

console.log(arr) 


Sem usar qualquer função:

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>


Você também pode usar Array.from .

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

Este método foi introduzido no ES6.

Referência

Array.from


A sintaxe de spread

Você pode usar a sintaxe de propagação , um inicializador de matriz introduzido no padrão ECMAScript 2015 (ES6) :

var arr = [...str];

Exemplos

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

Os três primeiros resultam em:

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

O último resulta em

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

Suporte de Navegador

Verifique a tabela de compatibilidade do ECMAScript ES6 .

Leitura adicional

spread também é referenciado como " splat " (por exemplo, em PHP ou Ruby ou como " scatter " (por exemplo, em Python ).

Demonstração

Experimente antes de comprar





character-arrays