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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
vue文件运行的方法教学
Feb 12 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 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中使用unset销毁变量并内存释放问题
2012/07/05 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
php多文件上传实现代码
2014/02/20 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
php 常用的系统函数
2017/02/07 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
Python编程之序列操作实例详解
2017/07/22 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
Android笔试题总结
2014/11/29 面试题
安全责任协议书
2014/04/21 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android
Golang 字符串的常见操作
2022/04/19 Golang