Una cadena de texto (string) es una estructura de datos que representa una secuencia de caracteres, mientras que un arreglo (array) es una estructura de datos que contiene múltiples elementos o valores.

Sabías que una cadena de texto puede ser dividida y transformada en un arreglo de multiples cadenas de texto? En Javascript podemos hacer esto utilizando el método  split.  Veamos como funciona con algunos ejemplos.

TL;DR

Si sólo estas buscando el código, aquí va:

const editor = 'free code camp'
editor.split(' ') // [ 'free', 'code', 'camp' ]

Sintaxis

De acuerdo con MDN, la sintaxis que necesitamos para dividir una cadena de texto es str.split([separador [, limite ]]). Si lo aplicamos al ejemplo anterior:

  • str es nuestra cadena de texto, la constante editor
  • separador es ' ' y será el valor tomado como punto de referencia para dividir las partes.
  • No existe un limite por lo tanto el arreglo tendrá tantos elementos como partes puedan resultar de la división (en este caso tres).

¿Cuándo necesitamos dividir una cadena de texto de esta manera?

Ejemplo 1: obteniendo una parte de la cadena de texto.

Aquí tenemos un ejemplo común que implica obtener un token desde un encabezado auth que es parte de un sistema de autenticación basado en token.

Si no tienes idea que significa eso, no hay problema.  Todo lo que necesitas saber es que existe una cadena de texto con el valor bearer token, pero sólo necesitamos token (porque es la parte que identifica al usuario):

const authHeader = 'bearer token'
const split = authHeader.split(' ') // (1) [ 'bearer', 'token' ]
const token = split[1] // (2) token

Repasemos lo que ocurre en el código anterior:

  1. La cadena de texto es dividida utilizando ' ' como separador y las partes resultantes son almacenadas en un arreglo.
  2. Accedemos a la segunda entrada de ese arreglo.

Ejemplo 2: aplicar métodos de arreglo a una cadena de texto

Muchas veces el dato que estamos manejando es del tipo cadena de texto, pero necesitamos aplicarle métodos de arreglo (por ejemplo map, filter, or reduce).

Supongamos que tenemos una cadena de texto en código morse y queremos traducirlo: 

const morse = '-.-. --- -.. .'
// (1)
const morseToChar = {
  '-.-.': 'c',
  '-..': 'd',
  '.': 'e',
  '---': 'o',
}

const ArregloMorse = morse.split(' ') // (2) [ '-.-.', '---', '-..', '.' ]
const arregloTexto = arregloMorse.map((char) => morseToChar[char]) // (3) [ 'c', 'o', 'd', 'e' ]
const texto = arregloTexto.join(") // (4)

Veamos que pasa con este código:

  1. Creamos un objeto literal para asignar los caracteres morse al alfabeto
  2. El código morse es dividido y transformado en un arreglo utilizando ' ' como separador.. (Sin ' ' como argumento, terminaríamos con un arreglo conteniendo entradas separadas para cada . y - .)
  3. El arreglo de código morse se asigna/ transforma en un arreglo de texto.
  4. Utilizamos el método join() para crear y devolver una nueva cadena de texto del arreglo, utilizando '' como separador. (Sin '' como argumento el resultado sería c,o,d,e.)

Cómo añadir un límite al split

Como podemos ver en MDN, el método split también puede recibir limite como argumento limitando al número de elementos creados dentro del arreglo resultante. Nunca he necesitado hacer esto, pero veamos como aplicarlo:

const editor = 'free code camp'
editor.split(' ', 1) // [ 'free' ]

En este ejemplo el arreglo resultante sólo contiene el elemento  'free' porque establecimos el límite de un elemento. Sin el argumento, el resultado del arreglo hubiese sido [ 'free', 'code', 'camp' ].

Antes de que te vayas…

Gracias por leer este artículo! Escribo sobre mis experiencias profesionales y educativas como desarrollador de software autodidacta, así que no dudes en visitar mi sitio web o suscribirse a mi boletín para obtener más contenido.

Traducido del artículo de David - JavaScript Split String Example – How to Split a String into an Array in JS