วิธีการจัดรูปแบบตัวเลขโดยการเตรียมตัวเลข 0 เป็นหลักเดียว


296

ฉันต้องการจัดรูปแบบตัวเลขให้มีสองหลัก ปัญหาเกิดขึ้นเมื่อ0- 9ถูกส่งผ่านไปดังนั้นฉันต้องการให้มีการจัดรูปแบบให้-0009

มีตัวจัดรูปแบบตัวเลขใน 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 การสาธิตนั้นไม่ได้แสดงตัวอย่างนี้
Joseph Marikle

1
@KeithPower นี่คือการสาธิตที่แสดงให้เห็นถึงวิธีการดังกล่าวนี้: jsfiddle.net/bkTX3 คลิกที่กล่องเปลี่ยนค่าและคลิกที่กล่องเพื่อดูการทำงาน
Joseph Marikle

1
@Joseph .75 แปลงเป็น 75
Galled

@Galled โดยปกติแล้วสิ่งที่ไม่จำเป็นต้องใช้ในการจัดรูปแบบในรูปแบบของประสบการณ์นี้ของฉัน แต่ฉันได้โยนการแก้ไขร่วมกันที่จะครอบคลุมสถานการณ์ดังกล่าว
Joseph Marikle

ดู.toPrecision()วิธีการด้วยw3schools.com/jsref/jsref_toprecision.asp
Oleg

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
Drew

1
ใช้งานได้ แต่คุณต้องใช้ IE> = 11
Saftpresse99

หรือกับ intl.js polyfil
maxisam

2
ฉันพร้อมที่จะเพิกเฉยต่อ IE แต่ไม่รองรับเบราว์เซอร์มือถือ src: developer.mozilla.org/en/docs/Web/JavaScript/Reference/
......

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


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

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

ฉันรู้ว่านี่เป็นโพสต์โบราณ แต่ฉันต้องการที่จะให้ตัวเลือกการแก้ปัญหาที่ยืดหยุ่นมากขึ้นและ OO

ฉันคาดการณ์คำตอบที่ได้รับการยอมรับเล็กน้อยและ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;
}

สิ่งนี้จะตัดค่าใด ๆ ที่เกินสองหลัก ฉันได้ขยายสิ่งนี้ไปตามทางออกของ 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

ต่อไปนี้เป็นโซลูชันแบบเรียกซ้ำง่าย ๆ ที่ทำงานกับตัวเลขทุกหลัก

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

2

หากคุณไม่มี lodash ในโปรเจคของคุณมันจะเป็นการ overkill ในการเพิ่มไลบรารี่ทั้งหมดเพื่อใช้งานฟังก์ชั่นเดียว นี่เป็นวิธีแก้ปัญหาที่ซับซ้อนที่สุดของปัญหาที่ฉันเคยเห็น

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

คุณควรพิจารณาเพิ่มบริบทไม่ใช่แค่โค้ดในคำตอบของคุณ
Mike

1

สำหรับทุกคนที่ต้องการมีความแตกต่างของเวลาและมีผลลัพธ์ที่สามารถนำจำนวนลบที่นี่เป็นสิ่งที่ดี แผ่น (3) = "03", แผ่น (-2) = "-02", แผ่น (-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');

Regex นั้นดีที่สุด


สิ่งนี้ดูเหมือนจะเกือบจะเหมือนกับคำตอบของโจด้านบน โปรดพิจารณาการเพิ่มข้อมูลเพิ่มเติมเพื่อปรับปรุงคำตอบของคุณหรือลบโดยสิ้นเชิง
Ethan

1

ประเภทข้อมูลใน Javascript ถูกกำหนดแบบไดนามิกโดยใช้ 04 เป็น 4 ใช้คำสั่งแบบมีเงื่อนไขหากค่าน้อยกว่า 10 และเพิ่ม 0 ก่อนโดยทำให้เป็นสตริง Eg

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);
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.