Comment formater les nombres en ajoutant 0 à des nombres à un chiffre?


Réponses:


594

La meilleure méthode que j'ai trouvée est quelque chose comme ceci:

(Notez que cette version simple ne fonctionne que pour les entiers positifs)

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

Pour les décimales, vous pouvez utiliser ce code (c'est un peu bâclé cependant).

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

Enfin, si vous devez faire face à la possibilité de nombres négatifs, il est préférable de stocker le signe, d'appliquer la mise en forme à la valeur absolue du nombre et de réappliquer le signe après coup. Notez que cette méthode ne limite pas le nombre à 2 chiffres au total. Au lieu de cela, il restreint uniquement le nombre à gauche de la décimale (la partie entière). (La ligne qui détermine le signe a été trouvée ici ).

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


4
@KeithPower que la démo n'illustre pas cela
Joseph Marikle

1
@KeithPower Voici une démo qui illustre la méthode ci-dessus: jsfiddle.net/bkTX3 . Cliquez sur la case, modifiez la valeur et désactivez la case pour la voir en action.
Joseph Marikle

1
@Joseph .75 est transformé en 75.
Galled

@Galled normalement ce genre de chose n'est pas nécessaire avec cette forme de formatage dans mon expérience, mais j'ai rassemblé une modification qui couvrirait ce scénario.
Joseph Marikle

Jetez également un œil à la .toPrecision()méthode w3schools.com/jsref/jsref_toprecision.asp
Oleg

133

Si le nombre est supérieur à 9, convertissez-le en chaîne (cohérence). Sinon, ajoutez un zéro.

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

n( 9); //Returns "09"
n(10); //Returns "10"
n(999);//Returns "999"

4
qu'en est-il du temps négatif cependant. 0-1: 20: 00
mjwrazor

131

Utilisez la méthode toLocaleString () dans n'importe quel nombre. Ainsi, pour le numéro 6, comme indiqué ci-dessous, vous pouvez obtenir les résultats souhaités.

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

Générera la chaîne '06'.


17
C'est certainement mieux que de couper des cordes à la main. Plus succinctement, et si votre page peut être utilisée en dehors des États-Unis, vous voudrez peut-être la modifier pour:(6).toLocaleString(undefined, {minimumIntegerDigits: 2})
Mark Slater

2
L'utiliser avec IE 9 crée 6,00 au lieu de 06.
Drew

1
Fonctionne, mais vous avez besoin d'IE> = 11.
Saftpresse99

ou avec polyfil intl.js
maxisam

2
Je suis tout à fait prêt à ignorer IE, mais ce n'est pas bien pris en charge dans les navigateurs mobiles. src: developer.mozilla.org/en/docs/Web/JavaScript/Reference/…
chetan92

50

Voici une simple fonction de remplissage numérique que j'utilise habituellement. Il permet n'importe quelle quantité de rembourrage.

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

Exemples:

leftPad(1, 2) // 01
leftPad(10, 2) // 10
leftPad(100, 2) // 100
leftPad(1, 3) // 001
leftPad(1, 8) // 00000001

a également des problèmes de temps négatif. Y a-t-il une solution à cela?
mjwrazor

39

Dans tous les navigateurs modernes, vous pouvez utiliser

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
Soyez conscient que cela n'est pas pris en charge dans IE à tous les développeurs.mozilla.org
Tim

De plus, cela ne fonctionne pas dans certaines versions plus anciennes du nœud (peut-être quelque chose de plus ancien que le nœud 8)
JSilv

20

La réponse de @ Lifehack m'a été très utile; où je pense que nous pouvons le faire en une seule ligne pour les nombres positifs

 String(input).padStart(2, '0');

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

1
Je pense que vous vouliez dire ce qui suit pour avoir le jour du mois:("0" + (date.getDate())).slice(-2);
Jeff Moeller

11

Tu peux faire:

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

Exemple:

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

Résultat:

00
01
02
10
15

8

Il semble que vous ayez une chaîne au lieu d'un nombre. utilisez ceci:

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

Voici un exemple: http://jsfiddle.net/xtgFp/


7

Une doublure rapide et sale ....

function zpad(n, len) {
  return 0..toFixed(len).slice(2,-n.toString().length)+n.toString();
}

1
Excellent travail. Il vaut mieux utiliser ceci comme méthode d'extension comme ceci:Number.prototype.leftPad = String.prototype.leftPad = function (pad) { return 0..toFixed(pad).slice(2, -this.toString().length) + this.toString(); };
ConductedClever

6

C'est simple et ça marche plutôt bien:

function twoDigit(number) {
  var twodigit = number >= 10 ? number : "0"+number.toString();
  return twodigit;
}

1
peut s'écrire: numéro de retour> = 10? nombre: "0" + number.toString ();
apfz

6

Voici une solution très simple qui a bien fonctionné pour moi.

Déclarez d'abord une variable pour contenir votre numéro.

var number;

Convertissez maintenant le nombre en chaîne et maintenez-le dans une autre variable;

var numberStr = number.toString();

Vous pouvez maintenant tester la longueur de cette chaîne, si elle est inférieure à celle souhaitée, vous pouvez ajouter un «zéro» au début.

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

Maintenant, utilisez le numéro comme vous le souhaitez

console.log(number);

6

Voici la solution la plus simple que j'ai trouvée: -

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

5

Version améliorée de la réponse précédente

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

Je sais que c'est un ancien poste, mais je voulais fournir une option de solution plus flexible et OO.

J'ai extrapolé un peu la réponse acceptée et étendu l' Numberobjet javascript pour permettre un remplissage nul réglable:

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"

Modifier: ajoutez du code pour éviter de couper des nombres plus longs que les chiffres demandés.

REMARQUE: Ceci est obsolète dans tous sauf IE. Utilisez padStart()plutôt.


4

Il n'y a pas de formateur de nombres intégré pour JavaScript, mais il y a quelques bibliothèques qui accomplissent cela:

  1. underscore.string fournit une fonction sprintf (avec de nombreux autres formateurs utiles)
  2. javascript-sprintf , qui souligne.string emprunte.

3

ou

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

avec

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

3

Si vous souhaitez limiter vos chiffres en même temps:

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

Cela couperait également toute valeur supérieure à deux chiffres. J'ai étendu cela sur la solution 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

Voici une solution récursive simple qui fonctionne pour n'importe quel nombre de chiffres.

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

2

Si vous n'avez pas de lodash dans votre projet, il sera exagéré d'ajouter toute la bibliothèque juste pour utiliser une fonction. C'est la solution la plus sophistiquée de votre problème que j'aie jamais vue.

_.padStart(num, 2, '0')

1

Voici ma version. Peut facilement être adapté à d'autres scénarios.

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

Vous devriez envisager d'ajouter du contexte, pas seulement du code à vos réponses.
Mike

1

Pour tous ceux qui veulent avoir des différences de temps et des résultats qui peuvent prendre des nombres négatifs, voici un bon. 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

avec cette fonction, vous pouvez imprimer avec n chiffres que vous voulez

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

mon exemple serait :

<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 est le meilleur.


Cela semble être presque exactement la même que la réponse de Joe ci-dessus. Veuillez envisager d'ajouter des informations supplémentaires pour améliorer votre réponse, ou supprimez-les complètement.
Ethan

1

Comme le type de données en Javascript est déterminé dynamiquement, il traite 04 comme 4 Utilisez une instruction conditionnelle si la valeur est inférieure à 10, puis ajoutez 0 avant en lui faisant la chaîne E.g,

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

1

J'ai construit une fonction de formatage assez simple que j'appelle chaque fois que j'ai besoin d'une date simple formatée. Il traite de la mise en forme de chiffres simples à deux chiffres lorsqu'ils sont inférieurs à 10. Il lance une date formatée commeSat Sep 29 2018 - 00:05:44

Cette fonction est utilisée dans le cadre d'une variable utils, elle est donc appelée comme:

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

Mis à jour pour les fonctions fléchées ES6 (pris en charge dans presque tous les navigateurs modernes, voir CanIUse )

const formatNumber = n => ("0" + n).slice(-2);
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.