javascript - toFixed not working - Stack Overflow

admin管理员组

文章数量:1396114

I have a saving price which is using the Math.ceil method to round up the output to the nearest £, however when I am implementing toFixed to give me £25.00, all I am getting is £25.

my code is as such:-

jQuery(function($) {
    var price = $('.product-info-short meta[itemprop="price"]').attr("content");
    var discount = price/10;
    var earlyBirdPrice = price-discount;
    var div = document.querySelector('.earlyBirdPrice');


//method for early bird price//
div.innerHTML += '<div class="earlyBirdPrice">Price: £' + 
Number(earlyBirdPrice.toFixed(2)).toLocaleString('en') + '</div>';

//method for discount price//
div.innerHTML += '<div class="discount"> Saving you £' + 
Number(Math.ceil(discount.toFixed(2))).toLocaleString('en') + 
'</div>';

});

js fiddle here: /

what am i doing wrong?

I have a saving price which is using the Math.ceil method to round up the output to the nearest £, however when I am implementing toFixed to give me £25.00, all I am getting is £25.

my code is as such:-

jQuery(function($) {
    var price = $('.product-info-short meta[itemprop="price"]').attr("content");
    var discount = price/10;
    var earlyBirdPrice = price-discount;
    var div = document.querySelector('.earlyBirdPrice');


//method for early bird price//
div.innerHTML += '<div class="earlyBirdPrice">Price: £' + 
Number(earlyBirdPrice.toFixed(2)).toLocaleString('en') + '</div>';

//method for discount price//
div.innerHTML += '<div class="discount"> Saving you £' + 
Number(Math.ceil(discount.toFixed(2))).toLocaleString('en') + 
'</div>';

});

js fiddle here: https://jsfiddle/y18h9s7f/

what am i doing wrong?

• javascript
• jquery

Share Improve this question Follow asked Nov 29, 2017 at 9:02 Who Me Dunno MateWho Me Dunno Mate 54066 silver badges1616 bronze badges 3

• Why are you converting it back to number? Just earlyBirdPrice.toFixed(2) should be enough. – Rajesh Commented Nov 29, 2017 at 9:08
• Be careful. You are converting to/from numbers/strings all over the place. – evolutionxbox Commented Nov 29, 2017 at 9:09
• could you try it with var discount = parseFloat(price)/10; var earlyBirdPrice = parseFloat(price)-parseFloat(discoun)t; – Kiwi Rupela Commented Nov 29, 2017 at 9:31

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 6

What you're doing wrong is that after converting to a string with toFixed, you're converting back to a number, and then calling toLocaleString('en') on that number.

You can either use toFixed to get a non-locale-specific string with the given number of decimal places, or toLocaleString('en') to get a locale-specific string with the default number of places, but not both.

You probably want to look at using Intl.NumberFormat (spec | MDN) if it's supported by your target environments (you can feature-test it and fall back to something else). Example:

const formatter = typeof Intl === "object" && Intl.NumberFormat
  ? new Intl.NumberFormat('en', { // Yay, we have Intl.NumberFormat
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    })
  : {format: n => n.toFixed(2) }; // Boo, fall back. (Maybe something more intricate here.)
console.log(formatter.format(42.546789));

That outputs 42.55 because I'm using the en locale. If I used de for German, it shows 42,55:

const formatter = typeof Intl === "object" && Intl.NumberFormat
  ? new Intl.NumberFormat('de', { // Yay, we have Intl.NumberFormat
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    })
  : {format: n => n.toFixed(2) }; // Boo, fall back. (Maybe something more intricate here.)
console.log(formatter.format(42.546789));

This one uses the browser's default locale (e.g., user-specific):

const formatter = typeof Intl === "object" && Intl.NumberFormat
  ? new Intl.NumberFormat(undefined, { // Yay, we have Intl.NumberFormat
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    })
  : {format: n => n.toFixed(2) };      // Boo, fall back. (Maybe something more intricate here.)
console.log(formatter.format(42.546789));

Try this:-

div.innerHTML += '<div class="discount"> Saving you £' + Number(Math.ceil(discount)).toFixed(2) + '</div>';

Demo:- https://jsfiddle/f18o1v91/

You apply Math.ceil()/Number() on top of toFixed(), hence the result is a Number, not a float-string.

You apparently need to remove the Number wrapping :

From :

Number(Math.ceil(discount.toFixed(2))).toLocaleString('en')

To :

Math.ceil(discount).toFixed(2).toLocaleString('en')

You need to

• Remove the Number constructor wrapping
• Apply Math.ceil directly to discount

Make it

Math.ceil(discount).toFixed(2)

all I am getting is £25.

Basically Number constructor will remove the decimals if there is only 0s after the decimal.

console.log( Number( "25.00" ) );
var discount = 25.00;
console.log(Math.ceil(discount).toFixed(2))

Hey @Robbie I found your problem and solved it. You missed to apply parseFloat(). I change your code in jsfddl. please take look my solution.

//method for discount price//
div.innerHTML += '<div class="discount"> Saving you £' + parseFloat(Number(Math.ceil(discount.toFixed(2))).toLocaleString('en')).toFixed(2) + '</div>';

Here is JSfiddle link: JSFiddle https://jsfiddle/sajibremix/uj3qkd6r/ I think you found your solution. Happy coding :)

本文标签： javascripttoFixed not workingStack Overflow