¿Cómo dar formato a los números anteponiendo 0 a números de un solo dígito?

Respuestas:

594

El mejor método que he encontrado es algo como lo siguiente:

(Tenga en cuenta que esta versión simple solo funciona para enteros positivos)

var myNumber = 7;
var formattedNumber = ("0" + myNumber).slice(-2);
console.log(formattedNumber);

Para decimales, podría usar este código (aunque es un poco descuidado).

var myNumber = 7.5;
var dec = myNumber - Math.floor(myNumber);
myNumber = myNumber - dec;
var formattedNumber = ("0" + myNumber).slice(-2) + dec.toString().substr(1);
console.log(formattedNumber);

Por último, si tiene que lidiar con la posibilidad de números negativos, es mejor almacenar el signo, aplicar el formato al valor absoluto del número y volver a aplicar el signo después del hecho. Tenga en cuenta que este método no restringe el número a 2 dígitos en total. En cambio, solo restringe el número a la izquierda del decimal (la parte entera). (La línea que determina el signo se encontró aquí ).

var myNumber = -7.2345;
var sign = myNumber?myNumber<0?-1:1:0;
myNumber = myNumber * sign + ''; // poor man's absolute value
var dec = myNumber.match(/\.\d+$/);
var int = myNumber.match(/^[^\.]+/);

var formattedNumber = (sign < 0 ? '-' : '') + ("0" + int).slice(-2) + (dec !== null ? dec : '');
console.log(formattedNumber);

Joseph Marikle
fuente
44
@KeithPower esa demostración no ilustra esto
Joseph Marikle
1
@KeithPower Aquí hay una demostración que ilustra el método anterior: jsfiddle.net/bkTX3 . Haga clic en el cuadro, cambie el valor y haga clic fuera del cuadro para verlo en acción.
Joseph Marikle
1
@Joseph .75 se transforma en 75.
Galled
@Galled normalmente ese tipo de cosas no son necesarias con esta forma de formato en mi experiencia, pero he preparado una edición que cubriría ese escenario.
Joseph Marikle
También eche un vistazo al .toPrecision()método w3schools.com/jsref/jsref_toprecision.asp
Oleg
133

Si el número es mayor que 9, conviértalo a una cadena (consistencia). De lo contrario, agregue un cero.

function n(n){
    return n > 9 ? "" + n: "0" + n;
}

n( 9); //Returns "09"
n(10); //Returns "10"
n(999);//Returns "999"
Rob W
fuente
44
¿Qué pasa con el tiempo negativo? 0-1: 20: 00
mjwrazor
131

Use el método toLocaleString () en cualquier número. Entonces, para el número 6, como se ve a continuación, puede obtener los resultados deseados.

(6).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false})

Generará la cadena '06'.

Nyteshade
fuente
17
Esto es definitivamente mejor que cortar cuerdas a mano. Más sucintamente, y si su página se puede usar fuera de los EE. UU., Es posible que desee modificar esto para:(6).toLocaleString(undefined, {minimumIntegerDigits: 2})
Mark Slater
2
Usar esto con IE 9 crea 6.00 en lugar de 06.
Dibujó el
1
Funciona, pero necesita IE> = 11.
Saftpresse99
o con intl.js polyfil
maxisam
2
Estoy dispuesto a ignorar IE, pero no está bien soportado en navegadores móviles. src: developer.mozilla.org/en/docs/Web/JavaScript/Reference/…
chetan92
50

Aquí hay una función de relleno de números simple que uso habitualmente. Permite cualquier cantidad de relleno.

function leftPad(number, targetLength) {
    var output = number + '';
    while (output.length < targetLength) {
        output = '0' + output;
    }
    return output;
}

Ejemplos:

leftPad(1, 2) // 01
leftPad(10, 2) // 10
leftPad(100, 2) // 100
leftPad(1, 3) // 001
leftPad(1, 8) // 00000001
Timrwood
fuente
También tiene problemas con el tiempo negativo. ¿Hay alguna solución para esto?
mjwrazor
39

En todos los navegadores modernos puedes usar

numberStr.padStart(2, "0");

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

function zeroPad(numberStr) {
  return numberStr.padStart(2, "0");
}

var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

numbers.forEach(
  function(num) {
    var numString = num.toString();
    
    var paddedNum = zeroPad(numString);

    console.log(paddedNum);
  }
);

Truco de vida
fuente
1
Tenga en cuenta que esto no es compatible con IE en todos los desarrolladores.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Tim
Tampoco funciona en algunas versiones anteriores del nodo (posiblemente algo más antiguo que el nodo 8)
JSilv
20

La respuesta de @ Lifehack fue muy útil para mí; donde creo que podemos hacerlo en una línea para números positivos

 String(input).padStart(2, '0');
Jee Mok
fuente
12
("0" + (date.getMonth() + 1)).slice(-2);
("0" + (date.getDay())).slice(-2);
Rígido
fuente
1
Creo que quiso decir lo siguiente para obtener el día del mes:("0" + (date.getDate())).slice(-2);
Jeff Moeller
11

Tu puedes hacer:

function pad2(number) {
   return (number < 10 ? '0' : '') + number
}

Ejemplo:

document.write(pad2(0) + '<br />');
document.write(pad2(1) + '<br />');
document.write(pad2(2) + '<br />');
document.write(pad2(10) + '<br />');
document.write(pad2(15) + '<br />');

Resultado:

00
01
02
10
15
fanaur
fuente
8

Parece que puede tener una cadena, en lugar de un número. utilizar este:

var num = document.getElementById('input').value,
    replacement = num.replace(/^(\d)$/, '0$1');
document.getElementById('input').value = replacement;

Aquí hay un ejemplo: http://jsfiddle.net/xtgFp/

Joe
fuente
7

Un trazador de líneas rápido y sucio ...

function zpad(n, len) {
  return 0..toFixed(len).slice(2,-n.toString().length)+n.toString();
}
pwuk
fuente
1
Excelente trabajo. Es mejor usar esto como un método de extensión como este:Number.prototype.leftPad = String.prototype.leftPad = function (pad) { return 0..toFixed(pad).slice(2, -this.toString().length) + this.toString(); };
ConductedClever
6

Esto es simple y funciona bastante bien:

function twoDigit(number) {
  var twodigit = number >= 10 ? number : "0"+number.toString();
  return twodigit;
}
nickolusroy
fuente
1
se puede escribir como: número de retorno> = 10? número: "0" + número.toString ();
apfz
6

Aquí hay una solución muy simple que funcionó bien para mí.

Primero declara una variable para contener tu número.

var number;

Ahora convierta el número a una cadena y manténgalo en otra variable;

var numberStr = number.toString();

Ahora puede probar la longitud de esta cadena, si es menor de lo deseado, puede agregar un 'cero' al principio.

if(numberStr.length < 2){
      number = '0' + number;
}

Ahora use el número que desee

console.log(number);
Edgar256
fuente
6

Aquí está la solución más fácil que encontré: -

let num = 9; // any number between 0 & 99
let result = ( '0' + num ).substr( -2 );
Bassam
fuente
5

Versión mejorada de respuesta anterior

function atLeast2Digit(n){
    n = parseInt(n); //ex. if already passed '05' it will be converted to number 5
    var ret = n > 9 ? "" + n: "0" + n;
    return ret;
}

alert(atLeast2Digit(5));

hack4mer
fuente
5

Sé que esta es una publicación antigua, pero quería proporcionar una opción de solución OO más flexible.

Extrapolé un poco la respuesta aceptada y extendí el Numberobjeto de javascript para permitir el relleno de cero ajustable:

Number.prototype.zeroPad = function(digits) {
  var loop = digits;
  var zeros = "";
  while (loop) {
    zeros += "0";
    loop--;
  }
  return (this.toString().length > digits) ?
    this.toString() : (zeros + this).slice(-digits);
}
var v = 5;
console.log(v.zeroPad(2)); // returns "05"
console.log(v.zeroPad(4)); // returns "0005"

Editar: agregue código para evitar cortar números más largos que los dígitos solicitados.

NOTA: Esto es obsoleto en todos menos en IE. Usar en su padStart()lugar.

Noah Duncan
fuente
4

No hay un formateador de números incorporado para JavaScript, pero hay algunas bibliotecas que logran esto:

  1. underscore.string proporciona una función sprintf (junto con muchos otros formateadores útiles)
  2. javascript-sprintf , del cual subrayado.string toma prestado.
coltraneofmars
fuente
3

o

function zpad(n,l){
   return rep(l-n.toString().length, '0') + n.toString();
}

con

function rep(len, chr) { 
   return new Array(len+1).join(chr);
}
pwuk
fuente
3

Si desea limitar sus dígitos al mismo tiempo:

function pad2(number) {
  number = (number < 10 ? '0' : '') + number;
  number = number.substring(0,2);
  return number;
}

Esto también cortaría cualquier valor que exceda dos dígitos. He estado extendiendo esto sobre la solución de fanaur.

leopold
fuente
2
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#test').keypress(allowOnlyTwoPositiveDigts);
            });

            function allowOnlyTwoPositiveDigts(e){

                var test = /^[\-]?[0-9]{1,2}?$/
                return test.test(this.value+String.fromCharCode(e.which))
            }

        </script>
    </head>
    <body>
        <input id="test" type="text" />
    </body>
</html>
Victor Jatobá
fuente
2

Aquí hay una solución recursiva simple que funciona para cualquier número de dígitos.

function numToNDigitStr(num, n)
{
    if(num >=  Math.pow(10, n - 1)) { return num; }
    return "0" + numToNDigitStr(num, n-1);
}
usuario1052527
fuente
2

Si no tiene lodash en su proyecto, será excesivo agregar toda la biblioteca solo para usar una función. Esta es la solución más sofisticada de su problema que he visto.

_.padStart(num, 2, '0')
kucherenkovova
fuente
1

Aquí está mi versión. Se puede adaptar fácilmente a otros escenarios.

function setNumericFormat(value) {
    var length = value.toString().length;
    if (length < 4) {
        var prefix = "";
        for (var i = 1; i <= 4 - length; i++) {
            prefix += "0";
        }
        return prefix + value.toString();
    }
    return  value.toString();
}
Veverke
fuente
1
    function colorOf(r,g,b){
  var f = function (x) {
    return (x<16 ? '0' : '') + x.toString(16) 
  };

  return "#" +  f(r) + f(g) + f(b);
}
Alexey Tseitlin
fuente
Debería considerar agregar algo de contexto, no solo código a sus respuestas.
Mike
1

Para cualquiera que quiera tener diferencias de tiempo y tener resultados que puedan tomar números negativos aquí es bueno. pad (3) = "03", pad (-2) = "-02", pad (-234) = "-234"

pad = function(n){
  if(n >= 0){
    return n > 9 ? "" + n : "0" + n;
  }else{
    return n < -9 ? "" + n : "-0" + Math.abs(n);
  }
}
mjwrazor
fuente
1

con esta función puede imprimir con cualquier n dígitos que desee

function frmtDigit(num, n) {
    isMinus = num < 0;
    if (isMinus)
        num *= -1;
    digit = '';
    if (typeof n == 'undefined')
        n = 2;//two digits
    for (i = 1; i < n; i++) {
        if (num < (1 + Array(i + 1).join("0")))
            digit += '0';
    }
    digit = (isMinus ? '-' : '') + digit + num;
    return digit;
};
jalmatari
fuente
1

mi ejemplo sería :

<div id="showTime"></div>

    function x() {
    var showTime = document.getElementById("showTime");
    var myTime = new Date();
    var hour = myTime.getHours();
    var minu = myTime.getMinutes();
    var secs = myTime.getSeconds();
    if (hour < 10) {
        hour = "0" + hour
    };
    if (minu < 10) {
        minu = "0" + minu
    };
    if (secs < 10) {
        secs = "0" + secs
    };

    showTime.innerHTML = hour + ":" + minu + ":" + secs;
}

setInterval("x()", 1000)
DHJ
fuente
1

`${number}`.replace(/^(\d)$/, '0$1');

Regex es el mejor.

Hijo Tr.
fuente
Esto parece ser casi exactamente lo mismo que la respuesta de Joe anterior. Considere agregar información adicional para mejorar su respuesta o eliminarla por completo.
Ethan
1

Como el tipo de datos en Javascript se determina dinámicamente, trata 04 como 4 Use una declaración condicional si el valor es menor que 10 y luego agregue 0 antes haciendo que sea una cadena E.g,

var x=4;
  x = x<10?"0"+x:x
 console.log(x); // 04
Siddhartha
fuente
1

Construí una función de formato bastante simple que llamo cada vez que necesito una fecha simple formateada. Se trata de formatear dígitos simples a dígitos dobles cuando son menores de 10. Expulsa una fecha formateada comoSat Sep 29 2018 - 00:05:44

Esta función se usa como parte de una variable utils, por lo que se llama así:

let timestamp = utils._dateFormatter('your date string');

var utils = {
  _dateFormatter: function(dateString) {
    let d = new Date(dateString);
    let hours = d.getHours();
    let minutes = d.getMinutes();
    let seconds = d.getSeconds();
    d = d.toDateString();
    if (hours < 10) {
      hours = '0' + hours;
    }
    if (minutes < 10) {
      minutes = '0' + minutes;
    }
    if (seconds < 10) {
      seconds = '0' + seconds;
    }
    let formattedDate = d + ' - ' + hours + ':' + minutes + ':' + seconds;
    return formattedDate;
  }
}
Arq
fuente
1

Actualizado para las funciones de flecha ES6 (compatible con casi todos los navegadores modernos, consulte CanIUse )

const formatNumber = n => ("0" + n).slice(-2);
aabbccsmith
fuente