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

前言

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

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

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

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

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

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

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

格式化浮点数

value = +value || 0;

测试输出:

functiontest(value) {

 value = +value || 0;

 returnvalue;

}

 

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;

测试输出:

functiontest(value) {

 value = +value | 0;

 returnvalue;

}

 

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;

测试输出:

functiontest(value) {

 value = +value >>> 0;

 returnvalue;

}

 

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;

测试输出:

functiontest(value) {

 value = !!value;

 returnvalue;

}

 

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 ||"";

时间: 2024-10-11 17:20:02

Javascript中常用类型的格式化方法总结的相关文章

JavaScript中常用的六种互动方法示例

 这篇文章主要介绍了JavaScript中常用的六种互动方法示例,是个人的一些经验总结,这里分享给大家,希望对大家能够有所帮助.     1.confirm消息对话框 语法:confirm("str"); 参数说明:str为对话框中要显示的文本, 作用:通常用于提醒用户做出某些选择,其返回值为布尔类型,点击确定返回值为ture,点击取消返回值为false 例如:   代码如下: <script type="text/javascript"> var my

JavaScript中常用的六种互动方法示例_javascript技巧

1.confirm消息对话框 语法:confirm("str"); 参数说明:str为对话框中要显示的文本, 作用:通常用于提醒用户做出某些选择,其返回值为布尔类型,点击确定返回值为ture,点击取消返回值为false 例如: 复制代码 代码如下: <script type="text/javascript">     var mymessage=confirm("你喜欢JavaScript吗?");     if(mymessage

详解JavaScript中常用的函数类型_javascript技巧

网页中的java代码需要写在JavaScript中,里面部分少不了函数,介绍一下JavaScript中常用的函数类型.1.可变函数 <script> function show(){ alert("第一个..."); } function show(str){ alert("第二个"); } function show(a,b){ alert("第三个..."); alert(a+":"+b); } </sc

Javascript学习1 - Javascript中的类型对象

原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象.         常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个方法:toLocalString()                     number.toFixed(digits) 把numberl转换为小数,digits代表小数几位.         常用的与Number对应的全局函数:isNaN(vars) 判断vars是不是数字,  

JavaScript中数组的22种方法必学(推荐)_javascript技巧

前面的话 数组总共有22种方法,本文将其分为对象继承方法.数组转换方法.栈和队列方法.数组排序方法.数组拼接方法.创建子数组方法.数组删改方法.数组位置方法.数组归并方法和数组迭代方法共10类来进行详细介绍 对象继承方法 数组是一种特殊的对象,继承了对象Object的toString().toLocaleString()和valueOf()方法 [toString()] toString()方法返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串 [注意]该方法的返回值与不使用任何参数

浅析jQuery中常用的元素查找方法总结

本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass")   选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素,可以运用

JavaScript中对象的不同创建方法_javascript技巧

javascript中的对象与一般的面向对象的程序设计语言(c++,Java等)不同,甚至很少有人说它是面向对象的程序设计语言,因为它没有类.javaScript只有对象,不是类的实例.javascript中的对象是基于原型的. 1.1句点运算符创建 javascript中的对象实际上就是一个由属性组成的关联数组,属性由名称和值组成,值的类型可以是任何数据类型,或者函数和其他对象. 创建一个简单对象: var foo = {}; foo.prop_1 = 'bar'; foo.prop_2 =

深入理解JavaScript中为什么string可以拥有方法_javascript技巧

引子 我们都知道,JavaScript数据类型分两大类,基本类型(或者称原始类型)和引用类型. 基本类型的值是保存在栈内存中的简单数据段,它们是按值访问的.JS中有五种基本类型:Undefined.Null.Boolean.Number和String. 引用类型的值是保存在堆内存中的对象,它的值是按引用访问的.引用类型主要有Object.Array.Function.RegExp.Date. 对象是拥有属性和方法的,所以我们看到下面这段代码一点也不奇怪. var favs=['鸡蛋','莲蓬']

注意JavaScript中RegExp对象的test方法

javascript|对象 javascript 中的 RegExp 对象用于正则表达式相关的操作,这个对象提供了一个方法 test 来判定某个字符串是否满足某个 pattern. 返回值是 true/false.今天我碰到了一个问题: <script type="text/javascript"><!--var re = /^\d+(?:\.\d)?$/ig;    alert(re.test('112.3'));alert(re.test('33'));//--&