DEV Community

loading...
Cover image for 6 formas de convertir un String en Array con Javascript

6 formas de convertir un String en Array con Javascript

soyleninjs profile image Lenin Felix Updated on ・3 min read

promo

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.

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"]
Enter fullscreen mode Exit fullscreen mode

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

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

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.

let str = 'Golf | Hockey | Football | Tennis';
let arr = str.split(' | ', 2);
console.log(arr); 
// ['Golf', 'Hockey']
Enter fullscreen mode Exit fullscreen mode

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,

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

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.

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"]
Enter fullscreen mode Exit fullscreen mode

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.

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

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.

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

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.

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

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.

let arr =  JSON.parse('[1, 5, "false"]'); 
console.log(arr); 
console.log(typeof arr); 
// [1, 5, "false"]
// "object"
Enter fullscreen mode Exit fullscreen mode

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


Si te gusto el contenido puedes apoyarme en:

ko-fi


Quieres Ganar Bitcoins y Dogecoins gratis? Da click en el banner!

promo

Discussion (0)

pic
Editor guide