Jak sformatować liczby, dodając 0 do liczb jednocyfrowych?


Odpowiedzi:


594

Najlepsza metoda, jaką znalazłem, jest następująca:

(Uwaga: ta prosta wersja działa tylko dla dodatnich liczb całkowitych)

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

W przypadku miejsc po przecinku możesz użyć tego kodu (choć jest nieco niechlujny).

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

Wreszcie, jeśli masz do czynienia z możliwością występowania liczb ujemnych, najlepiej przechowywać znak, zastosować formatowanie do wartości bezwzględnej liczby i ponownie zastosować znak po fakcie. Zauważ, że ta metoda nie ogranicza liczby do 2 cyfr całkowitych. Zamiast tego ogranicza tylko liczbę na lewo od miejsca po przecinku (część całkowita). (Ta linia, która określa znak został znaleziony tutaj ).

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 to demo tego nie ilustruje
Joseph Marikle,

1
@KeithPower Oto demo ilustrujące powyższą metodę: jsfiddle.net/bkTX3 . Kliknij pole, zmień wartość i kliknij pole, aby zobaczyć, jak działa.
Joseph Marikle,

1
@Joseph .75 został przekształcony w 75.
Galed

@Galled normalnie tego rodzaju formatowanie nie jest potrzebne w moim doświadczeniu, ale przygotowałem edycję, która obejmowałaby ten scenariusz.
Joseph Marikle

Zobacz także .toPrecision()metodę w3schools.com/jsref/jsref_toprecision.asp
Oleg

133

Jeśli liczba jest większa niż 9, przekonwertuj liczbę na ciąg znaków (spójność). W przeciwnym razie dodaj zero.

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

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

4
co z czasem negatywnym. 0-1: 20: 00
mjwrazor

131

Użyj metody toLocaleString () w dowolnej liczbie. Tak więc dla liczby 6, jak pokazano poniżej, można uzyskać pożądane wyniki.

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

Wygeneruje ciąg „06”.


17
Jest to zdecydowanie lepsze niż ręczne siekanie strun. Mówiąc bardziej zwięźle, a jeśli Twoja strona może być używana poza USA, możesz dostosować ją do:(6).toLocaleString(undefined, {minimumIntegerDigits: 2})
Mark Slater

2
Używanie tego z IE 9 tworzy 6.00 zamiast 06.
Drew

1
Działa, ale potrzebujesz IE> = 11.
Saftpresse99

lub z intl.js polyfil
maxisam

2
Jestem gotów zignorować IE, ale nie jest dobrze obsługiwany w przeglądarkach mobilnych. src: developer.mozilla.org/en/docs/Web/JavaScript/Reference/…
chetan92

50

Oto prosta funkcja uzupełniania liczb, której zwykle używam. Pozwala na dowolną ilość wyściółki.

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

Przykłady:

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

ma również problemy z czasem ujemnym. Czy można to naprawić?
mjwrazor

39

We wszystkich nowoczesnych przeglądarkach możesz używać

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
Pamiętaj, że nie jest to obsługiwane w IE na wszystkich developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Tim

Również nie działa w niektórych starszych wersjach węzła (być może w czymkolwiek starszym niż węzeł 8)
JSilv,

20

@ Odpowiedź Lifehacka była dla mnie bardzo przydatna; gdzie myślę, że możemy to zrobić w jednym wierszu dla liczb dodatnich

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

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

1
Myślę, że miałeś na myśli, aby uzyskać dzień miesiąca:("0" + (date.getDate())).slice(-2);
Jeff Moeller

11

Możesz to zrobić:

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

Przykład:

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

Wynik:

00
01
02
10
15

8

Wygląda na to, że możesz mieć ciąg zamiast liczby. Użyj tego:

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

Oto przykład: http://jsfiddle.net/xtgFp/


7

Szybka i brudna jedna wkładka ....

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

1
Świetna robota. Lepiej jest użyć tego jako metody rozszerzenia takiej jak ta:Number.prototype.leftPad = String.prototype.leftPad = function (pad) { return 0..toFixed(pad).slice(2, -this.toString().length) + this.toString(); };
ConductClever

6

Jest to proste i działa całkiem dobrze:

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

1
można zapisać jako: zwracana liczba> = 10? number: „0” + number.toString ();
apfz

6

Oto bardzo proste rozwiązanie, które działało dla mnie dobrze.

Najpierw zadeklaruj zmienną, która będzie zawierać Twój numer.

var number;

Teraz przekonwertuj liczbę na ciąg i trzymaj ją w innej zmiennej;

var numberStr = number.toString();

Teraz możesz przetestować długość tego ciągu, jeśli jest mniej niż pożądany, możesz na początku dodać „zero”.

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

Teraz użyj numeru zgodnie z życzeniem

console.log(number);

6

Oto najprostsze rozwiązanie, jakie znalazłem: -

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

5

Ulepszona wersja poprzedniej odpowiedzi

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

Wiem, że to starożytny post, ale chciałem zaoferować bardziej elastyczną opcję OO.

Trochę ekstrapolowałem zaakceptowaną odpowiedź i rozszerzyłem obiekt javascript, Numberaby umożliwić regulację dopełniania zer:

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"

Edycja: dodaj kod, aby zapobiec odcinaniu liczb dłuższych niż żądane cyfry.

UWAGA: Jest to przestarzałe we wszystkich oprócz IE. Użyj padStart()zamiast tego.



3

lub

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

z

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

3

Jeśli chcesz jednocześnie ograniczyć liczbę cyfr:

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

Spowodowałoby to również posiekanie dowolnej wartości przekraczającej dwie cyfry. Rozszerzyłem to na rozwiązanie Fanaura.


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

Oto proste rekurencyjne rozwiązanie, które działa dla dowolnej liczby cyfr.

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

2

Jeśli nie masz lodash w swoim projekcie, dodawanie całej biblioteki w celu korzystania z jednej funkcji będzie przesadą. To najbardziej wyrafinowane rozwiązanie twojego problemu, jakie kiedykolwiek widziałem.

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

1

Oto moja wersja. Można go łatwo dostosować do innych scenariuszy.

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

Powinieneś rozważyć dodanie kontekstu, a nie tylko kodu do swoich odpowiedzi.
Mike

1

Dla każdego, kto chce mieć różnice czasowe i wyniki, które mogą przyjmować liczby ujemne, jest to dobre. 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

za pomocą tej funkcji możesz drukować z dowolną liczbą n cyfr

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

mój przykład to :

<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 jest najlepszy.


Wydaje się, że jest prawie dokładnie taka sama jak powyższa odpowiedź Joe . Rozważ dodanie dodatkowych informacji, aby poprawić swoją odpowiedź, lub całkowicie je usuń.
Ethan

1

Typ danych AS w JavaScript jest określany dynamicznie, traktuje 04 jako 4 Użyj instrukcji warunkowej, jeśli wartość jest mniejsza niż 10, a następnie dodaj 0 przed nią, ustawiając ciąg E.g,

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

1

Zbudowałem dość prostą funkcję formatu, którą wywołuję, gdy potrzebuję prostej daty sformatowanej. Zajmuje się formatowaniem pojedynczych cyfr na dwucyfrowe, gdy są mniejsze niż 10. Wyodrębnia datę sformatowaną jakoSat Sep 29 2018 - 00:05:44

Ta funkcja jest używana jako część zmiennej utils, dlatego jest nazywana:

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

Zaktualizowano dla funkcji strzałek ES6 (obsługiwane w prawie wszystkich nowoczesnych przeglądarkach, patrz CanIUse )

const formatNumber = n => ("0" + n).slice(-2);
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.