Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Ahora que hemos analizado los conceptos básicos de las cadenas, aumentemos la velocidad y comencemos a pensar qué operaciones útiles podemos hacer en cadenas con métodos integados, como encontrar la longitud de una cadena de texto, unir y dividir cadenas, sustituyendo un caracter de una cadena por otro, y más.

Prerequisitos: Conocimientos básicos de informática, una comprensión básica de HTML y CSS, una comprensión de lo que es JavaScript.
Objectivo: Comprender que las cadenas son objetos y aprender a usar algunos de los métodos básicos disponibles en esos objetos para manipular cadenas.

Cadenas como objetos

Ya lo dijimos antes, y lo diremos de nuevo — todo es un objeto en JavaScript. Cuando creas una cadena, por ejemplo, usando:

var string = 'This is my string';

Tu variable se convierte en una instancia del objeto cadena y, como resultado, tiene una gran cantidad de propiedades y métodos disponibles. Puedes ver esto si vas a la página de objeto Cadena y miras la lista al costado de la página.

Ahora, antes de que tu cerebro comience a derretirce, ¡no te preocupes! Realmente no necesitas saber acerca de la mayoría de estos principios en su viaje de aprendizaje. Pero hay algunos que posiblemente utilizará con bastante frecuencia así como veremos aquí. 

Ingresemos algunos ejemplos en una nueva consola. A continuación, proporcionamos uno (también puedes abrir esta consola en una ventana o pesataña por separado, o si prefieres usar la consola de desarrolladores del navegador).

Encontrar la longitud de un cadena

Esto es fácil — simplemente usa la propiedad length . Intenta ingresar las siguientes líneas:

var browserType = 'mozilla';
browserType.length;

Esto debería devolver el número 7, porque "mozilla" tiene 7 caracteres. Esto es útil por muchas razones; por ejemplo, es posible que quieras buscar las longitudes de una serie de nombres para que puedas mostrarlos en orden de su longitud, o dejar que un usuario  sepa que un nombre ingresado en un campo de formmulario es demasiado largo o si tiene una longitud determinada.

Extrayendo un específico caracter de la cadena

En una nota relacionada, puedes devolver cualquier carácter de una cadena usando la notación de corchetes — esto significa que incluyes corchetes ([]) al final del nombre de tu variable. Dentro de los corchetes, incluye el número del caracter que deseas extraer, así que, por ejemplo, para extraer la primera letra harías esto:

browserType[0];

¡ Las computadoras cuentan desde 0, no desde 1! Para extraer el último caracter de cualquier cadena, podríamos usar la siguiente línea, combinando esta técnica con la propiedad length que vimos arriba:

browserType[browserType.length-1];

El largo de "mozilla" es 7, pero es prque el contador comienza en 0, la posición del caracter es 6, por lo tanto, necesitamos length-1. Puedes usar esto para, por ejemplo, encontrar la primer letra de una serie de cadenas y ordenarlas alfabéticamente.

Encontrar una subcadena dentro de una cadena y extraerla

  1. Algunas veces querrás encontrar si hay una cadena más pequeña dentro de una más grande (generalmente decimos si una subcadena está presente dentro de una cadena). Esto se puede hacer utilizando el método indexOf(), que toma un único parametro — la subcadena que deseas buscar. Intenta esto:
    browserType.indexOf('zilla');
    Esto nos dá un resultado de 2, porque la subcadena "zilla" comienza en la posición 2 (0, 1, 2  — so 3 characters in) dentro de "mozilla". Tal código podría usarse para filtrar cadena. Por ejemplo, podemos tener una lista de direcciones web y solo queremos imimprimir las que contienen "mozilla".
  1. Esto se puede hacer de otra manera, que posiblemente sea aún más efectiva. Intenta lo siguiente:
    browserType.indexOf('vanilla');
    Esto debería date un resultado de -1 — Esto se devuleve cuando la subcadena, en este caso 'vanilla', no es encontrada en la cadena principal.

    Puedes usar esto para encontrar todas las instancias de las cadenas que no contengan la subcadena 'mozilla', o hacer, si usas el operador de negación, como se muestra a continueción. Podrías hacer algo como esto:
    if(browserType.indexOf('mozilla') !== -1) {
      // do stuff with the string
    }
  2. Cuando sabes donde comienza una subcadena dentro de una cadena, y sabes hasta cuál caracter deseas que termine, puede usarse slice() para extraerla. Prueba lo siguiente:
    browserType.slice(0,3);
    Esto devuelve "moz" — El primer parámetro es la posición del caracte  en la que comenzar a extraer, y el segundo parámetro es la posición del caracter posterior al último a ser extraído. Por lo tanto, el corte ocurre desde la primer posición en adelante, pero excluyendo la última posición. En este ejemplo, dado que el índice inicial es 0, el segundo parámetro es igual a la longitud de la cadena que se devuelve.
     
  3. Además, si sabes que deseas extraer todos los caracteres restantes de una cadena después de cierto caracter, ¡no necesitas incluir el segundo parámetro! En cambio, solo necesitas incluir la posición del caracter desde donde deseas extraer los caracteres restante en la cadena. Prueba lo siguiente:
    browserType.slice(2);
    Esto devuelve "zilla" — debido a que la posición del caracter de 2 es la letra z, y como no incluiste un segundo parámetro, la subcadena que que se devolvío fué el resto de los caracteres de la cadena. 

Nota: El segundo parámetro de slice() es opcional: si no lo incluyes, el corte termina al final de la cadena original. Hay otras opciones también; estudia la página slice() para ver que mas puedes averiguar.

Cambiando todo a mayúscula o minúscula

Los métodos de cadena toLowerCase() y toUpperCase() toman cadena y convierten todos los caracteres a mayúscula o minúscula, respectivamente. Esto puede ser útil, por ejemplo, si deseas normalizar todos los datos ingresados por el usuario antes de almacenarlos en una base de datos.

Intentemos ingresar las siguentes líneas para ver que sucede:

var radData = 'My NaMe Is MuD';
radData.toLowerCase();
radData.toUpperCase();

Actualizando partes de una cadena

En una cadena puedes reemplazar una subcadena por otra usando el método replace(). Esto funciona de manera muy simple a un nivel básico, aunque hay algunas cosas avanzadas que puedes hacer con él en lo que todavía no entraremos.

Toma dos parámetros — la cadena que deseas reemplazar, y la cadena con la que deseas reemplazarla. Prueba este ejemplo:

browserType.replace('moz','van');

Ten en cuenta que para obtener realmente el valor actualizado reflejado en la variable browserType en un programa real, debes establecer que el valor de la variable sea el resultado de la operación; No solo actualiza el valor de la subcadena automáticamente. Así que tendrías que escribir esto: browserType = browserType.replace('moz','van');

Ejemplos de aprendizaje activo

En esta sección, conseguiremos que intentes escribir algún código de manipulación de cadenas. En cada ejercicio a continuación, tenemos una matríz de cadenas y un bucle que procesa cada valor en la matríz y lo muestra en una lista con viñetas. No es necesario que comprendas matrices y bucles en este mismo momento — estos se explicarán en futuros artículos. Todo lo que necesitas hacer en cada caso es escribir el código que dará de salida a las cadenas en el formato que las queremos.

Cada ejemplo viene con un botón de "Reset" , Que puedes utilizar para reestablecer el código si cometes un error y no puedes hacerlo funcionar nuevamente, y un botón "Show solution" que puedes presionar para ver una posible respuesta si te encuentras realmente atorado.

Filtrado de mensajes de saludo

En el primer ejercicio, comenzamos de manera simple — tenemos una matríz de mensajes de tarjetas de felicitación, pero queremos ordenarlos para que aparezcan solo los mensajes de Navidad. Queremos que completes un test condicional dentro de la estructura if( ... ), para comprobar cada cadena y solo imprimirla en la lista si es un mensaje de Navidad.

  1. Primero piensa en cómo puedes probar si el mensaje en cada caso es un mensaje de Navidad. ¿Qué cadena está presente en todos esos mensajes, y qué método podrías usar para comprobar si está presente?
  2. A continuación, deberá escribir un test condicional de la forma operand1 operator operand2. ¿Es lo que está a la izquierda igual a lo que está a la derecha? O en este caso, ¿el método llamado a la izquierda devuelve el resultado a la derecha?
  3. Sugerencia: En este caso, probablemente sea más útil comprobar si la llamada al método no es igual a un determinado resultado.

Corrección de mayúscula

En este ejercicio tenemos los nombres de las ciudades del Reino Unido, Pero las mayúsculas estan completamente desordenadas. Queremos que los cambies para que estén en minúscula, a excepción de la primera letra. Una buena manera de hacerlo es:

  1. Convierte la totalidad de la cadena contenida en la variable input a minúsculas y guárdalas en una nueva vaiable.
  2. Toma la primera letra de la cadena en esta nueva variable y guárdala en otra variable.
  3. Usando esta última variable como una subcadena, reemplaza la primera letra de la cadena en minúscula con la subcadena en mayúscula. Almacena el resultado de este procedimiento de reemplazo en otra nueva variable.
  4. Cambia el valor de la variable result a igual al resultado final. en vez de input.

Nota: Una pista — los parámetros de los métodos de cadena no tienen que ser literales de cadenas; también pueden ser variables, o incluso variables con un método invocados en ellas.

Creando nuevas cadenas de partes viejas

En este último ejercicio, la matríz contiene un conjunto de cadenas que contienen información sobre estaciones de tren en el Norte de Inglaterra. Las cadenas son elementos de datos que contienen el código de estación de tres letras, seguidos de más datos legibles por máquina, seguidos de un punto y coma, seguidos por el nombre de la estación legible por humanos. Por ejemplo:

MAN675847583748sjt567654;Manchester Piccadilly

Queremos extraer el código y el nombre de la estación, y juntarlos en una cadena con la siguiente estructura:

MAN: Manchester Piccadilly

Recomendamos hacerlo así:

  1. Extrae las tres letras del código de estación y almacénalo en una nueva variable.
  2. Encuentra el número de índice de caracter del punto y coma.
  3. Extrae el nombre de la estación legible por humanos utilizando el número de índice de caracter del punto y coma a modo de referencia y guardalo en una nueva variable.
  4. Concatenar las dos nuevas variables y un literal de cadena para hacer la cadena final.
  5. Cambia el valor de la variable de result a igual a la cadena final, no a  input.

Conclusión

No puedes negar el hecho de que ser capaz de manejar palablas y oraciones en la programación es muy importante — especialmente en JavaScript, ya que los sitios web tratan sobre la comunicación con las personas. Este artículo te ha proporcionado los conceptos básicos que necesitas saber sobre la manipulación de cadenas por ahora. Esto debería servirte bien a medida que abordas temas más complejos en el futuro. A continuación, vamos a ver el último tipo importante de datos en el que necesitamos enfocarnos en el corto plazo — matrices.

 

In this module

 

Etiquetas y colaboradores del documento

Colaboradores en esta página: DaniNz
Última actualización por: DaniNz,