4 maneiras de converter seqüência de caracteres em JavaScript

Aqui estão quatro maneiras de dividir uma palavra em uma matriz de caracteres. "Dividir" é a maneira mais comum e mais robusta. Mas com a adição do ES6, há mais ferramentas no arsenal do JS.
Eu sempre gosto de ver todas as maneiras possíveis de resolver algo, porque então você pode escolher a melhor maneira para o seu caso de uso. Além disso, quando você o exibir na base de código de alguém, você o entenderá com facilidade.

const string = 'palavra'; 
// Opção 1 
string.split (''); 
// Opção 2 
[... string]; 
// Opção 3 
Array.from (string); 
// Opção 4 
Object.assign ([], string); 
// Resultado: 
// ['w', 'o', 'r', 'd']

Cenários

Em vez de passar pelos prós e contras de cada maneira é diferente, deixe-me mostrar os diferentes cenários em que um é preferido em relação ao outro.

Matriz de caracteres

Se tudo o que você está fazendo é querer separar a string por cada caractere, todas as maneiras são boas e fornecerão o mesmo resultado

const string = 'oi lá'; 
const usingSplit = string.split (''); 
const usingSpread = [... string]; 
const usingArrayFrom = Array.from (string); 
const usingObjectAssign = Object.assign ([], string); 
// Resultado 
// ['h', 'i', '', 't', 'h', 'e', 'r', 'e']

Separadores específicos

Se você deseja dividir sua string por um caractere específico, split o caminho a seguir.

const string = 'divisão por traço'; 
const usingSplit = string.split ('-'); 
// ['dividir', 'por', 'traço']

As outras maneiras são limitadas apenas por cada caractere de sequência.

const string = 'divisão por traço'; 
const usingSpread = [... string]; 
const usingArrayFrom = Array.from (string); 
const usingObjectAssign = Object.assign ([], string); 
// Resultado: 
// ['s', 'p', 'l', 'i', 't', '-', 'b', 'y', '-', 'd', 'a' , 's', 'h']

Strings contendo Emojis

Se suas seqüências tem emojis, então split ou Object.assign pode não ser a melhor escolha. Vamos ver o que acontece:

const string = 'bolo😋'
; 
const usingSplit = string.split (''); 
const usingObjectAssign = Object.assign ([], string); 
// Resultado 
// ['c', 'a', 'k', 'e', ' ', ' ']

No entanto, se usarmos as outras maneiras, ele funcionará:

const usingSpread = [... string]; 
const usingArrayFrom = Array.from (string); 
// Resultado 
// ['c', 'a', 'k', 'e', '😋']

Isso ocorre porque split separa os caracteres pelas unidades de código UTF-16, o que é problemático porque os caracteres emoji são UTF-8. Se olharmos para o nosso yum emoji, '😋' ele é composto de 2 caracteres, NÃO 1, como percebemos.

'😋'.length; // 2

É o que chamamos de clusters de grafema onde o usuário o percebe como uma única unidade, mas na verdade, é composto de várias unidades. Os métodos mais recentes spread e Array.from estão melhor equipados para lidar com eles e dividirão sua string por grupos.

Uma ressalva sobre Object.assign

Uma coisa a notar Object.assign é que, na verdade, não produz uma matriz pura. Vamos começar com sua definição.

O método Object.assign() copia todas as propriedades próprias e numeráveis de um ou mais objetos de origem para cada objeto de destino.

A chave existe "copia todas as propriedades próprias". Então, o que estamos fazendo aqui Object.assign([], string) é copiar TODAS as nossas propriedades de string para nosso novo array. O que significa que temos uma matriz e mais alguns métodos de string.

Teste TypeScript: a matriz de resultados não é da string[].

Isso é mais evidente se for utilizado o TypeScript. Sinta-se livre para copiar o código e colar, onde você pode passar o mouse sobre a variável para visualizar os tipos. Como este é apenas um artigo, irei colocar somente o resultado aqui para que você possa acompanhar.

const word = 'word'; 
const usingSplit = string.split (''); 
const usingSpread = [... string]; 
const usingArrayFrom = Array.from (string); 
// Resultado: 
// string [] O que significa que é uma matriz de strings

No entanto, se olharmos para o tipo de resultado de Object.assign. Não nos dá uma matriz de strings.

const usingObjectAssign = Object.assign ([], string); 
// Resultado: 
// never [] & "string" o que significa NOT Array of strings

Teste TypeScript: a matriz de resultados pode acessar as propriedades da string.

const string = 'string'; 
const array = []; 
string.bold; // ✅ (método) String.bold (): string 
array.bold; // ❌A propriedade 'bold' não existe no tipo

Isso significa que, se eu chamar bold nossa matriz, ela deve nos dizer que essa propriedade não existe. Pois é exatamente isto que esperamos ver:

Array.from ('string'). Bold; 
// A propriedade 'bold' não existe no tipo

Mas, se chamarmos a matriz bold criada por Object.assign, ela funcionará.

Object.assign ([], 'string'). Bold; 
// (método) String.bold (): string

Isso ocorre porque Object.assign copia todas as propriedades da String original. Aqui está como eu explicaria isso em termos não relacionados ao desenvolvedor.

Você vai a uma loja para comprar um cachorro. Mas então a loja Object.assign vende um cachorro com asas de dragão. Parece super legal, mas não é realmente um animal de estimação amigável para aluguel. Hmm... não acho que este seja o meu melhor exemplo. Mas acho que você entendeu meu ponto de vista?

A conversão parece boa no navegador.

Agora, não acho que esse seja um grande fator, porque:

Parece que os navegadores possuem algum tipo de mecanismo para "com segurança" executar Object.assign ([], "string") e evitar adicionar os métodos dessa string à matriz.

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like