ฉันจะ pad ค่าด้วยศูนย์นำหน้าได้อย่างไร

วิธีที่แนะนำในการเติมค่าใน JavaScript คืออะไร? ฉันคิดว่าฉันสามารถสร้างฟังก์ชั่นที่กำหนดเองเพื่อวางค่าศูนย์ลงบนค่า typecasted แต่ฉันสงสัยว่ามีวิธีที่ตรงกว่านี้หรือไม่?

หมายเหตุ:โดย "zerofilled" ฉันหมายถึงในความหมายฐานข้อมูลของคำ (โดยที่การแสดงตัวเลข zerofilled 6 หลักของหมายเลข 5 จะเป็น "000005")

หมายเหตุถึงผู้อ่าน!

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

ล้าสมัยที่อาจเกิดขึ้น : ECMAScript 2017 ประกอบด้วย String.prototype.padStartและ Number.prototype.toLocaleStringมีตั้งแต่ ECMAScript 3.1 ตัวอย่าง:

var n=-0.1;
n.toLocaleString('en', {minimumIntegerDigits:4,minimumFractionDigits:2,useGrouping:false})

... จะแสดงผล "-0000.10"

// or 
const padded = (.1+"").padStart(6,"0");
`-${padded}`

... จะแสดงผล "-0000.1"

ฟังก์ชั่นที่เรียบง่ายคือสิ่งที่คุณต้องการ

function zeroFill( number, width )
{
  width -= number.toString().length;
  if ( width > 0 )
  {
    return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
  }
  return number + ""; // always return a string
}

คุณสามารถทำสิ่งนี้ลงในห้องสมุดหากคุณต้องการอนุรักษ์เนมสเปซหรืออะไรก็ตาม เช่นเดียวกับjQuery ขยาย

วิธีง่ายๆ คุณสามารถเพิ่มการคูณสตริงสำหรับแผ่นและเปลี่ยนเป็นฟังก์ชั่น

var pad = "000000";
var n = '5';
var result = (pad+n).slice(-pad.length);

ในฐานะที่เป็นฟังก์ชั่น

function paddy(num, padlen, padchar) {
    var pad_char = typeof padchar !== 'undefined' ? padchar : '0';
    var pad = new Array(1 + padlen).join(pad_char);
    return (pad + num).slice(-pad.length);
}
var fu = paddy(14, 5); // 00014
var bar = paddy(2, 4, '#'); // ###2

ฉันไม่อยากจะเชื่อคำตอบที่ซับซ้อนทั้งหมดที่นี่ ... แค่ใช้สิ่งนี้:

var zerofilled = ('0000'+n).slice(-4);

จริง ๆ แล้วฉันต้องคิดอะไรแบบนี้ ฉันคิดว่าต้องมีวิธีที่จะทำโดยไม่ต้องใช้ลูป

นี่คือสิ่งที่ฉันมาด้วย

function zeroPad(num, numZeros) {
    var n = Math.abs(num);
    var zeros = Math.max(0, numZeros - Math.floor(n).toString().length );
    var zeroString = Math.pow(10,zeros).toString().substr(1);
    if( num < 0 ) {
        zeroString = '-' + zeroString;
    }

    return zeroString+n;
}

จากนั้นใช้เพียงแค่ให้ตัวเลขเป็นศูนย์:

> zeroPad(50,4);
"0050"

หากจำนวนมีขนาดใหญ่กว่าช่องว่างภายในตัวเลขจะขยายเกินกว่าช่องว่างภายใน:

> zeroPad(51234, 3);
"51234"

ทศนิยมก็ดีเหมือนกัน!

> zeroPad(51.1234, 4);
"0051.1234"

หากคุณไม่คำนึงถึงการสร้างมลภาวะเนมสเปซส่วนกลางคุณสามารถเพิ่มลงใน Number ได้โดยตรง:

Number.prototype.leftZeroPad = function(numZeros) {
    var n = Math.abs(this);
    var zeros = Math.max(0, numZeros - Math.floor(n).toString().length );
    var zeroString = Math.pow(10,zeros).toString().substr(1);
    if( this < 0 ) {
        zeroString = '-' + zeroString;
    }

    return zeroString+n;
}

และถ้าคุณอยากได้ทศนิยมใช้พื้นที่ในการขยาย:

Number.prototype.leftZeroPad = function(numZeros) {
    var n = Math.abs(this);
    var zeros = Math.max(0, numZeros - n.toString().length );
    var zeroString = Math.pow(10,zeros).toString().substr(1);
    if( this < 0 ) {
        zeroString = '-' + zeroString;
    }

    return zeroString+n;
}

ไชโย!

XDRเกิดขึ้นกับรูปแบบลอการิทึมที่ดูเหมือนว่าจะทำงานได้ดีขึ้น

คำเตือน : ฟังก์ชั่นนี้จะล้มเหลวถ้า num เท่ากับศูนย์ (เช่น zeropad (0, 2))

function zeroPad (num, numZeros) {
    var an = Math.abs (num);
    var digitCount = 1 + Math.floor (Math.log (an) / Math.LN10);
    if (digitCount >= numZeros) {
        return num;
    }
    var zeroString = Math.pow (10, numZeros - digitCount).toString ().substr (1);
    return num < 0 ? '-' + zeroString + an : zeroString + an;
}

การพูดถึงประสิทธิภาพtomsmeding เปรียบเทียบคำตอบ 3 อันดับแรก ( 4 กับรูปแบบบันทึก ) เดาที่หนึ่งmajorlyเฮงอีกสอง? :)

นี่คือสิ่งที่ฉันใช้ในการวางตัวเลขได้สูงสุด 7 ตัวอักษร

("0000000" + number).slice(-7)

วิธีนี้อาจเพียงพอสำหรับคนส่วนใหญ่

แก้ไข: หากคุณต้องการทำให้เป็นเรื่องทั่วไปคุณสามารถทำสิ่งนี้ได้:

("0".repeat(padding) + number).slice(-padding)

แก้ไข 2: โปรดทราบว่าตั้งแต่ ES2017 คุณสามารถใช้String.prototype.padStart:

number.toString().padStart(padding, "0")

เบราว์เซอร์สมัยใหม่รองรับในขณะนี้padStartคุณสามารถทำได้ดังนี้:

string.padStart(maxLength, "0");

ตัวอย่าง:

string = "14";
maxLength = 5; // maxLength is the max string length, not max # of fills
res = string.padStart(maxLength, "0");
console.log(res); // prints "00014"

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

var amount = 5;

var text = amount.toLocaleString('en-US',
{
    style: 'decimal',
    minimumIntegerDigits: 3,
    useGrouping: false
});

สิ่งนี้จะสร้างมูลค่าของ "005" สำหรับข้อความ คุณยังสามารถใช้ฟังก์ชัน toLocaleString ของ Number เพื่อ pad ค่าศูนย์ทางด้านขวาของจุดทศนิยม

var amount = 5;

var text = amount.toLocaleString('en-US',
{
    style: 'decimal',
    minimumFractionDigits: 2,
    useGrouping: false
});

สิ่งนี้จะสร้างมูลค่าของ "5.00" สำหรับข้อความ เปลี่ยนการใช้การจัดกลุ่มเป็นจริงเพื่อใช้ตัวคั่นจุลภาคเป็นหลัก

โปรดทราบว่าการใช้toLocaleString()with localesและoptionsอาร์กิวเมนต์เป็นมาตรฐานแยกต่างหากใน ECMA-402ไม่ใช่ใน ECMAScript ณ วันนี้เบราว์เซอร์บางตัวใช้การสนับสนุนขั้นพื้นฐานเท่านั้นเช่นtoLocaleString()อาจเพิกเฉยต่อข้อโต้แย้งใด ๆ

ตัวอย่างที่สมบูรณ์

หากทราบหมายเลขการเติมล่วงหน้าไม่ให้เกินค่าที่กำหนดมีวิธีอื่นในการทำเช่นนี้โดยไม่มีลูป:

var fillZeroes = "00000000000000000000";  // max number of zero fill ever asked for in global

function zeroFill(number, width) {
    // make sure it's a string
    var input = number + "";  
    var prefix = "";
    if (input.charAt(0) === '-') {
        prefix = "-";
        input = input.slice(1);
        --width;
    }
    var fillAmt = Math.max(width - input.length, 0);
    return prefix + fillZeroes.slice(0, fillAmt) + input;
}

กรณีทดสอบที่นี่: http://jsfiddle.net/jfriend00/N87mZ/

วิธีที่รวดเร็วและสกปรก:

y = (new Array(count + 1 - x.toString().length)).join('0') + x;

สำหรับ x = 5 และนับ = 6 คุณจะได้ y = "000005"

นี่คือฟังก์ชั่นด่วนที่ฉันคิดขึ้นมาเพื่อทำงาน หากใครมีวิธีที่ง่ายกว่าอย่าลังเลที่จะแบ่งปัน!

function zerofill(number, length) {
    // Setup
    var result = number.toString();
    var pad = length - result.length;

    while(pad > 0) {
        result = '0' + result;
        pad--;
    }

    return result;
}

ไปงานปาร์ตี้สายที่นี่ แต่ฉันมักจะใช้โครงสร้างนี้สำหรับการทำ ad-hoc padding ของค่าบางอย่างที่nรู้จักกันว่าเป็นทศนิยมบวก:

(offset + n + '').substr(1);

ที่ไหน offsetเลข 10 ^^

เช่น Padding ถึง 5 หลักโดยที่ n = 123:

(1e5 + 123 + '').substr(1); // => 00123

รุ่นฐานสิบหกของ verbose มากกว่านี้เล็กน้อย:

(0x100000 + 0x123).toString(16).substr(1); // => 00123

หมายเหตุ 1: ฉันชอบวิธีการแก้ปัญหาของ @ profitehlolz เช่นกันซึ่งเป็นเวอร์ชันสตริงของสิ่งนี้โดยใช้คุณลักษณะการลบดัชนีที่ดีของ slice ()

ฉันไม่รู้ว่าทำไมจริง ๆ แต่ไม่มีใครทำอย่างชัดเจนที่สุด นี่คือการดำเนินการของฉัน

ฟังก์ชั่น:

/** Pad a number with 0 on the left */
function zeroPad(number, digits) {
    var num = number+"";
    while(num.length < digits){
        num='0'+num;
    }
    return num;
}

ต้นแบบ:

Number.prototype.zeroPad=function(digits){
    var num=this+"";
    while(num.length < digits){
        num='0'+num;
    }
    return(num);
};

ตรงไปตรงมามากฉันไม่เห็นเลยว่ามันจะง่ายขนาดไหน ด้วยเหตุผลบางอย่างที่ฉันดูที่นี่หลายครั้งผู้คนก็พยายามที่จะหลีกเลี่ยง 'สำหรับ' และ 'ในขณะที่' วนรอบในทุก ๆ ค่าใช้จ่าย การใช้ regex อาจทำให้ต้นทุนเพิ่มมากขึ้นสำหรับการเว้นระยะห่าง 8 หลักเล็กน้อย

ฉันใช้ส่วนย่อยนี้เพื่อรับค่าตัวเลข 5 หลัก

(value+100000).toString().slice(-5) // "00123" with value=123

ECMAScript 2017: ใช้padStartหรือpadEnd

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"

ข้อมูลเพิ่มเติม:

• https://github.com/tc39/proposal-string-pad-start-end
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

พลังของคณิตศาสตร์!

x = จำนวนเต็มถึง pad
y = จำนวนศูนย์ถึง pad

function zeroPad(x, y)
{
   y = Math.max(y-1,0);
   var n = (x / Math.pow(10,y)).toFixed(y);
   return n.replace('.','');  
}

ฉันไม่เห็นใครเลยชี้ให้เห็นความจริงที่ว่าเมื่อคุณใช้String.prototype.substr ()ด้วยจำนวนลบมันจะนับจากทางขวา

วิธีแก้ปัญหาหนึ่งซับสำหรับคำถามของ OP คือการแสดงเลขศูนย์ 6 หลักของเลข 5 คือ:

console.log(("00000000" + 5).substr(-6));

โดยทั่วไปเราจะได้รับ:

function pad(num, len) { return ("00000000" + num).substr(-len) };

console.log(pad(5, 6));
console.log(pad(45, 6));
console.log(pad(345, 6));
console.log(pad(2345, 6));
console.log(pad(12345, 6));

หลังจากใช้เวลานานนานในการทดสอบ 15 ฟังก์ชั่น / วิธีการที่แตกต่างกันซึ่งพบในคำถามนี้ฉันตอบได้ว่าตอนนี้ฉันรู้แล้วว่าตัวไหนดีที่สุด (หลากหลายที่สุดและเร็วที่สุด)

ฉันใช้เวลา 15 หน้าที่ / วิธีจากคำตอบสำหรับคำถามนี้และสร้างสคริปต์เพื่อวัดเวลาที่ใช้ในการประมวลผล 100 แผ่น แต่ละแผ่นจะรองหมายเลข9ด้วย2000ศูนย์ สิ่งนี้อาจดูมากเกินไป แต่มันก็เป็นความคิดที่ดีเกี่ยวกับการปรับขนาดของฟังก์ชั่น

รหัสที่ฉันใช้สามารถพบได้ที่นี่: https://gist.github.com/NextToNothing/6325915

อย่าลังเลที่จะแก้ไขและทดสอบโค้ดด้วยตัวเอง

เพื่อให้ได้วิธีที่หลากหลายที่สุดคุณต้องใช้การวนซ้ำ นี่เป็นเพราะมีจำนวนมากที่คนอื่น ๆ มีแนวโน้มที่จะล้มเหลวในขณะที่สิ่งนี้จะประสบความสำเร็จ

แล้ววงไหนที่จะใช้? นั่นจะเป็นการwhileวนซ้ำ forห่วงยังคงเป็นไปอย่างรวดเร็ว แต่whileวนซ้ำนั้นเร็วขึ้นเล็กน้อย (สองสามมิลลิวินาที) - และสะอาดกว่า

คำตอบเช่นเดียวกับที่โดยWilco, Aleksandar ToplekหรือVitim.usจะทำผลงานได้อย่างสมบูรณ์แบบ

โดยส่วนตัวแล้วฉันลองใช้วิธีอื่น ฉันพยายามใช้ฟังก์ชันเรียกซ้ำเพื่อวางสตริง / หมายเลข มันทำงานได้ดีกว่าวิธีการเข้าร่วมอาร์เรย์ แต่ยังไม่ได้ทำงานเร็วเท่าห่วง

ฟังก์ชั่นของฉันคือ

function pad(str, max, padder) {
  padder = typeof padder === "undefined" ? "0" : padder;
  return str.toString().length < max ? pad(padder.toString() + str, max, padder) : str;
}

คุณสามารถใช้ฟังก์ชั่นของฉันด้วยการตั้งค่าตัวแปร padding เช่นนี้

pad(1, 3); // Returns '001'
// - Or -
pad(1, 3, "x"); // Returns 'xx1'

โดยส่วนตัวหลังจากการทดสอบของฉันฉันจะใช้วิธีที่มีการวนรอบในขณะที่ชอบAleksandar ToplekหรือVitim.usหรืออย่างไรก็ตามฉันจะแก้ไขมันเล็กน้อยเพื่อให้คุณสามารถตั้งค่าสายแพ็ดดิง

ดังนั้นฉันจะใช้รหัสนี้:

function padLeft(str, len, pad) {
    pad = typeof pad === "undefined" ? "0" : pad + "";
    str = str + "";
    while(str.length < len) {
        str = pad + str;
    }
    return str;
}

// Usage
padLeft(1, 3); // Returns '001'
// - Or -
padLeft(1, 3, "x"); // Returns 'xx1'

คุณสามารถใช้มันเป็นฟังก์ชั่นต้นแบบโดยใช้รหัสนี้:

Number.prototype.padLeft = function(len, pad) {
    pad = typeof pad === "undefined" ? "0" : pad + "";
    var str = this + "";
    while(str.length < len) {
        str = pad + str;
    }
    return str;
}

// Usage
var num = 1;

num.padLeft(3); // Returns '001'
// - Or -
num.padLeft(3, "x"); // Returns 'xx1'

พารามิเตอร์ที่หนึ่งคือจำนวนจริงใด ๆ พารามิเตอร์ที่สองคือจำนวนเต็มบวกที่ระบุจำนวนขั้นต่ำทางด้านซ้ายของจุดทศนิยมและพารามิเตอร์ที่สามเป็นจำนวนเต็มบวกตัวเลือกระบุหมายเลขถ้าตัวเลขทางด้านขวาของจุดทศนิยม

function zPad(n, l, r){
    return(a=String(n).match(/(^-?)(\d*)\.?(\d*)/))?a[1]+(Array(l).join(0)+a[2]).slice(-Math.max(l,a[2].length))+('undefined'!==typeof r?(0<r?'.':'')+(a[3]+Array(r+1).join(0)).slice(0,r):a[3]?'.'+a[3]:''):0
}

ดังนั้น

           zPad(6, 2) === '06'
          zPad(-6, 2) === '-06'
       zPad(600.2, 2) === '600.2'
        zPad(-600, 2) === '-600'
         zPad(6.2, 3) === '006.2'
        zPad(-6.2, 3) === '-006.2'
      zPad(6.2, 3, 0) === '006'
        zPad(6, 2, 3) === '06.000'
    zPad(600.2, 2, 3) === '600.200'
zPad(-600.1499, 2, 3) === '-600.149'

อย่าบูรณาการล้อใช้สตริงขีดเส้นใต้ :

jsFiddle

var numToPad = '5';

alert(_.str.pad(numToPad, 6, '0')); // yields: '000005'

นี่คือโซลูชัน ES6

function pad(num, len) {
  return '0'.repeat(len - num.toString().length) + num;
}
alert(pad(1234,6));

ในเบราว์เซอร์สมัยใหม่ทั้งหมดที่คุณสามารถใช้ได้

numberStr.padStart(numberLength, "0");

function zeroFill(num, numLength) {
  var numberStr = num.toString();

  return numberStr.padStart(numLength, "0");
}

var numbers = [0, 1, 12, 123, 1234, 12345];

numbers.forEach(
  function(num) {
    var numString = num.toString();
    
    var paddedNum = zeroFill(numString, 5);

    console.log(paddedNum);
  }
);

นี่คือการอ้างอิง MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

ไม่ใช่ว่าคำถามนี้ต้องการคำตอบเพิ่มเติม แต่ฉันคิดว่าฉันจะเพิ่มเวอร์ชัน Lodash แบบง่ายของนี้

_.padLeft(number, 6, '0')

วิธีล่าสุดในการทำเช่นนี้ง่ายกว่ามาก:

var number = 2
number.toLocaleString(undefined, {minimumIntegerDigits:2})

output: "02"

เป็นอีกวิธีหนึ่ง แต่ฉันคิดว่ามันอ่านง่ายขึ้น

function zeroFill(text, size)
{
  while (text.length < size){
  	text = "0" + text;
  }
  
  return text;
}

อันนี้มีถิ่นกำเนิดน้อยกว่า แต่อาจเร็วที่สุด ...

zeroPad = function (num, count) {
    var pad = (num + '').length - count;
    while(--pad > -1) {
        num = '0' + num;
    }
    return num;
};

ทางออกของฉัน

Number.prototype.PadLeft = function (length, digit) {
    var str = '' + this;
    while (str.length < length) {
        str = (digit || '0') + str;
    }
    return str;
};

การใช้

var a = 567.25;
a.PadLeft(10); // 0000567.25

var b = 567.25;
b.PadLeft(20, '2'); // 22222222222222567.25

ทำไมไม่ใช้การเรียกซ้ำ

function padZero(s, n) {
    s = s.toString(); // in case someone passes a number
    return s.length >= n ? s : padZero('0' + s, n);
}

การจับลิงบางตัวก็ใช้งานได้เช่นกัน

String.prototype.padLeft = function (n, c) {
  if (isNaN(n))
    return null;
  c = c || "0";
  return (new Array(n).join(c).substring(0, this.length-n)) + this; 
};
var paddedValue = "123".padLeft(6); // returns "000123"
var otherPadded = "TEXT".padLeft(8, " "); // returns "    TEXT"

function pad(toPad, padChar, length){
    return (String(toPad).length < length)
        ? new Array(length - String(toPad).length + 1).join(padChar) + String(toPad)
        : toPad;
}

pad(5, 0, 6) = 000005

pad('10', 0, 2) = 10 // don't pad if not necessary

pad('S', 'O', 2) = SO

... ฯลฯ

ไชโย

ง่าย , การแก้ปัญหามากที่สุดตรงไปข้างหน้าคุณจะได้พบกับ

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