提问人:Varada 提问时间:5/26/2011 最后编辑:drudgeVarada 更新时间:1/24/2023 访问量:1904116
将数字格式设置为始终显示 2 位小数
Format number to always show 2 decimal places
问:
我想将我的数字格式设置为始终显示小数点后 2 位,并在适用的情况下四舍五入。
例子:
number display
------ -------
1 1.00
1.341 1.34
1.345 1.35
我一直在用这个:
parseFloat(num).toFixed(2);
但它显示为 ,而不是 。1
1
1.00
答:
您在寻找地板吗?
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
评论
1
1.00
1.341
1.34
你没有给我们全貌。
javascript:alert(parseFloat(1).toFixed(2))
当我将其粘贴到位置栏时,在我的浏览器中显示 1.00。
但是,如果您之后对它执行某些操作,它将恢复。
alert(parseFloat(1).toFixed(2))
var num = 2
document.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]@razu提供的答案是最好的恕我直言。所以这里有一个稍微重构的版本。
代码段代码仍然不会返回类似(结果 2.33,但应该是 2.34)的正确值。所以,另请参阅。showAsFloat(2.3346)
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>
评论
1.005
1.00
1.345
1.34
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
评论
toPrecision
toFixed
const formattedVal = Number(val.toFixed(2));
toPrecision
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>
评论
1.34
Number(1.345).toFixed(2)
1.345
(1.34500001).toFixed(2)
1.35
如果你已经在使用jQuery,你可以考虑使用jQuery数字格式插件。
该插件可以将格式化的数字作为字符串返回,您可以设置小数和千位分隔符,并且可以选择要显示的小数位数。
$.number( 123, 2 ); // Returns '123.00'
评论
最简单的答案:
var num = 1.2353453;
num.toFixed(2); // 1.24
评论
toFixed
toFixed
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.00
console.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)
评论
toFixed
Number(Math.round(parseFloat(value + 'e' + decimalPlaces)) + 'e-' + decimalPlaces)
下面还有一个通用函数,可以格式化为任意数量的小数位:
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));
评论
minimumFractionDigits
为了获得最准确的舍入,请创建此函数并使用它来四舍五入到小数点后 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 位,
然后确保解析它以返回 Number,而不是 String,除非您不在乎它是 String 还是 Number。parseFloat()
评论
parseFloat("1.00") // 1
使用 precision 方法扩展 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 digits
Math.precision(0.12345,2,'ceil'), // ceil 2 digits
Math.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.00
1.34
1.35
1.34
1.35
1.344
1.345
1.344
1.346
评论
roundN(-3.4028230607370965e+38,2)
"-3.4028230607370965e+38"
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() 转换之间做出决定,然后才能进行 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 输入类型是“number”,但用户输入实际上是“string”数据类型。但是,toFixed() 函数只能在作为 Number 的对象上调用。
我的最终代码如下所示:
$('.dec-number').on('change', function () {
const value = Number($(this).val());
$(this).val(value.toFixed(2));
});
我赞成使用 Number() 与 parseFloat() 进行强制转换的原因是,我不必对空输入字符串和 NaN 值执行额外的验证。Number() 函数将自动处理一个空字符串并将其转换为零。
对于现代浏览器,请使用 toLocaleString
:
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>
评论
parseFloat(num.toFixed(2))
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
包含有关最后两位数字(表示为整数)的信息- 如果是,那么我们加到 - 但是如果我们有负数 () 并且正好等于 5,那么在这种情况下,我们减去 1(出于兼容性原因 - 以同样的方式适用于负数,例如
r[0]
>=5
1
d
s=='-'
r
Math.round
Math.round(-1.5)==-1
) - 之后,如果最后两位数字大于 99,那么我们将一个添加到整数部分
k
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 = valeurAFormate
strValeur = strValeur.substring(strValeur.indexOf('.')+1)
var valeurPartieDecimal = strValeur
valeurAFormate = valeurPartieEntier +'.'+valeurPartieDecimal
if(valeurAFormate == null){
valeurAFormate = 0
}
return valeurAFormate
}
评论
您可以使用数字.js。
numeral(1.341).format('0.00') // 1.34
numeral(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,00
1.12 => 1,12
1.1234 => 1,12
1234 => 1.234,00
1234.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>
评论
这是我使用 epsilion 的安全解决方案。这将修复 .15 的四舍五入,例如
function myFunction(a) {
return Math.round((a + Number.EPSILON) * 100) / 100
}
好消息!!!!! 似乎新版本的 javascript ES2020(我只是使用)提供了此功能的新行为。
let ff:number =3
console.info(ff.toFixed(2)) //3.00
如愿以偿。
使用 JavaScript 以不同的方式处理数字,请注意 round()、toFixed() 等。 来源链接
export const preciseRound = (value, exp) => {
/**
* Decimal adjustment of a number.
*
* @param {String} type The type of adjustment.
* @param {Number} value The number.
* @param {Integer} exp The exponent (the 10 logarithm of the adjustment base).
* @returns {Number} The adjusted value.
*/
function decimalAdjust(type, value, exp) {
// If the exp is undefined or zero...
if (typeof exp === "undefined" || +exp === 0) {
return Math[type](value);
}
value = +value;
exp = +exp;
// If the value is not a number or the exp is not an integer...
if (isNaN(value) || !(typeof exp === "number" && exp % 1 === 0)) {
return NaN;
}
// Shift
value = value.toString().split("e");
value = Math[type](+(value[0] + "e" + (value[1] ? +value[1] - exp : -exp)));
// Shift back
value = value.toString().split("e");
return +(value[0] + "e" + (value[1] ? +value[1] + exp : exp));
}
// You can use floor, ceil or round
return decimalAdjust("round", value, exp);
};
console.log(preciseRound(1.005, -2)); // <= 1.01
console.log(preciseRound(1.341, -2)); // <= 1.34
console.log(preciseRound(1.01, -2)); // <= 1.01
console.log(preciseRound(33.355, -2)); // <= 33.36
评论