Как отформатировать числа, добавив 0 к однозначным числам?

296

Я хочу отформатировать число, чтобы оно состояло из двух цифр. Проблема возникает, когда 0- 9передается, поэтому мне нужно отформатировать в 00- 09.

Есть ли в JavaScript средство форматирования чисел?

Кит Пауэр
источник

Ответы:

594

Лучший метод, который я нашел, это что-то вроде следующего:

(Обратите внимание, что эта простая версия работает только для натуральных чисел)

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

Для десятичных чисел вы можете использовать этот код (хотя он немного небрежный).

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

Наконец, если вам приходится иметь дело с возможностью отрицательных чисел, лучше всего сохранить знак, применить форматирование к абсолютному значению числа и повторно применить знак после факта. Обратите внимание, что этот метод не ограничивает число до 2 цифр. Вместо этого он ограничивает число только слева от десятичной части (целая часть). (Линия, которая определяет знак была найдена здесь ).

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, что демо не иллюстрирует это
Джозеф Марикл
1
@KeithPower Вот демонстрация, которая иллюстрирует вышеуказанный метод: jsfiddle.net/bkTX3 . Нажмите на поле, измените значение и нажмите на поле, чтобы увидеть его в действии.
Джозеф Марикл
1
@ Джозеф .75 превращается в 75.
Звонил
@ По моему опыту, такого рода форматирование в моем опыте не требуется, но я собрал правку, которая бы охватывала этот сценарий.
Джозеф Марикл
Также взгляните на .toPrecision()метод w3schools.com/jsref/jsref_toprecision.asp
Олег
133

Если число больше 9, преобразуйте число в строку (согласованность). В противном случае добавьте ноль.

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

n( 9); //Returns "09"
n(10); //Returns "10"
n(999);//Returns "999"
Роб W
источник
4
как насчет негативного времени, хотя. 0-1: 20: 00
mjwrazor
131

Используйте метод toLocaleString () для любого числа. Таким образом, для числа 6, как видно ниже, вы можете получить желаемые результаты.

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

Сгенерирует строку «06».

nyteshade
источник
17
Это определенно лучше, чем резать нити вручную. Более кратко, и если ваша страница может быть использована за пределами США, вы можете настроить это следующим образом:(6).toLocaleString(undefined, {minimumIntegerDigits: 2})
Марк Слейтер
2
Использование этого с IE 9 создает 6,00 вместо 06.
Дрю
1
Работает, но нужен IE> = 11.
Saftpresse99
или с intl.js polyfil
maxisam
2
Я полностью игнорирую IE, но он не очень хорошо поддерживается в мобильных браузерах. src: developer.mozilla.org/en/docs/Web/JavaScript/Reference/…
chetan92
50

Вот простая функция заполнения цифрами, которую я обычно использую. Это позволяет для любого количества заполнения.

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

Примеры:

leftPad(1, 2) // 01
leftPad(10, 2) // 10
leftPad(100, 2) // 100
leftPad(1, 3) // 001
leftPad(1, 8) // 00000001
timrwood
источник
также есть проблемы с отрицательным временем. можно ли это исправить?
mjwrazor
39

Во всех современных браузерах вы можете использовать

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
Имейте в виду, что это вообще не поддерживается в IE developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Тим
Кроме того, он не работает в некоторых старых версиях узла (возможно, что-либо старше, чем узел 8)
JSilv
20

Ответ @ Lifehack был очень полезен для меня; где я думаю, что мы можем сделать это в одну строку для положительных чисел

 String(input).padStart(2, '0');
Джи Мок
источник
12
("0" + (date.getMonth() + 1)).slice(-2);
("0" + (date.getDay())).slice(-2);
застывший
источник
1
Я думаю, что вы имели в виду следующее, чтобы получить день месяца:("0" + (date.getDate())).slice(-2);
Джефф Мёллер
11

Ты можешь сделать:

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

Пример:

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

Результат:

00
01
02
10
15
fanaur
источник
8

Кажется, у вас может быть строка вместо числа. использовать это:

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

Вот пример: http://jsfiddle.net/xtgFp/

Джо
источник
7

Быстрый и грязный лайнер ....

function zpad(n, len) {
  return 0..toFixed(len).slice(2,-n.toString().length)+n.toString();
}
pwuk
источник
1
Отличная работа. Лучше использовать это в качестве метода расширения , как это:Number.prototype.leftPad = String.prototype.leftPad = function (pad) { return 0..toFixed(pad).slice(2, -this.toString().length) + this.toString(); };
ConductedClever
6

Это просто и работает довольно хорошо:

function twoDigit(number) {
  var twodigit = number >= 10 ? number : "0"+number.toString();
  return twodigit;
}
nickolusroy
источник
1
можно записать как: номер возврата> = 10? number: "0" + number.toString ();
apfz
6

Вот очень простое решение, которое хорошо сработало для меня.

Сначала объявите переменную для хранения вашего номера.

var number;

Теперь преобразуйте число в строку и удерживайте ее в другой переменной;

var numberStr = number.toString();

Теперь вы можете проверить длину этой строки, если она меньше желаемой, вы можете добавить «ноль» в начале.

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

Теперь используйте номер по желанию

console.log(number);
Edgar256
источник
6

Вот самое простое решение, которое я нашел:

let num = 9; // any number between 0 & 99
let result = ( '0' + num ).substr( -2 );
Bassam
источник
5

Улучшенная версия предыдущего ответа

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
источник
5

Я знаю, что это древний пост, но я хотел предоставить более гибкую и оригинальную возможность решения.

Я немного экстраполировал принятый ответ и расширил Numberобъект javascript, чтобы можно было настраивать заполнение нулями:

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"

Редактировать: добавить код, чтобы предотвратить обрезку номеров длиннее, чем запрошенные цифры

ПРИМЕЧАНИЕ: это устарело во всех, кроме IE. Используйте padStart()вместо этого.

Ноа Дункан
источник
4

Для JavaScript нет встроенного средства форматирования чисел, но есть некоторые библиотеки, которые выполняют это:

  1. underscore.string предоставляет функцию sprintf (наряду со многими другими полезными форматерами)
  2. javascript-sprintf , который заимствует из.
coltraneofmars
источник
3

или

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

с участием

function rep(len, chr) { 
   return new Array(len+1).join(chr);
}
pwuk
источник
3

Если вы хотите одновременно ограничить свои цифры:

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

Это также прервало бы любое значение, которое превышает две цифры. Я распространял это на решение Фанаура.

Леопольд
источник
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

Вот простое рекурсивное решение, которое работает для любого количества цифр.

function numToNDigitStr(num, n)
{
    if(num >=  Math.pow(10, n - 1)) { return num; }
    return "0" + numToNDigitStr(num, n-1);
}
user1052527
источник
2

Если в вашем проекте нет lodash, добавление всей библиотеки просто для использования одной функции будет излишним. Это самое сложное решение вашей проблемы, которое я когда-либо видел.

_.padStart(num, 2, '0')
kucherenkovova
источник
1

Вот моя версия. Может быть легко адаптирован к другим сценариям.

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
источник
1
    function colorOf(r,g,b){
  var f = function (x) {
    return (x<16 ? '0' : '') + x.toString(16) 
  };

  return "#" +  f(r) + f(g) + f(b);
}
Алексей Цейтлин
источник
Вы должны рассмотреть возможность добавления некоторого контекста, а не просто кода к вашим ответам.
Майк
1

Для всех, кто хочет иметь разницу во времени и иметь результаты, которые могут принимать отрицательные числа, здесь хороший. 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
источник
1

с помощью этой функции вы можете печатать с любыми n цифрами, которые вы хотите

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
источник
1

мой пример будет :

<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
источник
1

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

Регекс является лучшим.

Сын тр.
источник
Похоже, это почти точно так же, как ответ Джо выше. Пожалуйста, рассмотрите возможность добавления дополнительной информации, чтобы улучшить свой ответ, или полностью ее удалить.
Итан
1

Тип данных AS в Javascript определяется динамически, он обрабатывает 04 как 4. Используйте условный оператор, если значение меньше 10, затем добавьте 0 перед ним, сделав его строкой E.g,

var x=4;
  x = x<10?"0"+x:x
 console.log(x); // 04
Сиддхартха
источник
1

Я построил довольно простую функцию форматирования, которую я вызываю всякий раз, когда мне нужно отформатировать простую дату. Он имеет дело с форматированием однозначных чисел в двузначные, когда они меньше 10. Он выбрасывает дату, отформатированную какSat Sep 29 2018 - 00:05:44

Эта функция используется как часть переменной utils, поэтому она называется:

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

Обновлен для функций стрелок ES6 (поддерживается почти во всех современных браузерах, см. CanIUse )

const formatNumber = n => ("0" + n).slice(-2);
aabbccsmith
источник