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

好吃懒洋洋

发布于 2022-11-15 17:06:50

5.1K0

发布于 2022-11-15 17:06:50

文章被收录于专栏：个人学习分享

js 中数字小数点末尾的0显示与否
不显示0
显示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

输出：