Depende do que você entende por "caractere".
As outras respostas funcionam muito bem no "mundo ASCII", mas hoje em dia a definição de caractere se tornou tão complicada que acho que vale a pena explorar algumas possibilidades.
Isso não quer dizer que as outras respostas estão erradas, apenas que há mais casos a serem considerados além do que já foi apresentado. Até porque há muitas situações nas quais você não vai precisar se preocupar com o que vem a seguir (mas ainda sim acho válido conhecer, pois se um dia precisar, está aí).
Mas antes, apenas para acrescentar mais uma opção às demais respostas, você pode usar Array.from
:
console.log(Array.from('oi'));
Agora vamos aos casos em que tudo isso falha:
function test(s) {
console.log(`Testando string ${s}:`);
console.log('split=', s.split(''));
console.log('spread=', [...s]);
console.log('Array.from=', Array.from(s));
}
test('á'); // funciona, todos os arrays terão apenas um caractere ("á")
test('á'); // ops, todos os arrays tem 2 elementos
O que acontece é que o primeiro "á" está normalizado na forma NFC, e o segundo, na forma NFD. Para entender em detalhes o que é isso, sugiro ler aqui, aqui e aqui. Mas de forma bem resumida, o caractere "á" pode ser representado de duas formas: NFC ou "composta" (ou seja, como um único caractere, o "á") e NFD ou "decomposta" (como dois caracteres: a letra "a" sem acento e o próprio acento, separadamente). Ao serem mostrados na tela, ambos são iguais, mas se você "escovar os bits", verá que um deles possui na verdade dois "caracteres" (que ao serem mostrados na tela, são "combinados" em um só). Só que todos os métodos acima (split
, spread, Array.from
) levam isso em conta na hora de montar o array, e é por isso que no segundo caso cada array tem dois elementos.
Uma alternativa é normalizar para NFC, usando o método normalize
:
console.log('Array.from=', Array.from(stringQualquer.normalize('NFC')));
A menos, é claro, que você de fato queira ter os acentos separados das letras, aí você normaliza para NFD.
Mas isso ainda não resolve todos os casos...
Emojis
Emojis são caracteres? A discussão não vem ao caso, mas o fato é que hoje podemos ter strings assim:
let poo = '💩';
console.log(poo);
Sim, um emoji direto no código. E nesse caso, split
não funciona mais:
function test(s) {
console.log(`Testando string ${s}:`);
console.log('split=', s.split(''));
console.log('spread=', [...s]);
console.log('Array.from=', Array.from(s));
}
test('💩');
Tanto spread quando Array.from
geram um array contendo apenas um elemento: o "caractere" 💩 (PILE OF POO). Mas split
gerou um array com dois elementos. Isso acontece porque internamente o JavaScript guarda as strings em UTF-16 (ou UCS-2, veja mais detalhes aqui) e caracteres cujo code point é maior que 0xFFFF acabam sendo "decompostos" em duas partes (o chamado surrogate pair - o algoritmo é descrito aqui, caso tenha ficado curioso).
No caso do PILE OF POO, seu code point é 0x1F4A9, que em UTF-16 é convertido para o surrogate pair 0xD83D e 0xDCA9, e são esses valores que estão no array gerado por split
:
console.log('💩'.split('').map(c => c.codePointAt(0).toString(16)));
Este comportamento do split
é explicado em mais detalhes aqui.
No fim, não importa se emojis são considerados caracteres ou não. O fato é que, se você tiver uma string contendo emojis e quiser gerar um array a partir dela, o que é "melhor": que cada elemento do array seja um emoji, ou que os emojis sejam quebrados em surrogate pairs? Claro que a resposta ainda será "depende" (pode ter um caso de uso em que você precise saber dos surrogate pairs), mas entendo que na maioria dos casos você provavelmente vai querer um array de emojis.
"Então basta usar spread ou Array.from
, e normalizar para NFC, que tudo funciona, certo?"
Errado
Geralmente os emojis correspondem a um code point (como o PILE OF POO, que é 0x1F4A9), mas nem sempre é o caso. Os emojis de famílias, por exemplo, são combinações de outros emojis.
Ex: uma família com pai, mãe e 2 filhas é na verdade uma combinação do emoji de um homem, uma mulher e dois emojis de menina. Para juntá-los, é usado o caractere ZERO WIDTH JOINER (também chamado apenas de ZWJ - e essas sequências de emojis separados por ZWJ são chamados de Emoji ZWJ Sequences).
Ou seja, o emoji de "família com pai, mãe e 2 filhas" é na verdade uma sequência de sete code points:
Esta sequência de code points pode ser mostrada de diferentes maneiras. Se o sistema/programa usado reconhece esta sequência, é mostrada uma única imagem da família:
Mas se esta sequência não é suportada, os emojis são mostrados um ao lado do outro:
E nesse caso, nenhum dos métodos já vistos acima funciona:
function test(s) {
console.log(`Testando string ${s}:`);
console.log('split=', s.split(''));
console.log('spread=', [...s]);
console.log('Array.from=', Array.from(s));
}
test(String.fromCodePoint(0x1f468, 0x200d, 0x1f469, 0x200d, 0x1f467, 0x200d, 0x1f467));
Repare que split
gerou um array com 11 elementos. Isso porque cada emoji (homem, mulher e os 2 emojis de menina) foi quebrado em um surrogate pair, totalizando 8 elementos. Mais os três ZWJ, totaliza 11. Já o spread e Array.from
retornaram arrays com 7 elementos cada (cada um dos emojis mais os ZWJ).
Vale lembrar que o ZWJ não é usado somente com emojis. Vários outros alfabetos acabam usando-o em alguns dos seus "caracteres", como por exemplo o क्ष
(em Devaganari, usado na Índia), que é composto por 4 code points (sendo um deles o ZWJ):
let s = 'क्ष';
console.log([...s].map(c => c.codePointAt(0).toString(16))); // ["915", "94d", "200d", "937"]
Essas sequências de code points que são interpretados como se fossem uma coisa só são chamados de Grapheme Clusters, e o JavaScript não possui uma forma nativa de obtê-los. Neste caso, o jeito é usar alguma lib.
Enfim, qual método usar vai depender de cada caso. Se você sabe que suas strings só tem caracteres ASCII, por exemplo, não precisa se preocupar com nada disso. Mas se tiver acentos, emojis e caracteres em outros idiomas, aí deve-se pensar no que você de fato precisa, e usar o método mais apropriado para cada caso.