Cómo indexar, dividir y manipular cadenas en JavaScript

Introducción

Una cadena es una secuencia de uno o más caracteres que pueden ser letras, números o símbolos. Se puede acceder a cada carácter de una cadena de JavaScript mediante un número de índice, y todas las cadenas tienen métodos y propiedades disponibles para ellas.

En este tutorial, aprenderemos la diferencia entre las primitivas de cadena y el objeto String, cómo indexar cadenas, cómo acceder a los caracteres de una cadena, y las propiedades y métodos comunes utilizados en las cadenas.

Las primitivas de cadena y los objetos String

Primero, aclararemos los dos tipos de cadenas. JavaScript distingue entre la primitiva de cadena, un tipo de datos inmutable, y el objeto String.

Para probar la diferencia entre ambos tipos, inicializaremos una primitiva de cadena y un objeto de cadena.

// Initializing a new string primitive
const stringPrimitive = "A new string.";

// Initializing a new String object
const stringObject = new String("A new string.");  

Podemos usar el operador typeof para determinar el tipo de un valor. En el primer ejemplo, simplemente asignamos una cadena a una variable.

typeof stringPrimitive;

Output
string

En el segundo ejemplo, usamos new String() para crear un objeto de cadena y asignarlo a una variable.

typeof stringObject;

Output
object

La mayoría de veces se crearán primitivas de cadena. JavaScript puede acceder y usar las propiedades y los métodos incorporados de la envoltura de objetos String sin cambiar realmente la primitiva de cadena que se creó en un objeto.

Aunque este concepto es un poco desafiante al principio, debe tener en cuenta la diferencia entre primitivos y objetos. Esencialmente, hay métodos y propiedades disponibles para todas las cadenas, y en segundo plano JavaScript realizará una conversión a objeto y de vuelta a primitivo cada vez que se invoque un método o propiedad.

Cómo se indexan las cadenas

Cada uno de los caracteres de una cadena corresponden a un número de índice, comenzando por 0.

Para demostrarlo, crearemos una cadena con el valor How are you?.

El primer carácter de la cadena es H, que corresponde al índice 0. El último carácter es ?, que corresponde a 11. Los caracteres de espacio en blanco también tienen un índice, el 3 y 7.

El hecho de poder acceder a todos los caracteres de una cadena nos permite trabajar con ella y manipularla de varias maneras.

Acceso a los caracteres

Vamos a demostrar cómo acceder a los caracteres e índices con la cadena How are you? .

"How are you?";

Utilizando la notación de corchetes, podemos acceder a cualquier carácter de la cadena.

"How are you?"[5];

Output
r

También podemos usar el método charAt() para devolver el carácter usando el número de índice como parámetro.

"How are you?".charAt(5);

Output
r

De manera alternativa, podemos usar indexOf() para devolver el número de índice por la primera instancia de un carácter.

"How are you?".indexOf("o");

Output
1

Aunque “o” aparece dos veces en la cadena How are you?, indexOf() obtendrá la primera instancia.

lastIndexOf() se utiliza para encontrar la última instancia.

"How are you?".lastIndexOf("o");

Output
9

Para ambos métodos, también puede buscar varios caracteres en la cadena. Devolverá el número de índice del primer carácter de la instancia.

"How are you?".indexOf("are");

Output
4

Por otro lado, el método slice() devuelve los caracteres entre dos números de índice. El primer parámetro será el número de índice de inicio y el segundo parámetro será el número de índice donde debe terminar.

"How are you?".slice(8, 11);

Output
you

Tenga en cuenta que 11 es ?, pero ? no forma parte del resultado devuelto. slice() devolverá lo que está en el medio, pero no incluirá el último parámetro.

Si no se incluye un segundo parámetro, slice() devolverá todo en el resultado, desde el parámetro hasta el final de la cadena.

"How are you?".slice(8);

Output
you?

Para resumir, charAt() y slice() ayudarán a devolver valores de cadena basados en números de índice, e indexOf() y lastIndexOf() harán lo opuesto y devolverán los números de índice basados en los caracteres de cadena proporcionados.

Búsqueda de la longitud de una cadena

Al usar la propiedad length, podemos devolver el número de caracteres en una cadena.

"How are you?".length;

Output
12

Recuerde que la propiedad length devuelve el número real de caracteres comenzando por 1, que salen en 12, no el número de índice final, que comienza en 0 y termina en 11.

Conversión a mayúsculas o minúsculas

Los dos métodos incorporados toUpperCase() y toLowerCase() son formas útiles de dar formato al texto y hacer comparaciones textuales en JavaScript.

toUpperCase() convertirá todos los caracteres en mayúsculas.

"How are you?".toUpperCase();

Output
HOW ARE YOU?

toLowerCase() convertirá todos los caracteres en minúsculas.

"How are you?".toLowerCase();

Output
how are you?

Estos dos métodos para crear formato no requieren parámetros adicionales.

Cabe destacar que estos métodos no modifican la cadena original.

División de cadenas

JavaScript tiene un método muy útil para dividir una cadena por un carácter y crear una nueva matriz desde las secciones. Usaremos el método split() para separar la matriz por un carácter de espacio en blanco, representado por " ".

const originalString = "How are you?";

// Split string by whitespace character
const splitString = originalString.split(" ");

console.log(splitString);

Output
[ 'How', 'are', 'you?' ]

Ahora que tenemos una nueva matriz en la variable splitString, podemos acceder a cada sección con un número de índice.

splitString[1];

Output
are

Si se proporciona un parámetro vacío, split() creará una matriz separada por comas con cada carácter de la cadena.

Al dividir cadenas, se puede determinar la cantidad de palabras en una frase y usar el método como una forma de determinar los nombres y apellidos de las personas, por ejemplo.

Recorte de espacios en blanco

El método trim() de JavaScript elimina los espacios en blanco de los dos extremos de una cadena, pero no en el medio de la misma. Los espacios en blanco pueden ser tabulaciones o espacios.

const tooMuchWhitespace = "     How are you?     ";

const trimmed = tooMuchWhitespace.trim();

console.log(trimmed);

Output
How are you?

El método trim() es una forma sencilla de realizar la tarea común de eliminar el exceso de espacios en blanco.

Búsqueda y sustitución de valores de cadenas

Podemos buscar un valor en una cadena y sustituirlo por un nuevo valor usando el método replace(). El primer parámetro será el valor que a encontrar, y el segundo parámetro será el valor a sustituir.

const originalString = "How are you?"

// Replace the first instance of "How" with "Where"
const newString = originalString.replace("How", "Where");

console.log(newString);

Output
Where are you?

Además de poder sustituir un valor con otro valor de cadena, también podemos usar las Expresiones regulares para hacer que replace() sea más potente. Por ejemplo, replace() solo afecta al primer valor, pero podemos usar el indicador (global) g para capturar todas las instancias de un valor y el indicador (que no distingue entre mayúsculas y minúsculas) i para ignorar las mayúsculas y minúsculas.

const originalString = "Javascript is a programming language. I'm learning javascript."

// Search string for "javascript" and replace with "JavaScript"
const newString = originalString.replace(/javascript/gi, "JavaScript");

console.log(newString);

Output
JavaScript is a programming language. I'm learning JavaScript.

Esta es una tarea muy común que utiliza las Expresiones regulares. Visite Regexr para practicar más ejemplos de expresiones regulares (RegEx).

Conclusión

Las cadenas son uno de los tipos de datos usados con mayor frecuencia, y hay muchas cosas que podemos hacer con ellas.

En este tutorial, aprendimos la diferencia entre una primitiva de cadena y un objeto String, cómo indexar las cadenas y cómo utilizar los métodos y propiedades incorporados de las cadenas para acceder a los caracteres, dar formato al texto y las cadenas (encontrando) formateando, y encontrar y reemplazar valores.

Para una descripción más general sobre las cadenas, consulte el tutorial “Cómo trabajar con cadenas en JavaScript”.