格式编号始终显示2位小数

我想将我的数字格式化为始终显示小数点后2位,在适用的情况下四舍五入。

示例:

number     display------     -------1          1.001.341      1.341.345      1.35

我一直在用这个:

parseFloat(num).toFixed(2);

但它将1显示为1,而不是1.00

1669188 次浏览

你在找地板吗?

var num = 1.42482;var num2 = 1;var fnum = Math.floor(num).toFixed(2);var fnum2 = Math.floor(num2).toFixed(2);console.log(fnum + " and " + fnum2); //both values will be 1.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.346将返回1.35

你没有给我们整个画面。

当我将其粘贴到位置栏时,javascript:alert(parseFloat(1).toFixed(2))在我的浏览器中显示1.00。但是如果你之后对它做了一些事情,它会恢复。

alert(parseFloat(1).toFixed(2))
var num = 2document.getElementById('spanId').innerHTML = (parseFloat(num).toFixed(2) - 1)
<span id="spanId"></span>

shows 1 and not 1.00

在需要特定格式的地方,您应该编写自己的例程或使用满足您需要的库函数。基本的ECMAScript功能通常不足以显示格式化的数字。

这里有一个关于舍入和格式化的详细解释:http://www.merlyn.demon.co.uk/js-round.htm#RiJ

作为一般规则,舍入和格式化只能作为输出前的最后一步执行。提前执行可能会引入意外的大错误并破坏格式化。

你是这个意思吗?

[编辑20200530]答案@拉祖提供是最好的imho。所以这是一个稍微重构的版本。

片段代码仍然不会为showAsFloat(2.3346)之类的东西返回正确的值(结果2.33,但应该是2.34)。所以,另见

const showAsFloat = (input, decimals = 2, asString = false) => {if (input === null || input.constructor === Boolean || isNaN(+input)) {return input;}const converted = +( `${Math.round( parseFloat( `${input}e${decimals}` )  )}e-${decimals}` );return asString ? converted.toFixed(decimals) : converted};
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, true)| ' + showAsFloat('24568', 5, true),'showAsFloat(2456198, 5)      | ' + showAsFloat('24568', 5),'showAsFloat(0, 2, true);     | ' + showAsFloat(0, 2, true),'showAsFloat(1.345);          | ' + showAsFloat(1.345),'showAsFloat(0.005);          | ' + showAsFloat(0.005),'showAsFloat(null);           | ' + showAsFloat(null),
].join('\n');
<pre id="result"></pre>

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

Number(1).toFixed(2);         // 1.00Number(1.341).toFixed(2);     // 1.34Number(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>

如果您已经在使用jQuery,您可以考虑使用jQuery数字格式插件。

该插件可以将格式化的数字作为字符串返回,您可以设置小数和数千个分隔符,您可以选择要显示的小数位数。

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

你也可以得到来自GitHub的jQuery数字格式

最简单的答案:

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

示例:http://jsfiddle.net/E2XU7/

var quantity = 12;
var import1 = 12.55;
var total = quantity * import1;
var answer = parseFloat(total).toFixed(2);
document.write(answer);
(num + "").replace(/^([0-9]*)(\.[0-9]{1,2})?.*$/,"$1$2")
function currencyFormat (num) {return "$" + num.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")}
console.info(currencyFormat(2665));   // $2,665.00console.info(currencyFormat(102665)); // $102,665.00

如果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中的舍入小数

这里还有一个通用函数,可以格式化为任意数量的小数位:

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

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

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

要获得最准确的四舍五入,请创建此函数并使用它四舍五入到小数点后2位:

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


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

> 1.01

感谢Razu这个文章和MDN的Math.round参考

将数字转换为字符串,只保留两个小数:

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

n的结果将是:

5.57

我喜欢:

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

用2个小数点整数,然后确保使用parseFloat()解析它返回Number,而不是String,除非你不在乎它是String还是Number。

使用精度方法扩展Math对象

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 digitsMath.precision(0.12345,2,'ceil'), // ceil 2 digitsMath.precision(1.1) // integer part)

我是这样解决我的问题的:

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

舍入到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.001.341.351.341.351.3441.3451.3441.346

function number_format(string,decimals=2,decimal=',',thousands='.',pre='R$ ',pos=' Reais'){var numbers = string.toString().match(/\d+/g).join([]);numbers = numbers.padStart(decimals+1, "0");var splitNumbers = numbers.split("").reverse();var mask = '';splitNumbers.forEach(function(d,i){if (i == decimals) { mask = decimal + mask; }if (i>(decimals+1) && ((i-2)%(decimals+1))==0) { mask = thousands + mask; }mask = d + mask;});return pre + mask + pos;}var element = document.getElementById("format");var money= number_format("10987654321",2,',','.');element.innerHTML = money;
#format{display:inline-block;padding:10px;border:1px solid #ddd;background:#f5f5f5;}
<div id='format'>Test 123456789</div>

parseInt(number * 100) / 100;为我工作。

我必须在parseFloat()和Number()转换之间做出决定,然后才能调用to固定()。这是捕获后用户输入的数字格式示例。

超文本标记语言:

<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输入类型是“数字”,但用户输入实际上是“字符串”数据类型。然而,toFixt()函数只能在一个是数字的对象上调用。

我的最终代码如下:

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

我喜欢使用Number()与parseFloat()强制转换的原因是因为我不必对空输入字符串或NaN值执行额外的验证。Number()函数将自动处理空字符串并将其转换为零。

对于现代浏览器,请使用#0

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

指定一个区域设置标记作为控制十进制分隔符的第一个参数。对于点,使用例如英语美国区域设置:

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

其中规定:

1.35

大多数欧洲国家使用逗号作为小数分隔符,因此如果您使用瑞典语/瑞典语言环境:

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

它将提供:

1,35

这是另一种仅使用地板进行舍入的解决方案,这意味着确保计算的金额不会大于原始金额(有时需要进行交易):

Math.floor(num* 100 )/100;

试试下面的代码:

function numberWithCommas(number) {
var newval = parseFloat(Math.round(number * 100) / 100).toFixed(2);
return newval.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}

刚刚遇到这个最长的线程,下面是我的解决方案:

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

让我知道有没有人能戳个洞

您可以尝试此代码:

    function FormatNumber(number, numberOfDigits = 2) {try {return new Intl.NumberFormat('en-US').format(parseFloat(number).toFixed(numberOfDigits));} 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.5556

var num1 = "0.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>

RegExp-替代方法

在输入时,您有字符串(因为您使用解析),因此我们可以仅使用字符串操作和整数计算来获取结果

let toFix2 = (n) => n.replace(/(-?)(\d+)\.(\d\d)(\d+)/, (_,s,i,d,r)=> {let k= (+r[0]>=5)+ +d - (r==5 && s=='-');return s + (+i+(k>99)) + "." + ((k>99)?"00":(k>9?k:"0"+k));})

// TESTs
console.log(toFix2("1"));console.log(toFix2("1.341"));console.log(toFix2("1.345"));console.log(toFix2("1.005"));

补充说明

  • s是符号,i是整数部分,d是点后的前两位,r是其他数字(我们使用r[0]值进行计算舍入)
  • k包含有关最后两位数字的信息(表示为整数)
  • 如果r[0]>=5,那么我们将1添加到d-但如果我们有负数(s=='-')并且r完全等于5,那么在这种情况下我们会减去1(出于兼容性原因-以同样的方式Math.round适用于负数,例如Math.round(-1.5)==-1
  • 之后,如果最后两位数字k大于99,那么我们将1添加到整数部分i
function formatValeurDecimal(valeurAFormate,longueurPartieEntier,longueurPartieDecimal){
valeurAFormate = valeurAFormate.replace(",",".")valeurAFormate = parseFloat(valeurAFormate).toFixed(longueurPartieDecimal)if(valeurAFormate == 'NaN'){return 0}
//____________________valeurPartieEntier__________________________________var valeurPartieEntier = valeurAFormate | 0
var strValeur = valeurPartieEntier.toString()strValeur = strValeur.substring(0, longueurPartieEntier)valeurPartieEntier = strValeur
//____________________valeurPartieDecimal__________________________________strValeur = valeurAFormatestrValeur = strValeur.substring(strValeur.indexOf('.')+1)var valeurPartieDecimal = strValeur
valeurAFormate = valeurPartieEntier +'.'+valeurPartieDecimalif(valeurAFormate == null){valeurAFormate = 0}
return valeurAFormate

}

您可以使用numeral.js

numeral(1.341).format('0.00') // 1.34numeral(1.345).format('0.00') // 1.35

我建议你用

new Intl.NumberFormat('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(num)

这样,您还将拥有您指定的国家/地区的本地格式,并且它将保证显示精确的2位小数(无论num是1还是1.12345,它都将分别显示1.00和1.12)

在这个例子中,我使用了德语本地化,因为我希望我的数字显示有数千个分隔符,所以这将是一些输出:

1 => 1,001.12 => 1,121.1234 => 1,121234 => 1.234,001234.1234 => 1.234,12
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous"></script>

<input type="text" class = 'item_price' name="price" min="1.00" placeholder="Enter Price" value="\{\{ old('price') }}" step="">
<script>$(document).ready(function() {$('.item_price').mask('00000.00', { reverse: true });});</script>

这是我的安全解决方案,它使用eps的。这将修复.15的四舍五入,例如

function myFunction(a) {
return Math.round((a + Number.EPSILON) * 100) / 100}