Javascript中常用类型的格式化方法小结


Posted in Javascript onDecember 26, 2016

前言

相信大家都知道因为JavaScript是弱类型的语言,项目写大了会非常难以把控,容易出各种问题。幸好有强类型的TypeScript可以很大程度上弥补这一缺陷,但TypeScript提供的强类型是编译阶段的,虽然绝大部分类型相关的问题在编译阶段都能被覆盖到,但对于小部分在运行时才会出错的错误还是无能为力。

例如以下几种常见的情况:

     1、定义为number的属性,赋值的时候,如果赋值源没有定义强类型,这样就会绕过编译检查的阶段,到运行时发现可能传进来的是个字符串。类内部再一顿加减乘除,很容易导致一大片数据全都被污染为NaN。

     2、定义boolean类型的属性,经常会赋值为一个对象,虽然运行起来不会出明显问题,但其实只想存储一下对象是否为空的状态,却有可能导致那个对象始终无法被回收。

     3、定义为整型的属性,比如index。这点即使TS也无能为力,因为TS里也没有int。很容易传入一个浮点数,导致从数组取索引时产生报错。

在JavaScript运行时,任何用法都有可能发生,如果要写出强壮的组件或框架,类似这些问题,都是必须要考虑到的。解决方案就是对于任何来自于外部传入的参数或变量进行格式化,这样只要格式化一次,组件和框架内部就能高效地正常运转,不用再各种特殊判断。

下面列举几种常用类型的高性能格式化方法:

格式化浮点数

value = +value || 0;

测试输出:

function test(value) {
 value = +value || 0;
 return value;
}

test("123"); //123
test("123.5"); //123.5
test(123); //123
test(123.5); //123.5
test("abc"); //0
test("123ab"); //0
test(NaN); //0
test(null); //0
test(undefined); //0

格式化有符号整数(int32)

value = +value | 0;

等价于:

value = ~~value;

测试输出:

function test(value) {
 value = +value | 0;
 return value;
}

test("123"); //123
test("123.5"); //123
test(123); //123
test(123.5); //123
test("-123.5"); //-123
test("abc"); //0
test(NaN); //0
test(null); //0
test(undefined); //0

要特别注意一下:以上这种格式化方式只适用于32位有符号整型数,也就类似其他语言里的int,正整数部分最大只能到2147483647(2^31-1) 。uint32或者更大的int64是不行的,会被截断。具体可以参考这里:按位操作符。通常在其他语言里,可以使用int的场景使用这种格式化方法都完全没问题。

格式化无符号整数(uint32)

value = +value >>> 0;

测试输出:

function test(value) {
 value = +value >>> 0;
 return value;
}

test("123"); //123
test("123.5"); //123
test(0xFFFFFFFF); //0xFFFFFFFF
test(0xFFFFFFFF+).5; //0xFFFFFFFF
test("-123.5"); //0xFFFFFF85
test("abc"); //0
test(NaN); //0
test(null); //0
test(undefined); //0

要注意一下:位移运算符是三个箭头>>>,有且只有这个运算符是操作无符号整型,结果是一个uint32,范围从0~4294967295(2^32-1),其他所有位移运算符的结果都是有符号整型(int32),因此也没法表示大于2147483647(2^31-1)的数字。

格式化布尔值

value = !!value;

测试输出:

function test(value) {
 value = !!value;
 return value;
}

test(true); //true
test(123); //true
test(123.5); //true
test({}); //true
test([]); //true
test("abc"); //true
test(""); //false
test(false); //false
test(NaN); //false
test(null); //false
test(undefined); //false

格式化字符串

字符串的格式化没有那么固定的需求,一般情况下避免null就行了,因为其他对字符串变量的操作,比如加号,都会自动转换类型。

value = value || "";

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Javascript能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
Angular的自定义指令以及实例
Dec 26 #Javascript
如何提高javascript加载速度
Dec 26 #Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 #Javascript
javascript实现去除HTML标签的方法
Dec 26 #Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 #Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 #Javascript
原生JS下拉加载插件分享
Dec 26 #Javascript
You might like
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
js程序中美元符号$是什么
2008/06/05 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
Python的UTC时间转换讲解
2019/02/26 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
企划专员岗位职责
2013/12/09 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
大学生村官事迹材料
2014/01/21 职场文书
中秋寄语大全
2014/04/11 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
文体活动总结
2015/02/04 职场文书
借钱欠条怎么写
2015/07/03 职场文书
礼仪培训心得体会
2016/01/22 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书