Bagaimana memformat angka dengan menambahkan 0 ke angka satu digit?


Jawaban:


594

Metode terbaik yang saya temukan adalah sesuatu seperti berikut:

(Perhatikan bahwa versi sederhana ini hanya berfungsi untuk bilangan bulat positif)

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

Untuk desimal, Anda bisa menggunakan kode ini (agak ceroboh).

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

Terakhir, jika Anda harus berurusan dengan kemungkinan angka negatif, yang terbaik adalah menyimpan tanda, menerapkan pemformatan ke nilai absolut nomor tersebut, dan mengajukan kembali tanda setelah fakta. Perhatikan bahwa metode ini tidak membatasi jumlah hingga 2 digit total. Sebaliknya itu hanya membatasi angka di sebelah kiri desimal (bagian bilangan bulat). (Garis yang menentukan tanda ditemukan di sini ).

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 demo itu tidak menggambarkan ini
Joseph Marikle

1
@KeithPower Ini demo yang menggambarkan metode di atas: jsfiddle.net/bkTX3 . Klik pada kotak, ubah nilainya, dan klik kotak untuk melihatnya dalam tindakan.
Joseph Marikle

1
@ Joseph .75 ditransformasikan dalam 75.
Galled

@ Disebut secara normal hal semacam itu tidak diperlukan dengan bentuk pemformatan ini dalam pengalaman saya, tapi saya telah menyunting bersama yang akan membahas skenario itu.
Joseph Marikle

Lihat juga pada .toPrecision()metode w3schools.com/jsref/jsref_toprecision.asp
Oleg

133

Jika angkanya lebih tinggi dari 9, konversikan angkanya menjadi string (konsistensi). Kalau tidak, tambahkan nol.

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

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

4
bagaimana dengan waktu negatif. 0-1: 20: 00
mjwrazor

131

Gunakan metode toLocaleString () di nomor apa pun. Jadi untuk angka 6, seperti terlihat di bawah, Anda bisa mendapatkan hasil yang diinginkan.

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

Akan menghasilkan string '06'.


17
Ini jelas lebih baik daripada memotong string dengan tangan. Lebih ringkas, dan jika halaman Anda dapat digunakan di luar AS, Anda mungkin ingin mengubah ini ke:(6).toLocaleString(undefined, {minimumIntegerDigits: 2})
Mark Slater

2
Menggunakan ini dengan IE 9 menciptakan 6,00 bukannya 06.
Drew

1
Berhasil, tetapi Anda perlu IE> = 11.
Saftpresse99

atau dengan intl.js polyfil
maxisam

2
Saya sepenuhnya mengabaikan IE, tetapi tidak didukung dengan baik di peramban seluler. src: developer.mozilla.org/en/docs/Web/JavaScript/Reference/…
chetan92

50

Berikut adalah fungsi nomor padding sederhana yang saya gunakan biasanya. Ini memungkinkan jumlah padding.

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

Contoh:

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

juga memiliki masalah dengan waktu negatif. Apakah ada perbaikan untuk ini?
mjwrazor

39

Di semua browser modern yang dapat Anda gunakan

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
Ketahuilah bahwa ini tidak didukung di IE sama sekali developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Tim

Juga tidak berfungsi di beberapa versi node yang lebih lama (mungkin sesuatu yang lebih tua dari node 8)
JSilv

20

Jawaban @ Lifehack sangat berguna bagi saya; di mana saya pikir kita bisa melakukannya dalam satu baris untuk angka positif

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

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

1
Saya pikir Anda bermaksud yang berikut untuk mendapatkan hari dalam sebulan:("0" + (date.getDate())).slice(-2);
Jeff Moeller

11

Anda dapat melakukan:

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

Contoh:

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

Hasil:

00
01
02
10
15

8

Tampaknya Anda mungkin memiliki string, bukan angka. Gunakan ini:

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

Berikut ini contohnya: http://jsfiddle.net/xtgFp/


7

Satu liner cepat dan kotor ....

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

1
Kerja bagus. Lebih baik menggunakan ini sebagai metode ekstensi seperti ini:Number.prototype.leftPad = String.prototype.leftPad = function (pad) { return 0..toFixed(pad).slice(2, -this.toString().length) + this.toString(); };
ConductedClever

6

Ini sederhana dan bekerja dengan cukup baik:

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

1
dapat ditulis sebagai: angka kembali> = 10? number: "0" + number.toString ();
apfz

6

Berikut adalah solusi yang sangat sederhana yang bekerja dengan baik untuk saya.

Pertama mendeklarasikan variabel untuk menyimpan nomor Anda.

var number;

Sekarang, konversikan nomor tersebut menjadi string dan tahan di variabel lain;

var numberStr = number.toString();

Sekarang Anda dapat menguji panjang string ini, jika kurang dari yang diinginkan, Anda dapat menambahkan 'nol' di awal.

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

Sekarang gunakan nomor yang diinginkan

console.log(number);

6

Inilah solusi termudah yang saya temukan: -

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

5

Versi peningkatan dari jawaban sebelumnya

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

Saya tahu ini adalah pos kuno, tetapi saya ingin memberikan opsi solusi yang lebih fleksibel dan OO.

Saya telah mengekstrapolasi jawaban yang diterima sedikit dan memperluas objek javascript Numberuntuk memungkinkan padding nol yang dapat disesuaikan:

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"

Edit: Tambahkan kode untuk mencegah terpotongnya angka lebih lama dari angka yang Anda minta.

CATATAN: Ini sudah usang di semua kecuali IE. Gunakan padStart()sebagai gantinya.


4

Tidak ada pemformat angka bawaan untuk JavaScript, tetapi ada beberapa perpustakaan yang melakukannya:

  1. underscore.string menyediakan fungsi sprintf (bersama dengan banyak format lain yang bermanfaat)
  2. javascript-sprintf , yang menggarisbawahi meminjam dari.

3

atau

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

dengan

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

3

Jika Anda ingin membatasi angka Anda secara bersamaan:

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

Ini juga akan memotong nilai apa pun yang melebihi dua digit. Saya telah memperluas ini pada solusi 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

Berikut ini adalah solusi rekursif sederhana yang berfungsi untuk sejumlah digit.

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

2

Jika Anda tidak memiliki lodash di proyek Anda, akan berlebihan jika menambahkan seluruh perpustakaan hanya untuk menggunakan satu fungsi. Ini adalah solusi paling rumit dari masalah Anda yang pernah saya lihat.

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

1

Ini versiku. Dapat dengan mudah disesuaikan dengan skenario lain.

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

Anda harus mempertimbangkan untuk menambahkan beberapa konteks, bukan hanya kode untuk jawaban Anda.
Mike

1

Bagi siapa pun yang ingin memiliki perbedaan waktu dan memiliki hasil yang dapat mengambil angka negatif di sini adalah yang baik. 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

dengan fungsi ini Anda dapat mencetak dengan n digit apa pun yang Anda inginkan

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

contoh saya adalah :

<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 adalah yang terbaik.


Tampaknya ini hampir persis sama dengan jawaban Joe di atas. Silakan pertimbangkan untuk menambahkan info tambahan untuk meningkatkan jawaban Anda, atau hapus semuanya.
Ethan

1

SEBAGAI datatype dalam Javascript ditentukan secara dinamis itu memperlakukan 04 sebagai 4. Gunakan pernyataan bersyarat jika nilainya lebih rendah dari 10 kemudian tambahkan 0 sebelum itu dengan membuatnya string E.g,

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

1

Saya membangun fungsi format yang cukup sederhana yang saya panggil kapan pun saya membutuhkan tanggal sederhana yang diformat. Ini berurusan dengan memformat satu digit menjadi dua digit ketika mereka kurang dari 10. Ini menentukan tanggal yang diformat sebagaiSat Sep 29 2018 - 00:05:44

Fungsi ini digunakan sebagai bagian dari variabel utils sehingga disebut sebagai:

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

Fungsi Panah ES6 Diperbarui (Didukung di hampir semua browser modern, lihat CanIUse )

const formatNumber = n => ("0" + n).slice(-2);
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.