หมายเลขรูปแบบที่จะแสดงทศนิยม 2 ตำแหน่งเสมอ

ฉันต้องการจัดรูปแบบตัวเลขของฉันให้แสดงทศนิยม 2 ตำแหน่งเสมอการปัดเศษที่เกี่ยวข้อง

ตัวอย่าง:

number     display
------     -------
1          1.00
1.341      1.34
1.345      1.35

ฉันได้ใช้สิ่งนี้:

parseFloat(num).toFixed(2);

แต่มันแสดง1เป็นมากกว่า11.00

(Math.round(num * 100) / 100).toFixed(2);

การสาธิตสด

var num1 = "1";
document.getElementById('num1').innerHTML = (Math.round(num1 * 100) / 100).toFixed(2);

var num2 = "1.341";
document.getElementById('num2').innerHTML = (Math.round(num2 * 100) / 100).toFixed(2);

var num3 = "1.345";
document.getElementById('num3').innerHTML = (Math.round(num3 * 100) / 100).toFixed(2);

span {
    border: 1px solid #000;
    margin: 5px;
    padding: 5px;
}

<span id="num1"></span>
<span id="num2"></span>
<span id="num3"></span>

หมายเหตุว่ามันจะปัดเศษทศนิยม 2 ตำแหน่งเพื่อให้การป้อนข้อมูลที่จะกลับมา1.3461.35

Number(1).toFixed(2);         // 1.00
Number(1.341).toFixed(2);     // 1.34
Number(1.345).toFixed(2);     // 1.34 NOTE: See andy's comment below.
Number(1.3450001).toFixed(2); // 1.35

document.getElementById('line1').innerHTML = Number(1).toFixed(2);
document.getElementById('line2').innerHTML = Number(1.341).toFixed(2);
document.getElementById('line3').innerHTML = Number(1.345).toFixed(2);
document.getElementById('line4').innerHTML = Number(1.3450001).toFixed(2);

<span id="line1"></span>
<br/>
<span id="line2"></span>
<br/>
<span id="line3"></span>
<br/>
<span id="line4"></span>

คำตอบนี้จะล้มเหลวถ้าvalue = 1.005จะล้มเหลวถ้า

ในฐานะที่เป็นทางออกที่ดีกว่าปัญหาการปัดเศษสามารถหลีกเลี่ยงได้โดยใช้ตัวเลขที่แสดงในรูปแบบเลขชี้กำลัง:

Number(Math.round(1.005+'e2')+'e-2'); // 1.01

รหัสทำความสะอาดตามที่แนะนำโดย @Kon และผู้แต่งดั้งเดิม:

Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)

คุณสามารถเพิ่มtoFixed()ที่ท้ายเพื่อรักษาจุดทศนิยมเช่น: 1.00แต่โปรดทราบว่ามันจะกลับมาเป็นสตริง

Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces).toFixed(decimalPlaces)

เครดิต: การปัดเศษทศนิยมใน JavaScript

var num = new Number(14.12);
console.log(num.toPrecision(2));//outputs 14
console.log(num.toPrecision(3));//outputs 14.1
console.log(num.toPrecision(4));//outputs 14.12
console.log(num.toPrecision(5));//outputs 14.120

สำหรับการปัดเศษที่แม่นยำที่สุดให้สร้างฟังก์ชันนี้:

function round(value, decimals) {
    return Number(Math.round(value +'e'+ decimals) +'e-'+ decimals).toFixed(decimals);
}

และใช้เพื่อปัดเศษทศนิยม 2 ตำแหน่ง:

console.log("seeked to " + round(1.005, 2));
> 1.01

ขอขอบคุณที่Razu , นี้บทความและMDN อ้างอิง

สำหรับเบราว์เซอร์สมัยใหม่ให้ใช้toLocaleString:

var num = 1.345;
num.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 2 });

ระบุแท็กสถานที่เกิดเหตุเป็นพารามิเตอร์แรกที่จะควบคุมตัวคั่นทศนิยม สำหรับจุดให้ใช้ตัวอย่างเช่นโลแคล English US:

num.toLocaleString("en-US", { maximumFractionDigits: 2, minimumFractionDigits: 2 });

ซึ่งจะช่วยให้:

1.35

ประเทศส่วนใหญ่ในยุโรปใช้เครื่องหมายจุลภาคเป็นตัวคั่นทศนิยมดังนั้นหากคุณใช้ภาษาสวีเดน / สวีเดน:

num.toLocaleString("sv-SE", { maximumFractionDigits: 2, minimumFractionDigits: 2 });

มันจะให้:

1,35

คำตอบที่ง่ายที่สุด:

var num = 1.2353453;
num.toFixed(2); // 1.24

ตัวอย่าง: http://jsfiddle.net/E2XU7/

วิธีแก้ปัญหาทั่วไปที่มากขึ้นสำหรับการปัดเศษเป็นตำแหน่ง N

function roundN(num,n){
  return parseFloat(Math.round(num * Math.pow(10, n)) /Math.pow(10,n)).toFixed(n);
}


console.log(roundN(1,2))
console.log(roundN(1.34,2))
console.log(roundN(1.35,2))
console.log(roundN(1.344,2))
console.log(roundN(1.345,2))
console.log(roundN(1.344,3))
console.log(roundN(1.345,3))
console.log(roundN(1.3444,3))
console.log(roundN(1.3455,3))

Output

1.00
1.34
1.35
1.34
1.35
1.344
1.345
1.344
1.346

var number = 123456.789;


console.log(new Intl.NumberFormat('en-IN', { maximumFractionDigits: 2 }).format(number));

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat

หากคุณใช้ jQuery อยู่แล้วคุณสามารถดูการใช้ปลั๊กอินรูปแบบตัวเลข jQuery

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

$.number( 123, 2 ); // Returns '123.00'

นอกจากนี้คุณยังจะได้รับรูปแบบ jQuery จำนวนจาก GitHub

นี่คือสิ่งที่คุณหมายถึงอะไร

function showAsFloat(num, n){
      return !isNaN(+num) ? (+num).toFixed(n || 2) : num;
}

document.querySelector('#result').textContent = 
    [
     'command                      | result',
     '-----------------------------------------------',
     'showAsFloat(1);              | ' + showAsFloat(1),
     'showAsFloat(1.314);          | ' + showAsFloat(1.314),
     'showAsFloat(\'notanumber\')    | ' + showAsFloat('notanumber'),
     'showAsFloat(\'23.44567\', 3)   | ' + showAsFloat('23.44567', 3),
     'showAsFloat(2456198, 5)      | ' + showAsFloat('2456198', 5),
     'showAsFloat(0);              | ' + showAsFloat(0)
    ].join('\n');

<pre id="result"></pre>

แปลงตัวเลขให้เป็นสตริงโดยเก็บทศนิยมเพียงสองตัว:

var num = 5.56789;
var n = num.toFixed(2);

ผลลัพธ์ของ n จะเป็น:

5.57

คุณกำลังมองหาพื้น?

var num = 1.42482;
var num2 = 1;
var fnum = Math.floor(num).toFixed(2);
var fnum2 = Math.floor(num2).toFixed(2);
alert(fnum + " and " + fnum2); //both values will be 1.00

function currencyFormat (num) {
    return "$" + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

console.info(currencyFormat(2665));   // $2,665.00
console.info(currencyFormat(102665)); // $102,665.00

นี่เป็นฟังก์ชั่นทั่วไปที่สามารถจัดรูปแบบตามจำนวนตำแหน่งทศนิยมใด ๆ :

function numberFormat(val, decimalPlaces) {

    var multiplier = Math.pow(10, decimalPlaces);
    return (Math.round(val * multiplier) / multiplier).toFixed(decimalPlaces);
}

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

คำอธิบายอย่างละเอียดเกี่ยวกับการปัดเศษและการจัดรูปแบบอยู่ที่นี่: http://www.merlyn.demon.co.uk/js-round.htm#RiJ

ตามกฎทั่วไปการปัดเศษและการจัดรูปแบบควรถูกทำเป็นรูปเป็นขั้นตอนสุดท้ายก่อนออก การทำก่อนหน้านี้อาจทำให้เกิดข้อผิดพลาดที่ใหญ่มากและทำลายการจัดรูปแบบ

เพิ่งพบกับหนึ่งในเธรดที่ยาวที่สุดนี้ด้านล่างคือโซลูชันของฉัน:

parseFloat(Math.round((parseFloat(num * 100)).toFixed(2)) / 100 ).toFixed(2)

แจ้งให้เราทราบหากใครสามารถกระตุ้นรู

คุณไม่ได้ให้ภาพรวมทั้งหมดกับเรา

javascript:alert(parseFloat(1).toFixed(2))แสดง 1.00 ในเบราว์เซอร์ของฉันเมื่อฉันวางไว้ในแถบตำแหน่ง 0 อย่างไรก็ตามหากคุณทำบางสิ่งกับมันหลังจากนั้นมันจะเปลี่ยนกลับ

var num = 2
document.getElementById('spanId').innerHTML=(parseFloat(num).toFixed(2)-1)


shows 1 and not 1.00

var quantity = 12;

var import1 = 12.55;

var total = quantity * import1;

var answer = parseFloat(total).toFixed(2);

document.write(answer);

ฉันต้องตัดสินใจระหว่างการแปลง parseFloat () และ Number () ก่อนที่ฉันจะทำการโทร toFixed () นี่คือตัวอย่างของการจัดรูปแบบตัวเลขสำหรับการป้อนข้อมูลผู้ใช้หลังการจับภาพ

HTML:

<input type="number" class="dec-number" min="0" step="0.01" />

จัดการเหตุการณ์:

$('.dec-number').on('change', function () {
     const value = $(this).val();
     $(this).val(value.toFixed(2));
});

โค้ดด้านบนจะส่งผลให้เกิดข้อยกเว้น TypeError โปรดทราบว่าแม้ว่าประเภทการป้อน html จะเป็น "หมายเลข" แต่การป้อนข้อมูลของผู้ใช้นั้นเป็นประเภทข้อมูล อย่างไรก็ตามฟังก์ชัน toFixed () อาจถูกเรียกใช้บนวัตถุที่เป็นตัวเลขเท่านั้น

รหัสสุดท้ายของฉันจะมีลักษณะดังนี้:

$('.dec-number').on('change', function () {
     const value = Number($(this).val());
     $(this).val(value.toFixed(2));
});

เหตุผลที่ฉันชอบโยนด้วย Number () กับ parseFloat () เป็นเพราะฉันไม่ต้องทำการตรวจสอบเพิ่มเติมไม่ว่าจะเป็นสตริงอินพุตว่างเปล่าหรือค่า NaN ฟังก์ชัน Number () จะจัดการสตริงว่างโดยอัตโนมัติและแปลงเป็นศูนย์

ฉันชอบ:

var num = 12.749;
parseFloat((Math.round(num * 100) / 100).toFixed(2)); // 123.75

ปัดเศษตัวเลขด้วยทศนิยม 2 ตำแหน่งจากนั้นตรวจสอบให้แน่ใจว่าได้ทำการวิเคราะห์ด้วยparseFloat() การคืนค่า Number ไม่ใช่ String ยกเว้นว่าคุณไม่สนใจว่าเป็น String หรือ Number

ขยายวัตถุคณิตศาสตร์ด้วยวิธีความแม่นยำ

Object.defineProperty(Math, 'precision',{
   value: function (value,precision,type){
             var v = parseFloat(value),
                 p = Math.max(precision,0)||0,
                 t = type||'round';
              return (Math[t](v*Math.pow(10,p))/Math.pow(10,p)).toFixed(p);
          }
    });

console.log(
    Math.precision(3.1,3), // round 3 digits 
    Math.precision(0.12345,2,'ceil'), // ceil 2 digits
    Math.precision(1.1) // integer part
)

parseInt(number * 100) / 100; ทำงานให้ฉัน

นี่เป็นอีกวิธีในการปัดเศษโดยใช้เฉพาะพื้นหมายถึงทำให้แน่ใจว่าจำนวนที่คำนวณได้จะไม่สูงกว่าจำนวนเงินดั้งเดิม (บางครั้งจำเป็นสำหรับธุรกรรม):

Math.floor(num* 100 )/100;

คุณสามารถลองรหัสนี้:

    function FormatNumber(number, numberOfDigits = 2) {
        try {
            return new Intl.NumberFormat('en-US').format(parseFloat(number).toFixed(2));
        } catch (error) {
            return 0;
        }
    }

    var test1 = FormatNumber('1000000.4444');
    alert(test1); // 1,000,000.44

    var test2 = FormatNumber(100000000000.55555555, 4);
    alert(test2); // 100,000,000,000.56

ลองรหัสด้านล่าง:

function numberWithCommas(number) { 

   var newval = parseFloat(Math.round(number * 100) / 100).toFixed(2);

   return newval.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

(num + "").replace(/^([0-9]*)(\.[0-9]{1,2})?.*$/,"$1$2")

นี่คือวิธีที่ฉันจะแก้ปัญหาของฉัน:

parseFloat(parseFloat(floatString).toFixed(2));