¿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);


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"

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'.


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

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);
  }
);


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');

12
("0" + (date.getMonth() + 1)).slice(-2);
("0" + (date.getDay())).slice(-2);

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

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/


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();
}

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;
}

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);

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 );

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));


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.


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.

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);
}

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.


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>

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);
}

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')

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();
}

1
    function colorOf(r,g,b){
  var f = function (x) {
    return (x<16 ? '0' : '') + x.toString(16) 
  };

  return "#" +  f(r) + f(g) + f(b);
}

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);
  }
}

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;
};

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)

1

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

Regex es el mejor.


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

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;
  }
}

1

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

const formatNumber = n => ("0" + n).slice(-2);
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.