Posiciones y substrings

Hay dos conceptos muy importantes relacionados con todo de lo que hablaremos en este artículo, y son los conceptos substring y posición. Aunque son bastante autoexplicativos, vamos a definirlos.

• Un substring es un fragmento más pequeño que forma parte de un . También se suele hacer referencia a ellos como subcadena o subcadena de texto.

• Una posición (o índice) es un que representa el lugar donde está ubicado un substring, teniendo en cuenta que se empieza a contar en 0. Así pues, la primera letra del tendría el índice 0, la segunda 1, la tercera 2, etc...

Un ejemplo para entenderlo mejor:

"Hola amigos"       // "amigos" es un substring
"Hola amigos"       // la posición o índice de "amigos" es 5
^0123456789

Ahora que tenemos claros estos dos conceptos, vamos a profundizar en métodos que los utilizan.

Obtener posición o índice

Existen varios métodos que permiten darnos información sobre la posición o ubicación que ocupa un determinado carácter o texto. Como ya hemos mencionado, esta posición también suele denominarse índice. Veamos detalladamente dichos métodos:

Carácter en cierta posición

El método .charAt(pos) nos permite comprobar que carácter se encuentra en la posición pos del texto. Este método devolverá un con dicho carácter. En caso de pasarle una posición que no existe o imposible (negativa), simplemente nos devolverá un vacío. El valor por defecto de pos es 0, por lo que si se omite el parámetro, obtendrá el primer elemento.

No obstante, es preferible utilizar el operador [] para obtener el carácter que ocupa una posición, ya que es más corto y rápido de utilizar y mucho más claro.

const name = "Manz";

// Utilizando .charAt
name.charAt();      // 'M'
name.charAt(0);     // 'M'
name.charAt(1);     // 'a'
name.charAt(10);    // ''

// Utilizando operador []
name[];             // ERROR
name[0];            // 'M'
name[1];            // 'a'
name[10];           // undefined

Observa que la diferencia de .charAt() y el operador [], es que para posiciones donde no existe ningún carácter, el primero devuelve "" (cadena de texto vacía) mientras que el segundo devuelve .

Posición de cierto carácter

El método .indexOf(text, from) realiza la función «opuesta» a charAt(). El método .indexOf(text) buscará el subtexto text en nuestro y nos devolverá un con la posición de la primera aparición de dicho subtexto. En caso de no encontrarlo, devolverá -1. El parámetro from es opcional, y es la posición en la que empezará a buscar, que si no se suministra, es 0.

const phrase = "LenguajeJS, página de Javascript";

phrase.indexOf("n");          // 2
phrase.indexOf("n", 3);       // 16
phrase.indexOf("n", 17);      // -1

Posición desde el final

El método lastIndexOf(text, from) funciona exactamente igual que el anterior, sólo que realiza la búsqueda partiendo desde el final de la cadena de texto hacia el principio, de modo que busca primero las últimas apariciones, en lugar de las primeras:

const phrase = "LenguajeJS, página de Javascript";

phrase.lastIndexOf("n");      // 16
phrase.lastIndexOf("n", 3);   // 2
phrase.lastIndexOf("n", 1);   // -1

De la misma forma, se devuelve -1 si no encuentra la ocurrencia, y el parámetro from es opcional, de indicarlo, se comenzará a buscar desde esa posición, hacia el principio del .

Obtener fragmentos (substrings)

Javascript también posee una serie de métodos mediante los cuales podemos crear substrings formados por un fragmento del original. Veamos de que métodos se trata:

Repetir cadena de texto

Mediante el método .repeat() puedes repetir el texto del exactamente el número de veces indicado por parámetro:

const text = "Jamón";

text.repeat(4);     // "JamónJamónJamónJamón"
text.repeat(1);     // "Jamón"
text.repeat(0);     // ""
text.repeat(-1);    // ERROR (Valor negativo)

Fragmento de texto (substring)

Otras de las operaciones fundamentales de los es la posibilidad de extraer fragmentos de texto de un . Para ello, tenemos dos aproximaciones: el método substring() o el método substr().

• El método substring(start, end) devuelve un con el fragmento de texto desde la posición start hasta la posición end. Si se omite el parámetro end, el subtexto abarcará desde start hasta el final.

• El método substr(start, size) devuelve un con el fragmento de texto desde la posición start, hasta la posición start+size. Dicho de otra forma, size será el tamaño del resultante. En el caso de omitirse el parámetro size, se devuelve hasta el final.

Veamos un ejemplo ilustrativo:

const text = "Submarino";

text.substring(3);    // 'marino' (desde el 3 en adelante)
text.substring(3, 5); // 'ma'     (desde el 3, hasta el 5)
text.substr(3);       // 'marino' (desde el 3 en adelante)
text.substr(3, 5);    // 'marin'  (desde el 3, hasta el 3+5)
text.substr(-3);      // 'ino'    (desde la posición 3 desde el final, en adelante)
text.substr(-3, 2);   // 'in'     (desde la posición 3 desde el final, hasta 2 posiciones más)

Observa que el método .substr() con un valor negativo en su primer parámetro start, empieza a contar desde el final. Esto es algo que no ocurre con el método .substring().

Dividir un texto en partes (array)

Un método muy útil y versátil es .split(text). Permite dividir un por el substring text utilizándolo como separador las veces que haga falta. Como resultado, devolverá un con cada una de las partes divididas. Es muy útil para crear arrays, o dividir textos que tienen separadores repetidos (comas, puntos, etc...) en varias partes:

Veamos algunos ejemplos indicando un como separador:

"88.12.44.123".split(".");    // ["88", "12", "44", "123"] (4 elementos)
"1.2.3.4.5".split(".");       // ["1", "2", "3", "4", "5"] (5 elementos)
"Hola a todos".split(" ");    // ["Hola", "a", "todos"] (3 elementos)
"A,B,C,D,E".split(",", 3);    // ["A", "B", "C"] (limitado a los 3 primeros elementos)
"Código".split("");           // ["C", "ó", "d", "i", "g", "o"] (6 elementos)

Observa que en el último ejemplo, el separador es una cadena vacía, es decir, «separar por la unidad más pequeña posible». Al indicar esto, .split() realiza una división carácter por carácter.

Por otro lado, ten en cuenta que también es posible indicar una como primer parámetro y no sólo un , lo que permite realizar separaciones más versátiles y flexibles. Por lo demás, es exactamente igual a los ejemplos anteriores:

// Separa tanto por punto como por coma
"88.12,44.123".split(/[.,]/);    // ["88", "12", "44", "123"] (4 elementos)

En el tema de los arrays veremos un método llamado .join() que es justo el opuesto de .split(). Si split separa un en varios y los guarda en un , join une varios elementos de un añadiéndole el separador indicado y lo convierte en .