Wie formatiere ich Zahlen, indem ich 0 vor einstellige Zahlen stelle?

Antworten:

594

Die beste Methode, die ich gefunden habe, ist etwa die folgende:

(Beachten Sie, dass diese einfache Version nur für positive Ganzzahlen funktioniert.)

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

Für Dezimalstellen können Sie diesen Code verwenden (allerdings ist er etwas schlampig).

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

Wenn Sie sich mit der Möglichkeit negativer Zahlen befassen müssen, ist es am besten, das Vorzeichen zu speichern, die Formatierung auf den absoluten Wert der Zahl anzuwenden und das Vorzeichen nachträglich erneut anzuwenden. Beachten Sie, dass diese Methode die Anzahl nicht auf insgesamt 2 Ziffern beschränkt. Stattdessen wird nur die Zahl links von der Dezimalstelle (der ganzzahlige Teil) eingeschränkt. (Die Linie, die das Zeichen bestimmt, wurde hier gefunden ).

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
quelle
4
@ KeithPower, dass Demo dies nicht illustriert
Joseph Marikle
1
@KeithPower Hier ist eine Demo, die die obige Methode veranschaulicht: jsfiddle.net/bkTX3 . Klicken Sie auf das Feld, ändern Sie den Wert und klicken Sie auf das Feld, um es in Aktion zu sehen.
Joseph Marikle
1
@ Joseph .75 wird in 75 umgewandelt.
Galled
@Galled Normalerweise wird so etwas bei dieser Form der Formatierung meiner Erfahrung nach nicht benötigt, aber ich habe eine Bearbeitung zusammengestellt, die dieses Szenario abdeckt.
Joseph Marikle
Schauen Sie sich auch die .toPrecision()Methode w3schools.com/jsref/jsref_toprecision.asp
Oleg
133

Wenn die Zahl höher als 9 ist, konvertieren Sie die Zahl in eine Zeichenfolge (Konsistenz). Andernfalls fügen Sie eine Null hinzu.

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

n( 9); //Returns "09"
n(10); //Returns "10"
n(999);//Returns "999"
Rob W.
quelle
4
Was ist mit der negativen Zeit? 0-1: 20: 00
mjwrazor
131

Verwenden Sie die toLocaleString () -Methode in einer beliebigen Anzahl. Für die Nummer 6, wie unten gezeigt, können Sie die gewünschten Ergebnisse erzielen.

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

Erzeugt die Zeichenfolge '06'.

Nyteshade
quelle
17
Dies ist definitiv besser als das Hacken von Saiten von Hand. Genauer gesagt, und wenn Ihre Seite außerhalb der USA verwendet werden könnte, möchten Sie dies möglicherweise optimieren, um:(6).toLocaleString(undefined, {minimumIntegerDigits: 2})
Mark Slater
2
Wenn Sie dies mit IE 9 verwenden, wird 6.00 anstelle von 06 erstellt.
Drew
1
Funktioniert, aber Sie benötigen IE> = 11.
Saftpresse99
oder mit intl.js polyfil
maxisam
2
Ich bin alle bereit, IE zu ignorieren, aber es wird in mobilen Browsern nicht gut unterstützt. src: developer.mozilla.org/en/docs/Web/JavaScript/Reference/…
chetan92
50

Hier ist eine einfache Funktion zum Auffüllen von Zahlen, die ich normalerweise verwende. Es ermöglicht jede Menge Polsterung.

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

Beispiele:

leftPad(1, 2) // 01
leftPad(10, 2) // 10
leftPad(100, 2) // 100
leftPad(1, 3) // 001
leftPad(1, 8) // 00000001
Timrwood
quelle
hat auch Probleme mit der negativen Zeit. Gibt es eine Lösung dafür?
mjwrazor
39

In allen modernen Browsern können Sie verwenden

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

Lifehack
quelle
1
Beachten Sie, dass dies im IE überhaupt nicht unterstützt wird. Developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Tim
Auch funktioniert es nicht in einigen älteren Versionen des Knotens (möglicherweise etwas älter als Knoten 8)
JSilv
20

@ Lifehacks Antwort war sehr nützlich für mich; wo ich denke, wir können es in einer Zeile für positive Zahlen tun

 String(input).padStart(2, '0');
Jee Mok
quelle
12
("0" + (date.getMonth() + 1)).slice(-2);
("0" + (date.getDay())).slice(-2);
Stark
quelle
1
Ich denke, Sie meinten Folgendes, um den Tag des Monats zu erhalten:("0" + (date.getDate())).slice(-2);
Jeff Moeller
11

Du kannst tun:

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

Beispiel:

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

Ergebnis:

00
01
02
10
15
Fanaurier
quelle
8

Es scheint, dass Sie eine Zeichenfolge anstelle einer Zahl haben. benutze das:

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

Hier ist ein Beispiel: http://jsfiddle.net/xtgFp/

Joe
quelle
7

Schneller und schmutziger Einzeiler ....

function zpad(n, len) {
  return 0..toFixed(len).slice(2,-n.toString().length)+n.toString();
}
pwuk
quelle
1
Exzellente Arbeit. Es ist besser, dies als Erweiterungsmethode wie folgt zu verwenden:Number.prototype.leftPad = String.prototype.leftPad = function (pad) { return 0..toFixed(pad).slice(2, -this.toString().length) + this.toString(); };
ConductedClever
6

Das ist einfach und funktioniert ziemlich gut:

function twoDigit(number) {
  var twodigit = number >= 10 ? number : "0"+number.toString();
  return twodigit;
}
Nickolusroy
quelle
1
kann geschrieben werden als: return number> = 10? number: "0" + number.toString ();
Apfz
6

Hier ist eine sehr einfache Lösung, die für mich gut funktioniert hat.

Deklarieren Sie zuerst eine Variable, die Ihre Nummer enthält.

var number;

Konvertieren Sie nun die Zahl in eine Zeichenfolge und halten Sie sie in einer anderen Variablen.

var numberStr = number.toString();

Jetzt können Sie die Länge dieser Zeichenfolge testen. Wenn sie kleiner als gewünscht ist, können Sie am Anfang eine 'Null' anhängen.

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

Verwenden Sie nun die gewünschte Nummer

console.log(number);
Edgar256
quelle
6

Hier ist die einfachste Lösung, die ich gefunden habe:

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

Verbesserte Version der vorherigen Antwort

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
quelle
5

Ich weiß, dass dies ein alter Beitrag ist, aber ich wollte eine flexiblere und OO-Lösungsoption anbieten.

Ich habe die akzeptierte Antwort ein wenig extrapoliert und das Javascript- NumberObjekt erweitert, um eine einstellbare Null-Auffüllung zu ermöglichen:

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"

Bearbeiten: Fügen Sie Code hinzu, um zu verhindern, dass Zahlen länger als die angeforderten Ziffern abgeschnitten werden.

HINWEIS: Dies ist in allen außer IE veraltet. Verwenden Sie padStart()stattdessen.

Noah Duncan
quelle
4

Es gibt keinen integrierten Zahlenformatierer für JavaScript, aber es gibt einige Bibliotheken, die dies erreichen:

  1. underscore.string bietet eine Sprintf-Funktion (zusammen mit vielen anderen nützlichen Formatierern)
  2. javascript-sprintf , das unterstreicht.
Coltraneofmars
quelle
3

oder

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

mit

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

Wenn Sie Ihre Ziffern gleichzeitig begrenzen möchten:

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

Dies würde auch jeden Wert abschneiden, der zwei Stellen überschreitet. Ich habe dies auf die Lösung von Fanaur erweitert.

Leopold
quelle
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á
quelle
2

Hier ist eine einfache rekursive Lösung, die für eine beliebige Anzahl von Ziffern funktioniert.

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

Wenn Sie kein Lodash in Ihrem Projekt haben, ist es ein Overkill, die gesamte Bibliothek hinzuzufügen, um nur eine Funktion zu verwenden. Dies ist die raffinierteste Lösung Ihres Problems, die ich je gesehen habe.

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

Hier ist meine Version. Kann leicht an andere Szenarien angepasst werden.

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
quelle
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
quelle
Sie sollten in Betracht ziehen, Ihren Antworten einen Kontext hinzuzufügen, nicht nur Code.
Mike
1

Für alle, die Zeitunterschiede und Ergebnisse haben möchten, die negative Zahlen annehmen können, ist dies eine gute Sache. 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
quelle
1

Mit dieser Funktion können Sie mit beliebigen n Ziffern drucken

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
quelle
1

Mein Beispiel wäre :

<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
quelle
1

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

Regex ist das Beste.

Sohn Tr.
quelle
Dies scheint fast genau die gleiche zu sein wie Joes Antwort oben. Bitte erwägen Sie, zusätzliche Informationen hinzuzufügen, um Ihre Antwort zu verbessern, oder löschen Sie sie ganz.
Ethan
1

AS-Datentypen in Javascript werden dynamisch bestimmt. Es behandelt 04 als 4. Verwenden Sie eine bedingte Anweisung, wenn der Wert kleiner als 10 ist, und fügen Sie 0 hinzu, indem Sie die Zeichenfolge z .

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

Ich habe eine ziemlich einfache Formatierungsfunktion erstellt, die ich aufrufe, wenn ich ein einfaches Datumsformat benötige. Es befasst sich mit der Formatierung einzelner Ziffern in zweistellige Ziffern, wenn diese kleiner als 10 sind. Es wird ein Datum ausgegeben, das als formatiert istSat Sep 29 2018 - 00:05:44

Diese Funktion wird als Teil einer utils-Variablen verwendet und heißt daher:

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
quelle
1

Aktualisiert für ES6- Pfeilfunktionen (Wird in fast allen modernen Browsern unterstützt, siehe CanIUse )

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