Native String en Mootools

Seguimos con nuevas entregas del Manual de Mootools de DesarrolloWeb.com, en este caso con explicaciones sobre las librerías Native String de este interesante framework Javascript.

Originalmente Javascript ya incluye una clase String, que tiene un juego de funciones bastante rico, que ya explicamos en el artículo Clase String en Javascript. No obstante, Mootools además contiene algunas funcionalidades realmente útiles que nos ayudarán a realizar tratamientos con variables de tipo cadena en nuestros scripts.

En este artículo vamos a comentar algunos de los métodos que incorpora Mootools a la clase String. No los veremos todos, porque son bastantes y para consultas de referencia completa siempre está la propia documentación del framework.

Método contains(string[, separator])

Este método sirve para saber si una cadena contiene un string pasado como parámetro. Por ejemplo:

miString = "abc";
alert (miString.contains("b")) //alerta true
alert (miString.contains("x")) //alerta false

Opcionalmente se puede indicar un segundo parámetro con un separador, que tiene que encontrarse en la cadena separando el string que estamos buscando. Esto nos puede servir para buscar palabras enteras dentro de una cadena, por ejemplo:

miString = "abc";
alert (miString.contains("b", " ")) //alerta false, porque se ha encontrado el string "b" pero no está separado por el carácter " " (espacio en blanco).

Veamos ahora otros ejemplos que ayudarán a entender esto de los separadores.

miString2 = "a b c";
alert (miString2.contains("b", " ")) //alerta true
alert (miString2.contains("a", " ")) //alerta true
miString3 = "a bc";
alert (miString3.contains("b", " ")) //alerta false (porque b no está separado por el espacio)

Los ejemplos anteriores se pueden ver en una página aparte.

Método trim()

Ese método elimina los espacios en blanco que hay al principio y al final de una cadena. Devuelve la misma cadena sobre la que se invoca el evento, pero sin los espacios en blanco del principio y el final

" cadena con espacios ".trim() //esto devuelve la cadena "cadena con espacios".

Método rgbToHex([array])

Este método sirve para convertir un string que contiene la codificación de colores RGB con valores decimales a una cadena que especifica colores con valores en hexadecimal. Viene bien para hacer scripts que hacen uso de colores e iteraciones para variar esos colores.

El método espera recibir una cadena de esta forma: "rgb(17,34,51)" y entonces te devuelve algo como esto: "#ea540b". Por ejemplo:

"rgb(255,255,255)".rgbToHex(); //devuelve #ffffff

Además, el método también permite especificar un parámetro boleano, para definir que no queremos que nos devuelva un string con el valor RGB en hexadecimal, sino un array con 3 casillas en el que tenemos en cada una el valor de R, G, B de ese color por separado. Por ejemplo:

"rgb(34,227,155)".rgbToHex(true) //devuelve el array ["22", "e3", "9b"]

También sirve para convertir cadenas que tengan un valor de color en RGBA.

Nota: el rgba es un formato para especificar colores con los típicos valores RGB más un cuarto valor para el canal alpha, que indica la opacidad de ese color. El cuarto parámetro (alpha) admite valores entre cero y cien, siendo el 0 totalmente transparente y el valor 100 totalmente opaco.

"rgba(34,227,155,0)".rgbToHex(); //devuelve "transparent"

Ahora, hemos hecho un pequeño script Mootools que hace uso del método rgbToHex() para ilustrar cómo puede ayudarnos en el tratamiento de colores, realizando un bucle para ir componiendo diferentes valores RGB en decimal, que luego pasaremos a sus correspondientes RGB en hexadecimal, para poder utilizarlos en un atributo HTML para definir el color de fondo de unas tablas.

for (i=0; i<=255; i+=5){
   miColor = "rgb(" + i + "," + i + "," + i + ")";
   miColor = miColor.rgbToHex();
   document.write('<table bgcolor="' + miColor + '"><tr><td>' + miColor + '</td></tr></table>');
}

Esto generaría un código HTML como este:

<table bgcolor="#000000"><tr><td>#000000</td></tr></table>
<table bgcolor="#050505"><tr><td>#050505</td></tr></table>
<table bgcolor="#0a0a0a"><tr><td>#0a0a0a</td></tr></table>
...

Este ejemplo de uso de rgbToHex() se puede ver en este enlace.

Con esto hemos visto varios ejemplos de métodos Native String de Mootools, osea, métodos que extienden la clase nativa de Javascript String. Repito que hay muchos otros métodos de Native String que no hemos tratado en este artículo, por lo que se recomienda seguir la referencia dada en la documentación de Mootools.