logo标签列表

如何在JavaScript中将数字格式化为百分比值？

javascript
46

之前使用 ExtJS 来格式化数字为百分数。现在我们不再使用 ExtJS，需要使用普通的 JavaScript 完成相同的任务。

需要一个方法，它将接受数字和格式（通常是 %），并将该数字转换为指定格式。

0 -> 0.00% = 0.00%
25 -> 0.00% = 25.00%
50 -> 0.00% = 50.00%
150 -> 0.00% = 150.00%
6个回答
94

您可以使用 Number.toLocaleString() 方法：

var num=25;
var s = Number(num/100).toLocaleString(undefined,{style: 'percent', minimumFractionDigits:2}); 
console.log(s);

No '%' sign needed, output is: 

25.00%

参见toLocaleString()文档，以获取格式对象参数的更多选项。

2
不要忘记检查 toLocaleString 的浏览器兼容性 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#Browser_compatibility. - Gokhan Sari
74

以下是您所需要的内容。

var x=150;
console.log(parseFloat(x).toFixed(2)+"%");
x=0;
console.log(parseFloat(x).toFixed(2)+"%");
x=10
console.log(parseFloat(x).toFixed(2)+"%");

1
并非所有语言都在结尾使用百分号%，这不是“格式化”。 - Aegletes
6

现代JavaScript:

对于任何一个，如果您是从整数开始而不是小数，请删除* 100。

基础知识：

const displayPercent = (percent) => `${(percent * 100).toFixed(2)}%`;

动态操作对未定义值的安全处理
const displayPercent = (percent, fallback, digits = 2) =>
  (percent === null || percent === undefined) ? fallback : `${(percent * 100).toFixed(digits)}%`;

Typescript:

const displayPercent = (percent: number) => `${(percent * 100).toFixed(2)}%`;
0

我有一些十进制值，例如0.01235和0.016858542，我想将它们转换为百分比1.235％和1.6858542％。我以为这很容易，只需计算(0.012858542 * 100)就可以了。但我错了，(0.012858542 * 100) = 1.2858542000000002，因为存在十进制转换问题。

让我们在计算中添加toFixed()，然后我就得到了正确的值。

(0.012858542*100).toFixed(7)    // returns "1.2858542"
(0.01235*100).toFixed(7)        // returns "1.2350000"

我不喜欢在不必要的情况下显示四个尾随零。我想到的一个解决方案是使用{{link1：replace()}}来删除所有尾随零，但最终我使用了Numeral.js，因为它可以在轻量级的同时为我完成所有工作。我可以推荐它！

import numeral from 'numeral';

numeral(0.012858542 * 100).format('0.00[0000]') // returns "1.2858542"
numeral(0.01235 * 100).format('0.00[0000]')     // returns "1.235"
0
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
function myFunction(num) {
number = num.toString();;
console.log(number)
var words2 = number.split(".");
    for (var i = 0; i < words2.length; i++) {
        words2[i] += " ";
    }

    num1 = words2[0];
    num2 = words2[1];

    num1 = num1.trim();

    if(num2==undefined){
         number1 = num1+'.00%';
         return number1;
    }else{
         num2 = num2.trim();
         number1 = num1+'.'+num2+'%';
         return number1;
    }

}
document.getElementById("demo").innerHTML = myFunction(50.12);
</script>

</body>
</html>
-1

将数字转换为带有X个小数位的百分比

function toPercent(number, float) {
  var percent = parseFloat(number * 100).toFixed(float) + "%";
  return percent;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接