6 formas de convertir un String en Array con Javascript
Tags: showdev, webdev, javascript, tips
Published: 2021-01-20 23:50:25

[![promo](//i0.wp.com/snat.co.uk/wp-content/uploads/2021/05/honeygain-banner.png?fit=728%2C90&ssl=1) ](https://r.honeygain.me/LENIN68FB5)

Una cadena de texto en javascript puede ser convertida en Array con 6 métodos diferentes.

Estaremos viendo:

1. split() 
2. Array.from()
3. [...spread]
4. Object.assign()
5. for loop
6. JSON.parse()

###**split()**

Este método es usado para dividir la cadena de texto basándose en un separador dado para regresar un Array con los elementos separados.

```javascript
let str = 'Leon,Caballo,Iguana,Lobo';
let arr = str.split(','); 
//dividir la cadena de texto por una coma
console.log(arr);
//["Leon", "Caballo", "Iguana", "Lobo"]
```

Si quieres separar una cadena de texto por cada letra que contenga, entonces puedes pasar una cadena vacía (“”) como el separador.

```javascript
let str = 'soylenin';
let arr = str.split('');
console.log(arr); 
// ["s", "o", "y", "l", "e", "n", "i", "n"]
```

El método split() acepta un segundo parámetro en el cual podemos indicar un limite de divisiones. Este limite decide cuántos elementos serán incluidos en el array retornado.

```javascript
let str = 'Golf | Hockey | Football | Tennis';
let arr = str.split(' | ', 2);
console.log(arr); 
// ['Golf', 'Hockey']
```

###**Array.from()**

El método Array.from() retorna un Array a partir de la cadena de texto que se le pasa por parámetro. Solo hay que pasarle una cadena de texto al método .from() para obtener un array con cada letra del texto,

```javascript
let str = 'soylenin';
let arr = Array.from(str);
console.log(arr); 
// ["s", "o", "y", "l", "e", "n", "i", "n"]
```

Este método también acepta dos parámetros opcionales adicionales a nuestra cade de texto. Uno es una función  de map() que se llamara en cada iteración de nuestro array y el otro es una valor que se puede usar como "this" dentro de cada iteración del map.

```javascript
let str = 'soylenin';
let arr = Array.from(str, (val, index) => val + index);
// adding index value to each element of array
console.log(arr); 
// ["s0", "o1", "y2", "l3", "e4", "n5", "i6", "n7"]
```

###**Spread operator**

El spread operator es de la nueva version de ES6 y funciona ya en todos los navegadores. Este nos ayuda extraer y propagar cada letra o character del string utilizado. Nosotros solo tenemos que envolver la propagación de esa cadena dentro de nuestras llaves cuadradas para poder crear un nuevo array a partir del string dado.

```javascript
let str = 'soylenin';
let arr = [...str];
console.log(arr); 
// ["s", "o", "y", "l", "e", "n", "i", "n"]
```

###**Object.assign()**

Este método se utiliza para copiar los valores y propiedades de uno o más objetos de origen a un objeto de destino. Podemos proporcionar una cadena de texto como fuente y una array vacío como destino para crear una matriz a partir de una cadena de texto.

```javascript
let str = 'soylenin';
let arr = Object.assign([], str);
console.log(arr); 
// ["s", "o", "y", "l", "e", "n", "i", "n"]
```

###**For loop**

Nosotros podemos recorrer cada carácter de una cadena usando for loop y empujar ese carácter a una matriz vacía para crear una matriz a partir de la cadena.

```javascript
let str = 'soylenin';
let arr = [];
for(let i of str) {
    arr.push(i);
}
console.log(arr); 
// ["s", "o", "y", "l", "e", "n", "i", "n"]
```

###**JSON.parse()**

Existe una manera extra para convertir un string en array, solo que para este caso nuestra cadena de texto debe contener ya el array.

```javascript
let arr =  JSON.parse('[1, 5, "false"]'); 
console.log(arr); 
console.log(typeof arr); 
// [1, 5, "false"]
// "object"
```

Como veras ya no sera un string, si no que se transforma en un array.


<center>
Si te gusto el contenido puedes apoyarme en:
</center>

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/G2G42SCZF)

<center>
Quieres Ganar Bitcoins y Dogecoins gratis? Da click en el banner!
</center>

[![promo](//i0.wp.com/snat.co.uk/wp-content/uploads/2021/05/honeygain-banner.png?fit=728%2C90&ssl=1) ](https://r.honeygain.me/LENIN68FB5)