Make a number a percentage

Question

What's the best way to strip the "0."XXX% off a number and make it a percentage? What happens if the number happens to be an int?

var number1 = 4.954848;
var number2 = 5.9797;

$(document).ready(function() {    
    final = number1/number2;
    alert(final.toFixed(2) + "%");
});

score 238 · Accepted Answer · edited Nov 05 '21 at 12:08

238

A percentage is just:

(number_one / number_two) * 100

No need for anything fancy:

var number1 = 4.954848;
var number2 = 5.9797;

alert(Math.floor((number1 / number2) * 100)); //w00t!

edited Nov 05 '21 at 12:08

Mikael Dúi Bolinder

2,080
2
19
44

answered Dec 15 '11 at 15:44

Naftali

144,921
39
244
303

53

to keep the pct decimal: var pct = (num*100).toFixed(1) + "%"; – ericjam Nov 09 '12 at 21:18
8

alert(~~((number1 / number2) * 100)); as the Math.floor is slower than ~~ :) – nyxz Apr 07 '15 at 13:34
4

Why `Math.floor`? And not `Math.round`? Even in your example `4.954848 / 5.9797` is closer to `83%` than to `82%` your code outputs. – May 16 '17 at 14:46
13

@nyxz Ugg-- you write code for humans, not machines. Unless you are in some super-tight critical loop, `~~` is much less readable than `Math.floor` – Jeremy J Starcher May 16 '17 at 15:19
1

@gaazkam so make another answer that answers like that if you want. Please do not change code in answers like that... – Naftali May 16 '17 at 15:20
1

@Neal Any explanation why you think `floor` is superior to `round`? – May 16 '17 at 15:22
7

No reason that I know of. 83% of all percentages are made up anyway – Naftali May 17 '17 at 01:21
Who needs a formal education when you have SO! :-) thanks so much (2.56 calories saved for not having to figure it out my self) – James Harrington Nov 01 '17 at 23:33
Use Math.round() ... it's not worth debate. Math.round() rounds up, equal, or down... while Math.floor() only rounds equal or down. – Chad Jul 11 '23 at 18:45

score 73 · Answer 2 · answered Jun 03 '16 at 00:51

73

((portion/total) * 100).toFixed(2) + '%'

answered Jun 03 '16 at 00:51

xtrem

1,737
12
13

score 52 · Answer 3 · answered Nov 20 '16 at 03:18

52

The best solution, where en is the English locale:

fraction.toLocaleString("en", {style: "percent"})

answered Nov 20 '16 at 03:18

Liron Shapira

1,967
1
14
17

1

Beware for support or not on smartphones.... Currently the support is not that ideal. – jdehaan Jan 31 '18 at 10:10
(9.23).toLocaleString("en", {style: "percent"}) returns "923%", is there a way to solve it? – saeta Mar 23 '18 at 15:31
2

@slorenzo 9.23 is in fact 923%. Assuming you want 9.23%, you would need to divide 9.23 by 100 and then try the conversion. – Steve Hawkins Jun 25 '18 at 14:29
4

@slorenzo To get the decimal digits as well you could try something like `fraction.toLocaleString("en", { style: "percent", minimumFractionDigits: 2 })` See https://stackoverflow.com/a/29773435/411428 – Manfred Jan 28 '19 at 00:21

Alex Turpin · Answer 4 · 2011-12-15T15:51:54.577

21

Well, if you have a number like 0.123456 that is the result of a division to give a percentage, multiply it by 100 and then either round it or use toFixed like in your example.

Math.round(0.123456 * 100) //12

Here is a jQuery plugin to do that:

jQuery.extend({
    percentage: function(a, b) {
        return Math.round((a / b) * 100);
    }
});

Usage:

alert($.percentage(6, 10));

edited Dec 15 '11 at 15:51

answered Dec 15 '11 at 15:46

Alex Turpin

46,743
23
113
145

15

Where is `jQuery.round` and `jQuery.divide` and `jQuery.multiply` – Raynos Dec 15 '11 at 15:55
2

@Xeon06 hmmm the OP seems to have switched his mind. weird. my answer **did not** have enough jQuery in it. – Naftali Dec 15 '11 at 16:07
2

@Raynos I had started on a multiply using a loop and a round using string manipulation but I gave up on the division. – Alex Turpin Dec 15 '11 at 16:14

score 3 · Answer 5 · answered Apr 28 '20 at 16:53

3

Most answers suggest appending '%' at the end. I would rather prefer Intl.NumberFormat() with { style: 'percent'}

var num = 25;

var option = {
  style: 'percent'

};
var formatter = new Intl.NumberFormat("en-US", option);
var percentFormat = formatter.format(num / 100);
console.log(percentFormat);

answered Apr 28 '20 at 16:53

StangSpree

421
1
5
22

doesn't work with percentages below zero. – Andrew Dec 08 '20 at 22:27

score 2 · Answer 6 · edited Jul 29 '22 at 12:49

2

var percent = Math.floor(100 * number1 / number2 - 100) + ' %';

edited Jul 29 '22 at 12:49

Apostolos

10,033
5
24
39

answered Jan 11 '17 at 22:16

Tomas Kubes

23,880
18
111
148

adamwdraper · Answer 7 · 2016-12-02T21:43:56.663

1

Numeral.js is a library I created that can can format numbers, currency, percentages and has support for localization.

numeral(0.7523).format('0%') // returns string "75%"

numeral.js

edited Dec 02 '16 at 21:43

answered Dec 02 '16 at 21:37

adamwdraper

193
3
4

4

Last commit for `numeral.js` was 27 Mar 2017. Either the library is perfect (no defects) or it is no longer actively maintained. As of 28 Jan 2019 the project has 135 open issues with the oldest being from Nov 2012. The number of open issues with no commit in almost 2 years suggests that the project is no longer looked after. Happy to be convinced otherwise. – Manfred Jan 28 '19 at 00:11

Make a number a percentage

7 Answers7

Linked

Related