美文网首页杂文小品@IT·互联网
input超过10的20次方显示科学记数法的解决方案

input超过10的20次方显示科学记数法的解决方案

作者: Jarvan丶 | 来源:发表于2020-11-13 16:58 被阅读0次

    项目中用到input type="number" 输入框如果数值超过了10的20次方会显示成10exxx或者10e+xxx
    解决方案:
    1.说服产品,一般情况下不会存在大于10的20次方或者小于是的负10次方的值
    2.转换成字符串形式展示

    网上找的不是这个不匹配就是那个结果不对,那干脆自己写个好了

    function ScientificNumber (num) {
        if (!num) return num
        const str = num.toString()
        const reg = /^(\d+)(\.\d+)?(e)([+]?\d+)$/
        const reg2 = /^(\d+)(\.\d+)?(e)([-]?\d+)$/
        let arr
        let len
        let zero = ''
        if (reg.test(str)) {
          arr = reg.exec(str)
          // 保留小数位数
          const arr2 = arr[2] ? arr[2].replace('.', '') : ''
          // 此处减去arr2的长度为了兼容有小数情况
          len = Math.abs(arr[4]) - (arr2.length || 0)
          for (var i = 0; i < len; i++) {
            zero += '0'
          }
          return arr[1] + arr2 + zero
        } else if (reg2.test(str)) {
          arr = reg2.exec(str)
          len = Math.abs(arr[4]) - 1
          const arr2 = arr[2] ? arr[2].replace('.', '') : ''
          for (let index = 0; index < len; index++) {
            zero += '0'
          }
          return '0.' + zero + arr[1] + arr2
        } else {
          return num
        }
      }
    
    测试结果

    相关文章

      网友评论

        本文标题:input超过10的20次方显示科学记数法的解决方案

        本文链接:https://www.haomeiwen.com/subject/phcbbktx.html