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 相关文章推荐
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
基于Cesium绘制抛物弧线
Nov 18 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
FCKeditor的安装(PHP)
2007/01/13 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
解决python删除文件的权限错误问题
2018/04/24 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
python 获取计算机的网卡信息
2021/02/18 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
linux面试相关问题
2012/08/11 面试题
编程用JAVA解析XML的方式
2013/07/07 面试题
英语系毕业生自荐信
2013/10/31 职场文书
单位创先争优活动方案
2014/01/26 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
项目转让协议书
2014/10/27 职场文书
中秋联欢会主持词
2015/07/04 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
环保建议书范文
2015/09/14 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python