7 extensiones a las cadenas en Javascript que ahorran mucho código y se ven elegantes

admin

March 26, 2016

javascript

Estas 7 funciones básicas de cadenas son fáciles de implementar como extensiones del objeto String, son muy utilizadas y el código resultante es mucho más legible, mantenible y elegante:

1 y 2: Encode y Decode Uri

A pesar de que las uso seguido, eso de añadir el sufijo “Component” a la función siempre se me olvida. Con esta simple extensión no batallas nada.

[javascript]
/**
* Encodifica en formato uri la cadena
* Uso:
* var str = “Esta es una cadena”;
* str = str.encodeUri();
* console.log( str );
* // Outputs “Esta%20es%20una%20cadena”
*/
String.prototype.encodeUri = function () {
return encodeURIComponent( this );
}; // end encodeUri

/**
* Decodifica la cadena a partir del formato uri
* Uso:
* var str = “Esta%20es%20una%20cadena”;
* str = str.decodeUri();
* console.log( str );
* // Outputs “Esta es una cadena”;
*/
String.prototype.decodeUri = function () {
return decodeURIComponent( this );
}; // end decodeUri
[/javascript]

3 y 4: EscapeRegEx y ReplaceAll

Por alguna extraña razón, cuando reemplazar una cadena por otra solamente se reemplaza la primer coincidencia. Esto es un problema, pero fácilmente se soluciona con estas dos funciones y agregando estas extensiones, utilizarlas es mucho más sencillo.

[javascript]
/**
* Crea una cadena de expresión regular a partir de la cadena,
* anteponiendo “\” a los caracteres especiales, “escapando”
* la cadena
* Uso:
* var str = “Hola!”;
* str = str.escapeRegExp();
* console.log( str );
* // Outputs: “Hola\!”
*/
String.prototype.escapeRegExp = function () {
return this.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, “\\$1”);
}; // end function escapeRegExp

/**
* Reemplaza todas las instancias de “find” por “replace”
* en la cadena
* Uso:
* str = “Hola me llamo $nombre, $nombre es mi nombre”;
* str = str.replaceAll( “$nombre”, “Luis” );
* console.log( str );
* // Outputs: “Hola me llamo Luis, Luis es mi nombre”
*/
String.prototype.replaceAll = function ( find, replace ) {
return this.replace(new RegExp(find.escapeRegExp(), ‘g’), replace);
}; // end function replaceAll
[/javascript]

5, 6 y 7: Right, Left y Contains

Si tuviste a VB como tu primer lenguaje como yo, seguramente extrañas estas funciones. Pues implementarlas para todas las cadenas es bastante sencillo, ahorra teclazos y el resultado es muy intuitivo:

[javascript]
/**
* Regresa “n” caracteres a la izquierda de la cadena
* Uso:
* var str = “ABCDE”;
* str = str.left(3);
* console.log( str );
* // Outputs: “ABC”
*/
String.prototype.left = function ( n ){
if (n <= 0) return ""; else if (n > this.length)
return this;
else
return this.substring(0,n);
}; // end function left

/**
* Devuelve “n” caracteres a la derecha de la cadena
* Uso:
* var str = “ABCDE”;
* str = str.right(3);
* console.log( str );
* // Outputs: “CDE”
*/
String.prototype.right = function ( n ) {
if (n <= 0) return ""; else if (n > this.length)
return this;
else {
var iLen = this.length;
return this.substring(iLen, iLen – n);
}
}; // end function right

/**
* Devuelve verdadero si la cadena contiene a “str”
* Uso:
* var str = “Hola mundo!”;
* var lookFor = “mundo”;
* var inString = str.contrains(lookFor);
* console.log(inString);
* // Outputs: true
*/
String.prototype.contains = function ( str ) {
return (
this.indexOf( str ) > -1
);
}; // end function contains
[/javascript]

Corriendo este script al principio de tu código te permitirá utilizar estas extensiones, te facilitará la vida y tendrás un codigo más limpio y elegante. Happy Coding! 🙂

Related Posts

Safe Type Classes con Javascript Puro

admin

July 21, 2017

javascript

Hoy en día tenemos TypeScript, un superset de Javascript type safe de Microsoft, y Dart, otro superset type safe pero de Google, y estan muy bien, pero digamos que no tienes el tiempo ni/o la voluntad de aprender otro lenguaje o superset de uno que ya sabes, y quieres implementar algo de type safety en […]

Read More

Agregar y quitar clases CSS a cualquier elemento DOM en Javascript

admin

March 23, 2016

javascript

El siguiente script modifica el prototipo de HTMLElement para implementar la funcionalidad de agregar y quitar clases CSS fácilmente a cualquier elemento del DOM en javascript: [javascript] // Función para buscar la clase en el elemento HTMLElement.prototype.hasClass = function ( className ) { var rgx = new RegExp(‘(\\s|^)’ + className + ‘(\\s|$)’); var match = […]

Read More