jJavaScript中toFixed()和正则表达式的坑

目录
  • toFixed精度问题
  • 导致原因
  • 解决办法
  • 正则表达式全局匹配的坑

toFixed精度问题

toFixed方法可以把Number四舍五入为指定小数位数的数字。可是大家看下下面这张图，发现了什么？

0.985四舍五入之后变成了0.98！！

  • 这就是toFixed方法的坑。

导致原因

那这到底是怎么回事呢？本质其实是因为js小数的精度问题。 在计算机中计算，是将数字转成二进制，进行计算之后再转化为十进制。 比如将0.985转化为二进制是0.1111110000101000（超出精度，结果保留了16位小数），此时再将该二进制转化为十进制结果为：0.9849853515625，此时将他保留两位小数就成了0.98。

解决办法

  • 那么要如何避免这种问题呢？可以用下面的方法来补充原生的toFixed方法
toFixed(number, precision) {
    var str = number + "";
    var len = str.length;
    var last = str.substring(len - 1, len);
    var afterPoint = str.substring(str.indexOf(".") + 1, len);
    if (last == "5" && afterPoint.length > precision) {
        last = "6";
        str = str.substring(0, len - 1) + last;
        return (str - 0).toFixed(precision);
    } else {
        return number.toFixed(precision);
    }
},

正则表达式全局匹配的坑

有这么一个需求，select支持可以搜索item。刚看到我就兴致冲冲去写了，这还不简单吗，输入的数据和select中的数据源进行正则匹配，匹配到的就是搜索到的。

过滤函数我是这么写的：

//searchKey是输入的数据
const regex = new RegExp(searchKey.trim(), 'gi');
let dataSource = [
    {
        value: 'test1',
    },

    {
        value: 'test2',
    },
];
let res = dataSource
    .map((i) => {
            let _flag = regex.test(i.value);
            i.visible = _flag;
            return i;
    })
    .filter((i) => i.visible);

但是实际运行时，发现数据源中的数据，有的可以匹配到有的匹配不到。当时就纳闷了，这有什么问题吗？最后几经查找答案，原来是正则表达式的全局匹配有个坑：正则表达式中有一个lastIndex的属性，这个属性表示上一次匹配文本结果之后的第一个字符的位置。他在下一次查找的时候，会从lastIndex往后继续查找，这就会导致一下个匹配返回false。

那么如何解决呢？

因为lastIndex属性是可读可写的，所以我这里的解决办法是每次test方法之后将将lastIndex置为零，这样每次匹配都将会从最开始进行查找。这样就会避免这个问题了哦！

let _flag = regex.test(i.value);
regex.lastIndex = 0;

到此这篇关于jJavaScript中toFixed()和正则表达式的坑的文章就介绍到这了,更多相关toFixed()和正则表达式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS使用tofixed与round处理数据四舍五入的区别

    1 .tofixed方法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字.例如将数据Num保留2位小数,则表示为:toFixed(Num):但是其四舍五入的规则与数学中的规则不同,使用的是银行家舍入规则,银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法.具体规则如下: 简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一. 显然这种规则不符合我们平常在数据中处理的方式.为了解决这样的问题,可以自定义

  • js正则表达式简单校验方法

    对于字符串的一些操作,可以通过正则表达式来实现.一般的搜索操作想必大家已经学会,今天就来说说它的校验功能,这样可以帮助判断字符串类型或者是其它的组成,比如密码.中文.字符串的组成等.下面就js正则表达式的校验带来内容分享,同时要考虑在js中支持的类型. 1.常见js正则校验 (1)校验密码强度 密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间. ^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ (2)校验中文 字符串仅能是中文. ^

  • javascript中toFixed()四舍五入使用方法详解

    最近做的项目涉及到金额的计算,有一种方式就是进行四舍五入的规则进行小数点后面的尾数处理,以前一直以为toFixed方法就是四舍五入的,知道一个用户反馈了金额计算的bug我才如梦初醒(亏了一毛钱),才仔细深究了下toFixed这个方法,唉,还是我不够严谨啊,前车之鉴,大家勿走我的老路! toFixed还不同的浏览器实现,在IE10及以上里面是正常的四舍五入,但是别的浏览器里面就不一样了,它不是正常的四舍五入(等下重点说),比如: var a = 1.335; console.log(a.toFix

  • JS中toFixed()方法四舍五入的精度问题详解

    JS中toFixed()方法四舍五入的精度问题详解

    目录 踩的坑 填坑方法 什么样的坑? 总结 踩的坑 最近工作中,在计算一个商品的折扣价格,有时候总是出现价格会有一分钱的差异,涉及钱的问题都是比较敏感的,经过排查,最后发现竟然是 JS 原生的 toFixed 方法的问题. 好家伙,这都啥规律啊...(⊙o⊙) 填坑方法 先不着急去探究其中的问题,既然发现了问题,那就先把 Bug 修复了先,原生方法用不了,就自己写一个呗,还不是分分钟的事情,哈哈哈! /** * 保留小数点几位数, 自动补零, 四舍五入 * @param num: 数值 * @p

  • 盘点javascript 正则表达式中 中括号的【坑】

    在javascript中使用正则时需要注意中括号里边的一个坑,那就是中括号内的元字符问题.自己踩到坑了,网上搜了一下还有不少人踩了这个坑,所以大概说一下. 中括号在正则中称为字符组(Character class),有的书翻译为字符类,还有的翻译成字符集.我觉得字符组更好点,毕竟class在计算机属于中代表面向对象里的"类".顾名思义,字符组为一组字符,它表示在一个位置里可能出现的多种字符.注意这里强调只匹配一个位置哦.(此段摘自-http://www.cnblogs.com/snan

  • js用正则表达式筛选年月日的实例方法

    当我们想要对日期进行筛选时,可以选择使用正则表达式的检索功能.这里涉及到正则表达式关于匹配的使用,本篇会就组匹配的基础知识带来分析和代码展示.再学会了正则表达式的匹配方法后,就筛选日期的方法进行过程介绍,下面一起来看看正则表达式的相关内容吧. 1.组匹配 正则表达式的括号表示分组匹配,括号中的模式可以用来匹配分组的内容. /fred+/.test('fredd') // true /(fred)+/.test('fredfred') // true 上面代码中,第一个模式没有括号,结果+只表示重

  • jmeter实现接口关联的两种方式(正则表达式提取器和json提取器)

    jmeter实现接口关联的两种方式(正则表达式提取器和json提取器)

    目录 一.前言 二.使用正则表达式提取器实现接口关联 三.使用json提取器实现接口关联 json提取器的使用步骤 四.扩展:返回复杂json数据的提取 一.前言 在开展接口测试或者是接口面试的过程中,我们会发现很多接口需要依赖前面的接口,需要我们动态从前面的接口返回中提取数据,也就是我们通常说的关联. 关联通俗来讲就是把上一次请求的返回内容中的部分截取出来保存为参数,用来传递给下一个请求使用. 二.使用正则表达式提取器实现接口关联 正则表达式提取器,见名知意就是使用正则表达式的方法把我们需要提

  • 在nest.js中通过正则表达式正确设置验证的方法

    在nest.js中通过正则表达式正确设置验证的方法

    下面看下nest.js正则表达式设置验证的方法,代码如下所示: import { IsNotEmpty, Length, Matches, Max, Min } from "class-validator"; const phoneReg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/ 补充:下面看下js正则表达式验证大全 /判断输入内容是否为空     function IsNull(){        

  • JavaScript 正则表达式详解

    目录 1. 正则表达式创建 2. 使用模式 2.1 使用简单模式 2.2 使用特殊字符 3. 应用 3.1 切分字符串 3.2 分组 3.3 贪婪匹配 3.4 正则表达式标志 3.5 test() 方法 4. 常用正则(参考) 总结 1. 正则表达式创建 JavaScript 有两种方式创建正则表达式: 第一种:直接通过/正则表达式/写出来 第二种:通过new RegExp('正则表达式')创建一个RegExp对象 const re1 = /ABC\-001/; const re2 = new

  • JS处理数据四舍五入(tofixed与round的区别详解)

    1 .tofixed方法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字.例如将数据Num保留2位小数,则表示为:toFixed(Num):但是其四舍五入的规则与数学中的规则不同,使用的是银行家舍入规则,银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法.具体规则如下: 简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一. 显然这种规则不符合我们平常在数据中处理的方式.为了解决这样的问题,可以自定义

随机推荐