1桁の数字の前に0を付加して数字をフォーマットする方法は?


回答:


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そのデモはこれを説明していません
Joseph Marikle

1
@KeithPower上記の方法を説明するデモは次のとおりです:jsfiddle.net/bkTX3。ボックスをクリックして値を変更し、ボックスをクリックしてオフにしてください。
ジョセフマリクル

1
@ジョセフ.75は75
。–

@Galled通常、私の経験では、このような形式のフォーマットではそのようなことは必要ありませんが、そのシナリオをカバーする編集をまとめて投げました。
ジョセフマリクル


133

数値が9より大きい場合は、数値を文字列(一貫性)に変換します。それ以外の場合は、ゼロを追加します。

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

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

4
負の時間についてはどうですか。0-1:20:00
mjwrazor

131

任意の数でtoLocaleString()メソッドを使用します。したがって、6の場合、以下に示すように、目的の結果を得ることができます。

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

文字列「06」を生成します。


17
これは手で弦を切るより間違いなく優れています。より簡潔に、そしてあなたのページが米国外で使用されるかもしれないなら、あなたはこれを次のように微調整したいと思うかもしれません:(6).toLocaleString(undefined, {minimumIntegerDigits: 2})
Mark Slater

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

負の時間の問題もあります。これに対する修正はありますか?
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);
  }
);



また、一部の古いバージョンのノード(おそらくノード8より古いもの)では機能しません
JSilv

20

@Lifehackの答えは私にとって非常に役に立ちました。正の数の場合は1行で実行できると思います

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

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

1
私はあなたがその月の日を得るために以下を意味したと思います:("0" + (date.getDate())).slice(-2);
Jeff Moeller

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

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

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

1
次のように書くことができます:return number> = 10?数値: "0" + number.toString();
apfz 2015

6

ここに私にとってうまくいった非常に単純な解決策があります。

最初に、数値を保持する変数を宣言します。

var number;

次に、数値を文字列に変換し、それを別の変数に保持します。

var numberStr = number.toString();

これで、この文字列の長さをテストできます。必要以上に短い場合は、先頭に「ゼロ」を追加できます。

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

必要に応じて番号を使用してください

console.log(number);

6

これが私が見つけた最も簡単な解決策です:-

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

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


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、underscore.stringから借りています。

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

3

同時に数字を制限したい場合:

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

これにより、2桁を超える値も切り取られます。私はこれをファナウルの解決策に基づいて拡張しています。


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

2

プロジェクトにロダッシュがない場合、1つの関数を使用するためだけにライブラリ全体を追加するのはやり過ぎです。これは私が今まで見たあなたの問題の最も洗練された解決策です。

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

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

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

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

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)

1

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

正規表現が最高です。


これは、上記のJoeの回答とほとんど同じです。回答を改善するために情報を追加するか、完全に削除することを検討してください。
イーサン

1

JavaScriptのASデータ型は動的に決定され、04を4として扱います。値が10未満の場合は条件ステートメントを使用し 文字列にすることでその前に0を追加します

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

1

単純な日付をフォーマットする必要があるときはいつでも呼び出す、かなり単純なフォーマット関数を作成しました。1桁が10未満の場合に2桁にフォーマットすることを扱います。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);
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.