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 相关文章推荐
Prototype使用指南之string.js
Jan 10 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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
PHP 引用是个坏习惯
2010/03/12 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
javascript数组定义的几种方法
2017/10/06 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
vue实现简单图片上传
2020/06/30 Javascript
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
MIS软件工程师的面试题
2016/04/22 面试题
大学校园生活自我鉴定
2014/01/13 职场文书
学校安全检查制度
2014/01/27 职场文书
数学教学随笔感言
2014/02/17 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书