jJavaScript中toFixed()和正则表达式的坑
更新时间：2022年04月19日 17:18:39 作者：今天写注释了吗
这篇文章主要介绍了jJavaScript中toFixed()和正则表达式的坑，toFixed方法可以把Number四舍五入为指定小数位数的数字，具体详细内容需要的小伙伴可以参考一下
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()和正则表达式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了webpack4 css打包压缩问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了微信小程序HTTP接口请求封装代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
之前看到一个Android的加载效果不错，一直想自己动手做一个，正好这段时间重温了一个Canvas，所以就尝试了一下。下面这篇文章主要给大家介绍了关于利用canvas实现加载效果的相关资料，需要的朋友可以参考下。2017-07-07
这篇文章主要介绍了ES6 如何改变JS内置行为的代理与反射，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了js如何判断用户是在PC端和还是移动端访问,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了element-ui 时间选择器限制范围（随动）,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了javascript笛卡尔积算法实现方法,实例分析了笛卡尔积算法的javascript实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了微信小程序连接数据库与WXS的使用方法,微信小程序是腾讯内部的产品,不能直接打开一个外部的链接,但是腾讯为开发者封装好了API用来请求一个网站的内容或者服务,感兴趣的同学可以参考下2023-12-12
Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码，所以下面这篇文章就来给大家详细介绍了关于利用babel将es6语法转es5的相关资料，文章通过示例介绍的非常详细，需要的朋友可以参考下。2017-12-12
javascript判断移动端访问设备并解析对应CSS的方法
这篇文章主要介绍了javascript判断移动端访问设备并解析对应CSS的方法,涉及移动端设备的判断及动态加载技巧,需要的朋友可以参考下2015-02-02
最新评论