js处理数字科学计数法的显示问题,完美解决数字显示中的'e'和'E'

简介: 一,科学计数法科学记数法是一种记数的方法。把一个数表示成a与10的n次幂相乘的形式(1≤a<10,n为整数),这种记数法叫做科学记数法。当我们要标记或运算某个较大或较小且位数较多时,用科学记数法免去浪费很多空间和时间。

一,科学计数法

科学记数法是一种记数的方法。把一个数表示成a与10的n次幂相乘的形式(1≤a<10,n为整数),这种记数法叫做科学记数法。当我们要标记或运算某个较大或较小且位数较多时,用科学记数法免去浪费很多空间和时间。

二,js计算中的科学计数法

js的运算与数据传递过程中,会把较大的数字用科学计数法来显示


  var d=0.00000000002;
  console.log(d);//2e-11
  console.log('0.00000000002'.length)//13
  console.log('0.00000000002'.split(".")[1].length)//11
  console.log(d+2)//2.00000000002
  console.log(d+0.00000000002)//4e-11

我们可以看到初始定义的number类型的d在打印的时间直接打印的是科学计数法显示的数据

通过4,5行的js可以看出科学计数法的显示是不影响的计算的。

但是我们在前端页面的渲染的时间很多情况下,是不能显示为科学计数法的,比如比特币的成交额,有些价值很高的币,在交易的过程中会出现科学计数法的情况,但是我们去渲染的时间,是不能显示为科学计数法的,所以就要对科学计数法的数据进行处理。

三,通过封装的函数解决

function toolNumber(num_str) {
        num_str = num_str.toString();
        if (num_str.indexOf("+") != -1) {
          num_str = num_str.replace("+", "");
        }
        if (num_str.indexOf("E") != -1 || num_str.indexOf("e") != -1) {
          var resValue = "",
            power = "",
            result = null,
            dotIndex = 0,
            resArr = [],
            sym = "";
          var numStr = num_str.toString();
          if (numStr[0] == "-") {
            // 如果为负数,转成正数处理,先去掉‘-’号,并保存‘-’.
            numStr = numStr.substr(1);
            sym = "-";
          }
          if (numStr.indexOf("E") != -1 || numStr.indexOf("e") != -1) {
            var regExp = new RegExp(
              "^(((\\d+.?\\d+)|(\\d+))[Ee]{1}((-(\\d+))|(\\d+)))$",
              "ig"
            );
            result = regExp.exec(numStr);
            if (result != null) {
              resValue = result[2];
              power = result[5];
              result = null;
            }
            if (!resValue && !power) {
              return false;
            }
            dotIndex = resValue.indexOf(".") == -1 ? 0 : resValue.indexOf(".");
            resValue = resValue.replace(".", "");
            resArr = resValue.split("");
            if (Number(power) >= 0) {
              var subres = resValue.substr(dotIndex);
              power = Number(power);
              //幂数大于小数点后面的数字位数时,后面加0
              for (var i = 0; i <= power - subres.length; i++) {
                resArr.push("0");
              }
              if (power - subres.length < 0) {
                resArr.splice(dotIndex + power, 0, ".");
              }
            } else {
              power = power.replace("-", "");
              power = Number(power);
              //幂数大于等于 小数点的index位置, 前面加0
              for (var i = 0; i < power - dotIndex; i++) {
                resArr.unshift("0");
              }
              var n = power - dotIndex >= 0 ? 1 : -(power - dotIndex);
              resArr.splice(n, 0, ".");
            }
          }
          resValue = resArr.join("");

          return sym + resValue;
        } else {
          return num_str;
        }
      }

示例:



var d=0.00000000002;
console.log(d);//2e-11
console.log('0.00000000002'.length)//13
console.log('0.00000000002'.split(".")[1].length)//11
console.log(d+2)//2.00000000002
console.log(d+0.00000000002)//4e-11




var a=0.000000009;
console.log('0.000000009')//0.000000009
console.log(a)//9e-9
console.log(toolNumber(a))//0.000000009




var b=10000000000000000000000;

console.log('10000000000000000000000')//10000000000000000000000
console.log('10000000000000000000000'.length)//23
console.log(b);//1e+22
console.log(toolNumber(b))//10000000000000000000000
console.log(toolNumber(b).length)//23

目录
相关文章
|
JavaScript
利用JS求1-100之间所有能被3整除的数字之和
利用JS求1-100之间所有能被3整除的数字之和
利用JS求1-100之间所有能被3整除的数字之和
|
JavaScript 前端开发 索引
丢失的数字使用JavaScript解决问题
丢失的数字使用JavaScript解决问题
127 0
|
存储 前端开发 算法
LeetCode只出现一次的数字使用JavaScript解题|前端学算法
LeetCode只出现一次的数字使用JavaScript解题|前端学算法
111 0
|
JavaScript
JS 实现给数字加三位一逗号间隔的两种方法
JS 实现给数字加三位一逗号间隔的两种方法
|
JSON JavaScript 数据格式
js将 一串数字1403149534转换为日期格式
js将 一串数字1403149534转换为日期格式
282 0
|
JavaScript 前端开发
JavaScript中数字常用方法
JavaScript中数字常用方法
|
JavaScript 前端开发 Shell
JavaScript题解剑指offer : 03. 数组中重复的数字
JavaScript题解剑指offer : 03. 数组中重复的数字
117 0
|
存储 JavaScript 前端开发
每日一学—JavaScript数字
JavaScript数字的学习
91 0
每日一学—JavaScript数字
|
JavaScript 前端开发
JavaScript 数字
JavaScript 数字
64 0
|
JavaScript 前端开发 算法
剑指 Offer 03. 数组中重复的数字:JavaScript 的两种哈希解法
剑指 Offer 03. 数组中重复的数字:JavaScript 的两种哈希解法
58 0
剑指 Offer 03. 数组中重复的数字:JavaScript 的两种哈希解法