Hasta ayer echaba en falta un método sencillo y legible para rellenar con ceros cualquier número o cadena en javascript.

Un ejemplo típico es cuando quieres mostrar la hora y quieres que el formato sea hh:mm. No hay ningún problema cuando son las 12:40, pero si es la una y cinco, se muestra 1:5 en vez de 01:05. Lo mismo pasa con las fechas y en innumerables situaciones.

Ayer me he encontré una solución que me parece la mejor que he visto hasta la fecha.

Normalmente, tratándose de un cero, uno haría algo como:

h = (h < 10) ? ("0" + h) : h;

Esto no es feo del todo, pero tampoco es elegante. Y que pasa si queremos 3 ceros? Podríamos hacer algo como:

h = (h < 100) ? ( (h >= 10) ? ("0" + h) : ("00" + h) ) : h;

Este código en un if/else seguro que queda más claro, pero aún así esto es una guarrada. Lo normal sería hacerse una función que rellene con ceros (o con cualquier otro caracter), y usar esa función.

Una vez vista la solución más típica y feucha, es el momento de ver la solución mágica:

("0" + h).slice (-2);  // devolverá "01" si h=1; "12" si h=12
("00" + h).slice (-3); // "001" si h=1; "012" si h=12;"123" si h = 123

Lo que hace el código de arriba es concatenar “00″ con el número (por ejemplo “00″ + 12 = “0012″) y luego cogemos los 3 últimos caracteres empezando desde el final (de ahí el -3). Y los 3 últimos caracteres son: “012″

No se a vosotros, pero yo cuando vi esta solución se me iluminó el cielo. ¡¡Que fácil!!

Por cierto, también se puede usar para rellenar con espacios o con lo que se quiera.

Fuentes:

• Padding zero in Javascript
• Little tricks: string padding in Javascript en el blog de Eneko Alonso

Update: Milan Adamovsky ha creado una página web en http://jsperf.com/zero-padding donde se puede ver el rendimiento de distintas funciones para hacer padding

Trackback URL

formatting, javascript, padding, truco manso