js 中数字小数点末尾的0显示与否

js 中数字小数点末尾的0显示与否

不显示0

我们先来看一道例题,然后围绕其展开“零”的讨论:

问题:得到一个随机数组成的数组,数组长度为10
结果类似于:[0.243, 0.162, 0.701, 0.501…]

// 此处封装了一个获取随机数的函数,由于Math.floor()能获取min,无法获取max
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

//创建一个长度为10的数组,且每个元素为空
const arr = Array(10).fill();
console.log(arr);

输出(为了展示效果,下面均是在browser环境进行调试;另外在Node.js环境下也成功调试,此处未展示):

在这里插入图片描述

由于Math.random().toFixed(3)得到的是字符串,此处通过Number()转换为number类型

//下面的代码均在开篇创建的arr数组上进行调试
const newArr = arr.map(function (item) {
  return Number(Math.random().toFixed(3));
});
console.log(newArr);

输出:在这里插入图片描述

此处是通过parseFloat进行string类型转换为number类型

const newArr = arr.map(function (item) {
  return parseFloat(Math.random().toFixed(3));
});
console.log(newArr);

输出:在这里插入图片描述

下面使用了文章开头处封装的随机数获取函数

const newArr = arr.map(function (item) {
    return getRandom(100,1000)/1000;//获取0~1之间的数,等同于Math.floor()
  });
console.log(newArr);

输出:在这里插入图片描述

小结:上面三种方法最终获取的数字都是number类型(都省略了末尾的0);由此可以看出,想得到保留小数点末尾0的数字,只能将其数字格式化

显示0(数字格式化)

下面是通过格式化方法显示小数点末尾末尾的0 ,最终获取的数字是string类型

/**
 * 格式化数字,保留小数点后末尾的0
 * @param {Number} value 需要格式化的小数
 * @param {Number} fixed  需要显示的小数位数
 * @param {String} return 返回的格式化小数
 */
function formatNumberShowZero(value, fixed) {
  const num = parseFloat(value);
  if (isNaN(num)) return "";
  else return num.toFixed(fixed || 2);
}

console.log(formatNumberShowZero("fsf"));// 
console.log(formatNumberShowZero("3323.540000", 3));// 3323.540
console.log(formatNumberShowZero("32ff"));//32.00
console.log(typeof formatNumberShowZero("764.4230"))//string

输出:在这里插入图片描述

上面部分APIMDN快速查找:

Math.random()

Array.prototype.fill()

Array.prototype.map()

Number.prototype.toFixed()

parseFloat()

注:本人第一次发表文章,若有用词不当或其它错误之处,请各位指出,私信必回!!!

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

好吃懒洋洋

老板大气,蟹蟹支持!!!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值