Cómo convertir una cadena en una matriz en JavaScript

En este tutorial, aprenda a convertir una cadena en una matriz con split(), expresiones regulares (RegEx), el operador de propagación, Array.from() y Object.assign() en JavaScript.

Introducción

Los datos textuales generalmente se almacenan a través de secuencias de caracteres: cadenas. Estas secuencias son, en última instancia, matrices, y la conversión entre las dos estructuras suele ser simple e intuitiva. Ya sea que esté dividiendo una palabra en sus caracteres o una oración en palabras, dividir una cadena en una matriz no es una operación poco común y la mayoría de los lenguajes tienen métodos integrados para esta tarea.

En esta guía, aprenda cómo convertir un String en un Array en JavaScript, con los métodos split(), Object.assign(), Array.from() y spread[...] operador, así como cuándo usar cuál.

Dividir cadena en matriz con split()

El método split() se utiliza para dividir una cadena en una lista ordenada de dos o más subcadenas, según el patrón/divisor/delimitador proporcionado, y lo devuelve. El patrón/divisor/delimitador es el primer parámetro en la llamada del método y puede ser una expresión regular, un carácter único u otra cadena.

If you'd like to learn more about Regular Expressions - read our Guía de expresiones regulares y cadenas coincidentes en JavaScript!

Por ejemplo, supongamos que tenemos una cadena:

1
let quote = 'I am unstoppable!';

Podríamos dividirlo en cada espacio en blanco (descomponiéndolo en palabras), o en cada carácter, o cualquier otro delimitador arbitrario, como 'p':

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// Split string using a whitespace
let array1 = quote.split(' ');
console.log(array1); // ["I", "am", "unstoppable!"]
  
// Splitstring  using an empty string (on each character)
let array2 = quote.split('');
console.log(array2); // ["I", " ", "a", "m", " ", "u", "n", "s", "t", "o", "p", "p", "a", "b", "l", "e", "!"]

// Split string using a specific character
let array3 = quote.split('p');
console.log(array3); // ["I am unsto", "", "able!" ]

Una de las principales desventajas de usar caracteres individuales o incluso cadenas completas es que el enfoque es bastante rígido. No puede hacer coincidir múltiples delimitadores, a menos que use una expresión regular. Por ejemplo, digamos que le gustaría dividir una cadena en frases. Una oración puede terminar con un punto (.), un signo de exclamación (!), un signo de interrogación (?) o tres puntos (...). Cada una de estas son oraciones válidas, pero tendríamos que realizar varias divisiones para que coincidan todas, si tuviéramos que usar caracteres únicos o cadenas.

¡La coincidencia de patrones es donde sobresalen las expresiones regulares! Dividamos una cadena en cada oración, con cualquiera de estos delimitadores finales:

1
2
3
4
let text = "What a big family it was! That would be a big help. The big question was how to end it; Was he there? Terrible occurrence."
let sentences = text.split(/[.,!,?,;,...]/);
    
console.log(sentences); // ["What a big family it was", " That would be a big help", " The big question was how to end it", " Was he there", " Terrible occurrence", ""]

Sin embargo, los delimitadores se pierden. Dividimos en ellos y en el proceso, los eliminamos de la salida. Además, tenemos múltiples espacios en blanco al comienzo de las oraciones, ¡y hay una cadena vacía al final! Esto no quiere decir que split() no funcione bien con Expresiones Regulares, sino que dividir oraciones fuera del texto no se resuelve bien con split(). Aquí es donde podemos usar el método match() en su lugar, que devuelve los patrones coincidentes y sus delimitadores:

1
2
3
4
let text = "What a big family it was! That would be a big help. The big question was how to end it; Was he there? Terrible occurrence."
let sentences = text.match(/[^.!?]+[.!?]+/g);
    
console.log(sentences);  // ["What a big family it was!", " That would be a big help.", " The big question was how to end it; Was he there?", " Terrible occurrence." ]

Again, if you're interested in learning more about Regular Expressions - read our Guía de expresiones regulares y cadenas coincidentes en JavaScript!

{.icon aria-hidden=“true”}

Nota: El método split() toma un segundo parámetro, que especifica el límite de división que puede ocurrir. No altera el número de divisiones y elementos para ajustarse al argumento pasado, sino que realiza la división n veces, desde el principio, y deja de dividir después de eso.

Para limitar el número de divisiones que realizamos, podemos suministrar fácilmente el segundo argumento del método split():

1
2
3
4
let sentence = "The big question was how to end it";
let array = sentence.split(" ", 3); 

console.log(array); // ["The","big","question"]

Un caso de uso común para el método split() es cuando alguien proporciona su nombre completo como una sola cadena:

1
let name = "John Doe"

Aquí, podemos dividir el nombre y guardarlo como diferentes campos de un objeto en la base de datos, por ejemplo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// Split using a space character
let names = name.split(" ");
console.log(names); // ["John","Doe"]
  
// call names by array index
let firstName = names[0];
let lastName = names[1];
  
console.log(firstName); // "John"
console.log(lastName); // "Doe"

En lugar de tener que llamar a obtener ambos elementos usando un índice de matriz, podemos usar la matriz desestructuración para hacer que la asignación sea más limpia:

1
2
let [firstName, lastName] = name.split(' ');
console.log(firstName, lastName); //"John" "Doe"

{.icon aria-hidden=“true”}

Nota: El método split() no admite ciertos caracteres UTF-8, como emojis (es decir, 😄, 😍, ⁣💗), y los reemplazará con un par de ``.

Dividir cadena en matriz con Array.from()

El método from() de la clase Array es el principal competidor del método split(). Se usa para crear una matriz, dada una fuente de datos y, naturalmente, se puede usar para crear una matriz a partir de una cadena iterable:

1
2
3
4
5
6
7
8
let name = "John Doe";
// String to array of chracters
let nameChars = Array.from(name);
console.log(nameChar); //["J","o","h","n"," ","D","o","e"]
  
// Manipulating array
let nameCharsReversed = nameChars.reverse().join('');
console.log(nameCharsReversed); //"eoD nhoJ"

El principal beneficio de usar Array.from() en lugar de split() es que no tiene que molestarse en establecer un delimitador: los elementos constituyentes simplemente se vuelven a exponer y se agregan a una matriz, en lugar de ser convertido explícitamente. Además, el método Array.from() admite caracteres emoji:

1
2
3
let word = "It is sweet 😋";
let wordChars = Array.from(word)
console.log(wordChars); // ["I","t"," ","i","s"," ","s","w","e","e","t"," ","😋"]

Dividir cadena en matriz con el operador de propagación

El Spread Operator tiene varios usos y es un operador ampliamente aplicable en JavaScript. En nuestro contexto, estaríamos más interesados ​​en arreglos en expansión (las cadenas son arreglos de caracteres).

If you'd like to learn more about the Spread Operator - read our Operador de propagación en JavaScript!

La sintaxis del operador es simple y limpia, y podemos extender la cadena en una matriz:

1
2
3
4
5
6
7
8
let name = "John Doe";
// Spread out string into an array
let nameChar = [...name];
console.log(nameChar); //["J","o","h","n"," ","D","o","e"]
  
// Manipulating array
let nameCharReverse = nameChar.reverse().join('');
console.log(nameCharReverse); //"eoD nhoJ"

El operador también trabaja con emojis UTF-8:

1
2
3
let word = "It is sweet 😋";
let wordChar = [...word]
console.log(wordChar); // ["I","t"," ","i","s"," ","s","w","e","e","t"," ","😋"]

Cadena dividida con Object.assign()

El método Object.assign() copia todos los valores y propiedades de un objeto y los asigna a las propiedades de otro. En cierto sentido, se usa para clonar objetos y fusionarlos con las mismas propiedades:

1
Object.assign(target, ...sources)

En nuestro caso, estaríamos copiando y mapeando los valores dentro de una cadena en una matriz:

1
Object.assign([], string)

Este enfoque es un poco más detallado y menos agradable estéticamente que los dos anteriores:

1
2
3
4
5
6
7
8
let name = "John Doe";
// Assigning string values to an array
let nameChar = Object.assign([], name);
console.log(nameChar); //["J","o","h","n"," ","D","o","e"]
  
// Manipulating array
let nameCharReverse = nameChar.reverse().join('');
console.log(nameCharReverse); //"eoD nhoJ"

Vale la pena señalar que Object.assign() no admite caracteres especiales UTF-8 como emojis:

1
2
3
4
let word = "It is sweet 😋";
let wordChars = Object.assign([], word);
  
console.log(wordChars); // ["I","t"," ","i","s"," ","s","w","e","e","t"," ","",""]

Conclusión

En esta breve guía, hemos analizado cómo convertir una cadena en una matriz en JavaScript. Hemos explorado el método split(), que tiene el nivel más alto de personalización, ¡incluida la división en expresiones regulares! Luego, hemos explorado la creación de matrices from() fuentes como cadenas. El operador de propagación funciona muy bien al expandir las cadenas de nuevo a los arreglos, y finalmente hemos cubierto el método Object.assign() para asignar los valores de una cadena a un arreglo.