viernes, 10 de enero de 2014

Tutorial Javascript parte 9 - Manejar Strings (indexOf, match, split, substr, ...)




Bienvenid@s a una nueva parte del tutorial de Javascript, en esta ocasión vamos ver como manejar strings mediante una serie de métodos y propiedades que ofrece Javascript, todo lo que vamos a ver a continuación es muy útil para cuando tengas que manipular strings ya que conocerlo te va a facilitar mucho el trabajo.

Para este parte crea un archivo y guárdalo como strings.js en la carpeta javascript y llama al nuevo archivo en index.html ...

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="javascript/strings.js"></script>
</head>
<body>
</body>
</html>


Un aspecto importante en los strings es el manejo de las comillas simples y dobles, si abres un string, por ejemplo con comillas dobles si vuelves a ingresar comillas dobles en el interior del string vas a obtener un error, para ello debes utilizar la barra invertida \ , por ejemplo ...

//Modo correcto
var string = "me gusta \"javascript\"";

//Modo correcto
var string = 'me gusta \'javascript\'';

//Modo correcto
var string = "me gusta 'javascript'";

//Modo correcto
var string = 'me gusta "javascript"';


El manejo de las comillas es importante conocerlo para que después no tengar errores en la ejecución del script.

Otras utilidades necesarias conocer entre otras son las siguientes ...

La propiedad length: que devuelve la longitud de un string.

El método indexOf: Que busca la primera posición de un string dentro de un string.

El método match: especialmente útil para filtrar datos con expresiones regulares, realiza una búsqueda dentro de un string.

El método replace: Reemplaza strings por otros strings.

El método toUpperCase: Convierte las letras en minúsculas a mayúsculas.

El método toLowerCase: Convierte las letras en mayúsculas a minúsculas.

El método split: Crea un array a partir de un string.

El método substr: Extrae un substring de un string.

El método trim: Elimina los espacios al principio y al final de un string.

Para ver un ejemplo de uso de diferentes métodos y propiedades útiles para el manejo de strings, copia y pega el siguiente código en el archivo strings.js y guárdalo ...

//Accediendo a un determinado carácter de un String
var string = "Coche";
var caracter = string[4];
document.write("<p>" + caracter + "</p>");

//Inclusión de comillas en los strings
var string = "Hola \"mundo\"";
document.write("<p>" + string + "</p>");

//Obtener la longitud de un String
var string = "Cuéntame";
var longitud = string.length;
document.write("<p>" + longitud + "</p>");

//Encontrar la primera posición dentro de un string. indexOf()
var string = "Busca la primera posición de un string";
var posicion = string.indexOf("primera");
document.write("<p>" + posicion + "</p>");

//Realizar una búsqueda un string con match()
var string = "Buscando en este string";
if (string.match("pepito"))
{
document.write("<p>Encontrado</p>");
}
else
{
document.write("<p>No encontrado</p>");
}

//Reemplazar string con el método replace()
var string = "Reemplazame Reemplazame Reemplazame REEMPLAZAME REEMPLAZAME";
//g busca todas las coincidencias
//i ignora mayúsculas y minúsculas
var reemplazar = string.replace(/Reemplazame/gi, "Reemplazado");
document.write("<p>" + reemplazar + "</p>");

//Convertir un string de minúsculas a mayúsculas toUpperCase()
var string = "minúsculas";
document.write("<p>" + string.toUpperCase() + "</p>");

//Convertir un string de mayúsculas a minúsculas toLowerCase()
var string = "MAYÚSCULAS";
document.write("<p>" + string.toLowerCase() + "</p>");

//Convertir un string en un Array split()
var numeros = "uno dos tres cuatro cinco";
var array = numeros.split(" ");
for(var x = 0; x <=array.length-1; x++)
{
document.write("<p>" + array[x] + "</p>");
}

//Buscar substrings dentro de un String
//Si es negativo empieza a indexar de derecha a izquierda
var string = "hola mundo";
var substring = string.substr(-5);
document.write("<p>" + substring + "</p>");