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 相关文章推荐
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
详解Angular2响应式表单
Jun 14 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
JavaScript中的Proxy对象
Nov 27 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
PHP 数组基础知识小结
2010/08/20 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
filemanage功能中用到的common.js
2007/04/08 Javascript
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
Python3数字求和的实例
2019/02/19 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
介绍一下SQL Server的全文索引
2013/08/15 面试题
什么是servlet
2012/05/08 面试题
搬家公司的创业计划书
2014/01/01 职场文书
高中学生期末评语
2014/04/25 职场文书
实习报告评语
2014/04/26 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
承诺书范本大全
2015/05/04 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
JavaScript分页组件使用方法详解
2021/07/26 Javascript
详解Python flask的前后端交互
2022/03/31 Python
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle