Convertir Strings A Arrays Con JavaScript

En JavaScript, es común manipular strings y arrays. A veces, es posible que debamos convertir un String en un Array para realizar ciertas operaciones. Por suerte, JavaScript proporciona métodos para este propósito.

En este artículo, discutiremos cuatro métodos para convertir Strings en Arrays, cada uno para diferentes casos de uso, por lo que siempre es bueno conocerlos todos.

Si está buscando una respuesta rápida, el siguiente snippet puede ayudarlo:

const text = "¡Hola mundo!";

//
// Convertir en una matriz de caracteres:
//

// Opción 1
text.split('');

// Opción 2
[...text];

// Opción 3
Array.from(text)

// Opción 4
Object.assign([], text);

// Resultado:
// ['h', 'o', 'l', 'a', ' ', 'm', 'u', 'n', 'd', 'o', '!']

//
// Otros separadores
//

text.split();
// Salida: ['¡Hola mundo!']
text.split(' ');
// Salida: ['¡Hola', 'mundo!']

Si desea aprender más sobre cada método, siga leyendo.

Usando Split()

El método split() es un método incorporado en JavaScript que le permite dividir un String en un Array de String según un separador especificado. Es la opción más versátil de esta lista.

Sintaxis

split(separador)
split(separador, limite)

• separador: El patrón que describe dónde debe ocurrir cada separación. Normalmente un String, pero también puede ser una expresión regular. Por defecto, el separador no está especificado, lo que hará que el método split() devuelva un Array con el String dado como un solo elemento.
• limite: Un entero no negativo que especifica el número de Strings que se incluirán en la matriz resultante. Si limite es 0, el resultado sería una matriz vacía: [].

Ejemplos

const testSplit = "¡Hola mundo!";

testSplit.split()
// Resultado: ['¡Hola mundo!']

testSplit.split('')
// Resultado: ['¡', 'H', 'o', 'l', 'a', ' ', 'm', 'u', 'n', 'd', 'o', '!']

testSplit.split(',')
// Resultado: '¡Hola', ' mundo!']

testSplit.split('', 3)
// Resultado: ['¡', 'H', 'o']

const testSplitRegEx = "¿Listo? 1... 2... 3..., ¡ya!"
testSplitRegEx.split(/[0-9]/)
// Resultado: ['¿Listo? ', '... ', '... ', '..., ¡ya!']

Hay algunas precauciones al usar split, por ejemplo, los caracteres especiales como algunos emojis pueden producir resultados inesperados.

const weirdSplit = "🎉 ¡yay!";

weirdSplit.split('')
// Resultado: ['\\uD83C', '\\uDF89', ' ', '¡', 'y', 'a', 'y', '!']

Por lo tanto, si su objetivo es simplemente obtener una matriz de caracteres, el siguiente método sería una mejor opción.

Usando El Operador De Propagación

El operador de propagación es otra forma de convertir un String en un Array de caracteres. Es un método más conciso y moderno que te permite propagar los caracteres de un String en un Array de caracteres.

Este método es simple y fácil de leer, pero puede que no sea tan utilizado como el método split().

Sintaxis

[...cadena]

Ejemplo

const testSpread = "¡Hola mundo!";

[...testSpread]
// Resultado: ['¡', 'H', 'o', 'l', 'a', ' ', 'm', 'u', 'n', 'd', 'o', '!']

Para simplemente obtener un Array de caracteres, el operador de propagación es preferible al método split(), primero porque es más claro y segundo, porque con algunos caracteres, el método split() puede comportarse incorrectamente.

Aquí hay un ejemplo:

const weirdSplit = "🎉 ¡yay";

weirdSplit.split('')
// Resultado: ['\\uD83C', '\\uDF89', ' ', '¡', 'y', 'a', 'y']

[...weirdSplit]
// Resultado: ['🎉', ' ', '¡', 'y', 'a', 'y']

Usando Array.From

Array.from() es un método incorporado en JavaScript que crea un nuevo Array a partir de un objeto iterable, que puede ser un String, un Array o un objeto.

Sintaxis

Array.from(iterable, mapFn, thisArg)

• iterable: Un objeto iterable para convertir en una matriz.
• mapFn (opcional): Una función para asignar cada elemento antes de agregarlo a la matriz.
• thisArg (opcional): Un valor para usar como this al ejecutar el mapFn.

Ejemplo

const testArrayFrom = "¡Hola mundo!";

Array.from(testArrayFrom)
// Resultado: ['¡', 'H', 'o', 'l', 'a', ' ', 'm', 'u', 'n', 'd', 'o', '!']

Array.from() proporciona una forma flexible de convertir un String en un Array. También puede utilizar los segundos y terceros parámetros para manipular cada elemento del Array durante la creación. Por ejemplo:

Array.from('123456', x => x % 2 !== 0);
// Resultado: [true, false, true, false, true, false]

Usando Object.Assign()

Object.assign() es un método de JavaScript que copia los valores de todas las propiedades enumerables de uno o más objetos fuente en un objeto destino.

Sintaxis

Object.assign(destino, ...fuentes)

• destino: El objeto de destino en el que copiar los valores.
• fuentes: El objeto(s) fuente del que copiar los valores.

Ejemplo

const testAssign = "¡Hola mundo!";

Object.assign([], testAssign);
// Resultado: ['¡', 'H', 'o', 'l', 'a', ' ', 'm', 'u', 'n', 'd', 'o', '!']

Object.assign() no se utiliza comúnmente para convertir un String en un Array, pero es bueno saber que se puede hacer. Sin embargo, para este propósito, no es tan eficiente como los otros métodos presentados anteriormente.

Resumen

Como hemos visto, hay varias formas de convertir un String en un Array en JavaScript. Cada método tiene sus fortalezas y debilidades, y la mejor opción dependerá de la situación.

El método split() es la opción más versátil, lo que le permite dividir un String en un Array de caracteres según un separador especificado. Es ampliamente utilizado y proporciona mucha flexibilidad. Sin embargo, puede producir resultados inesperados cuando se usa con caracteres especiales como emojis.

El operador de propagación es un método más conciso y moderno que le permite propagar los caracteres de un String en un Array de caracteres y es mi método preferido para este caso de uso en particular.

Array.from() es una forma flexible de convertir un String en un Array que le permite manipular cada elemento con los parámetros mapFn y thisArg durante la creación. Es un enfoque más funcional, proporcionando más control sobre la creación de el Array.

Por último, Object.assign() también se puede utilizar para convertir un String en un Array. Sin embargo, no se utiliza comúnmente para este propósito, ya que no es tan eficiente como los otros métodos presentados anteriormente.

¡Gracias por leer!

Juan Cruz Martinez

¡Hola!

Soy Juan Cruz Martinez, el fundador de LiveCodeStream.dev. Me encanta programar y creo en el poder de la programación no solo para construir un mundo mejor, sino para hacer que TU vida sea mejor.

Fundé LiveCodeStream.dev porque quería ayudarte a aprender a programar, construir una mejor carrera y, en última instancia, crear una vida mejor. Eso me sucedió hace más de una década cuando comencé a programar, y le sucede a decenas de miles de personas a diario. Quiero que TÚ te unas a esa revolución.

No importa cómo lo llames, escribir código, programación, desarrollo de software o cualquier otra cosa, las habilidades involucradas están en una demanda cada vez mayor. Y ya sea que quieras incursionar en el desarrollo de sitios web, diseño de juegos, desarrollo de blockchain o cualquier otra cosa, quiero ayudarte.