Dividiendo cadenas con el método split()

Manipular cadenas es uno de los trabajos más comunes cuando programamos. Y en este artículo vamos a hablar sobre uno de los métodos esenciales para cadenas, el método split(). También vamos a identificar en qué situaciones puede ayudarnos.

El método split()

Este método convierte una cadena en un array. Podemos decir que "corta" una cadena en varios "pedazos", que son las posiciones del array que se devolverá. Para realizar esta "corte" o separación en la cadena, el método split() se basa en un divisor que informamos como parámetro. Este divisor puede ser cualquier carácter. Cuando se encuentra, este divisor se elimina de la cadena.

Si ya tienes familiaridad con otro lenguaje de programación, como PHP, podemos decir que el split() es como el “explode() de JavaScript”.

Para entender bien este concepto, nada mejor que un buen ejemplo, ¿no es así? Entonces, vamos a desarrollar algunos de ellos ahora!

Ejemplos del método split()

Vamos a crear una variable company, que contendrá una cadena:

let company = "Hcode Treinamentos Você especialista";

Vamos a llamar al método split() en esta variable, informando un espacio para él como parámetro, de esta forma

company.split(' ');

El resultado de este código será el siguiente:

Nota que cada espacio fue excluido y el array retornado contiene cada una de las palabras de nuestra frase. Y como el retorno es un array, podemos usar cualquier método de JavaScript destinado a este tipo de dato para manipular esa información.

Pero, ¿y si desearamos ver una cantidad específica de las palabras de esta frase, como solo las tres primeras palabras? Eso también es posible con el método split(). Espera un segundo parámetro, que es la cantidad límite de posiciones que el array retornado debe tener. En este caso, podríamos usar el siguiente código:

company.split(' ', 3);

El retorno será el siguiente:

Excelente, solo las tres primeras palabras fueron retornadas. Bien interesante, ¿no es así?

Así como podemos ver todas las palabras de nuestra frase en un array, también es posible ver todas las letras de ella. Para esto, basta informar una cadena vacía al método split(), de esta forma:

company.split('');

El resultado será este:

Imagina que deseáramos descubrir la cantidad de vocales o consonantes en esta frase. Usando los métodos de array en conjunto con el retorno del método split(), podríamos realizar este proceso en este caso.

Pero imaginemos una situación: ¿qué sucede si no informamos ningún parámetro para el método split()? Vamos a hacer la prueba, mediante este código:

company.split();

El resultado será el siguiente:

Nota que cuando ocultamos el divisor para la cadena, el método split() aún retorna un array, pero con solo una posición, que es la propia cadena.

Hasta ahora hemos usado espacios como divisores en el método split(). Pero, ¿qué ocurre si informamos una letra? Para descubrir, vamos a usar el siguiente código:

company.split('o');

El resultado será este:

Nota que todas las letras “o” fueron eliminadas de la cadena y las posiciones donde esta vocal fue encontrada en la frase fueron transformadas en índices del array. Hay cuatro elementos en el array. Sabemos que la última posición no tiene la letra informada. Por lo tanto, podemos concluir que esta frase tiene tres letras “o”. Nota en cuántas situaciones interesantes el método split() puede ayudarnos.

Recuerdas que comentamos sobre la posibilidad de usar métodos destinados a arrays al trabajar con el split()? Vamos a hacer un ejemplo sobre eso ahora. Imagina que deseamos invertir el contenido de una frase. Podríamos hacer esto con el siguiente código:

company.split('').reverse().join('');

Explicando: realizamos el split() en el espacio en blanco de la cadena. Ya vimos que este código convertirá nuestra cadena en un array con cada una de sus letras. Luego informamos el método reverse() que, como su nombre indica, hace la “inversión” del array, es decir, invierte sus posiciones. Después informamos el método join(), que convierte un array en una cadena, exactamente lo contrario de split() ?.

El resultado de este código será el siguiente:

Nuestra cadena fue invertida con éxito. Muy genial, ¿no crees?

Otras situaciones en las que podemos usar split()

Quizás nos preguntemos: “¿Pero en qué situaciones del día a día laboral podría usar el método split()?” Además de las situaciones que mencionamos arriba, el método split() puede usarse cuando tenemos una cadena y deseamos seleccionar solo parte de ella.

Ejemplo: imagina que nuestro usuario sube un archivo y queremos saber dinámicamente cuál es el nombre de este archivo y su extensión. El método split() puede ayudarnos. Sabemos que el signo que separa el nombre del archivo de su extensión es el “.” (punto). Ejemplo: hcode.png.

Vamos a crear una función que haga esta división por nosotros. Tendrá la siguiente estructura:

function getNameAndExtensionFromFile(fileName) {
    let result = fileName.split('.');
    return {
        name: result[0],
        extension: result[1]
    };
}

Nota que el nombre del archivo estará en la posición 0 del array, mientras que la extensión estará en la posición 1. Vamos a llamar a esta función:

getNameAndExtensionFromFile('javascript.jpg');

El resultado de esta función es el siguiente:

Las informaciones fueron retornadas correctamente. Si deseáramos insertar esos datos en la base de datos de forma separada, ya estaría todo listo.

Vamos a pensar en otra situación: imagina que tenemos en nuestra base de datos una tabla que almacena los correos electrónicos de nuestros usuarios registrados. Pero, además de guardar el correo por extenso, también deseamos registrar su dominio (gmail.com, hotmail.com, etc.), para poder convertir esta información en algún tipo de informe en el futuro. ¿Cómo podríamos identificar esta información de forma automática en el momento en que el usuario informa su correo electrónico?

Sabemos que el signo que separa el nombre del usuario de su dominio de correo es el “@” (arroba). Así, podríamos tener la siguiente función:

function getUsernameAndDomainFromEmail(email) {
    let result = email.split('@');
    return {
        username: result[0],
        domain: result[1]
    };
}

Vamos a llamar a esta función:

getUsernameAndDomainFromEmail('[email protected]');

El retorno de esta sería el siguiente:

Excelente. Tenemos acceso a la información del correo. Lo mejor es que no fue necesario usar ningún tipo de substring para esto. El método split() ya nos devolvió lo que deseamos.

Puedes encontrar todos los códigos desarrollados en este artículo en nuestro GitHub.

Usamos este método en uno de los proyectos de nuestro Curso Completo de HTML5. Puedes ver un fragmento de esta clase en nuestro canal de YouTube ?.

También, si deseas aprender otros recursos increíbles del lenguaje JavaScript y usarlos para crear proyectos sensacionales, no dejes de hacer nuestro Curso Completo de JavaScript.

Hasta el próximo artículo :)