《AngularJS高级程序设计》——5.6 使用JavaScript运算符

简介: Number方法是一种严格的解析字符串值的方式,但你可以使用另外两个更灵活的,同时也会忽略后面非数字符号的函数。这些函数是parseInt和parseFloat。我在表5-5中全面描述了三种方法。

本节书摘来自异步社区《AngularJS高级程序设计》一书中的第5章,第5.6节,作者:【美】Adam Freeman(弗里曼)著,更多章节内容可以访问云栖社区“异步社区”公众号查看

5.6 使用JavaScript运算符

JavaScript定义了大量标准的运算符集。我在表5-3中概括了最有用的。

表5-3  有用的JavaScript运算符
screenshot
5.6.1 使用条件语句
许多JavaScript运算符是和条件语句一起使用的。在本书中,我倾向使用if/else和switch语句。清单5-24展示了两者的使用(如果你使用过几乎所有编程语言,那你会很熟悉)。

清单5-24 在文件jsdemo.html中使用if/else和switch条件语句

screenshot

清单结果如下:

screenshot

5.6.2 对比等于运算符和全等运算符
等于和全等运算符要特别注意。等于运算符会为了判定是否相等而尝试强制将运算对象转为相同类型。只要你意识到它所做的,这就是个得心应手的特性。清单5-25展示了等于运算符的作用。

清单5-25 在文件jsdemo.html中使用等于运算符

screenshot

该脚本输出如下:

screenshot

JavaScript将两个运算对象转化为相同的类型然后比较它们。实质上,等于运算符检测值是否相同,与类型无关。如果想确保检查值和类型都相同,那你需要使用全等运算符(===,三个等号,而不是两个等于运算符),如清单5-26中所示。

清单5-26 在文件jsdemo.html中使用全等运算符

screenshot

在本例中,全等运算符会认定两个变量是不同的。该运算符不会强制转化类型。该脚本的结果如下:

screenshot

JavaScript基元(primitives)是用值做比较,但JavaScript对象是通过引用比较。清单5-27展示了JavaScript如何处理对象的等于和全等检测。

清单5-27 在文件jsdemo.html中对对象执行等于和全等检测

screenshot

该脚本的结果如下:

screenshot

清单5-28展示了对基元执行相同的检测。

清单5-28 在文件jsdemo.html中对基元执行

screenshot

该脚本的结果如下:

screenshot

提示:
AngularJS用angular.equals方法扩展了内置的对比较的支持,它拿两个对象或值做参数,如果它们通过全等比较(===)或者两个参数是对象并且它们的所有属性都通过全等比较,那就返回true。我不倾向使用该方法,所以我在本章中没有包含其演示。
5.6.3 显式转换类型
字符串连接运算符(+)比加号(也是+)的优先级还高,这意味着JavaScript将连接变量优先于加法。这会致使混乱,因为JavaScript还会自由地转化类型而产生结果(该结果并非总是所期望的),如清单5-29所示。

清单5-29 在文件jsdemo.html中字符串连接运算符优先

screenshot

该脚本的结果如下:

screenshot

第二个结果是导致混乱的那种。凭借操作符优先级和狂热的类型转化,可能把加号看作了字符串连接符。为了避免这种情况,你可以显式地转化值的类型,以确保你执行了的运算符类型正确,如下面段落中所述。

1.数字转字符串
如果你有多个数字变量并想将它们作为字符串连接,那你可以使用toString方法将数字转为字符串,如清单5-30所示。

清单5-30 在文件jsdemo.html中使用number.toString方法

screenshot

注意我在圆括号中放的数值,然后我调用toString方法。这是因为你必须让JavaScript在你调用数字类型定义的方法前将字面量转为数字。我还展示了替代方案用以达到相同效果,那就是调用String函数并传入数值作为参数。它们二者的技术效果相同,这是将数字转为字符串,说明“+”运算符用于字符串连接而不是加法。该脚本的输出如下:

screenshot

这还有其他方法,可以让你对数字用字符串表示施以更多控制。在表5-4中简述了这些方法。表中所示的所有方法都由数字类型所定义。

表5-4  可用的数字转字符串的方法
screenshot
2.字符串转数字
互补的技术是将字符串转为数字,以使得你可以执行加法而不是连接。你可以使用Number函数来做,如清单5-31所示。

清单5-31 在文件jsdemo.html中将字符串转为数字

screenshot

该脚本的输出如下:

screenshot

Number方法是一种严格的解析字符串值的方式,但你可以使用另外两个更灵活的,同时也会忽略后面非数字符号的函数。这些函数是parseInt和parseFloat。我在表5-5中全面描述了三种方法。

表5-5  可用的字符串转数字的方法
screenshot

相关文章
|
2月前
|
JavaScript
js运算符
js运算符
23 5
|
2月前
|
JavaScript 前端开发
JavaScript 运算符全知道
JavaScript 运算符全知道
56 0
|
3月前
|
JavaScript 前端开发
JavaScript 运算符
JavaScript 运算符
23 3
|
4月前
|
JavaScript 前端开发
JavaScript 中的 typeof 运算符
【8月更文挑战第29天】
27 1
|
4月前
|
JavaScript 前端开发 安全
深入理解JavaScript中的比较运算符
深入理解JavaScript中的比较运算符
|
4月前
|
前端开发 JavaScript 程序员
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
|
4月前
|
JavaScript 前端开发
JS常见的运算符有哪些?
JS常见的运算符有哪些?
|
4月前
|
JavaScript 前端开发
JavaScript基础&实战(2)js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符
这篇文章详细介绍了JavaScript中的强制类型转换、运算符(包括算术、逻辑、条件、赋值和关系运算符)的使用方法和优先级规则。
JavaScript基础&实战(2)js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符
|
5月前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
61 1
|
6月前
|
JavaScript 前端开发 开发者
JavaScript进阶-解构赋值与展开运算符
【6月更文挑战第19天】ES6的解构赋值与展开运算符增强了JS开发效率。解构允许直接从数组或对象提取值,简化数据提取,而展开运算符则用于合并数组和对象或作为函数参数。解构时注意设置默认值以处理不存在的属性,避免过度嵌套。展开运算符需区分数组与对象使用,勿混淆于剩余参数。通过示例展示了这两种操作在数组和对象中的应用,提升代码可读性与简洁度。
169 5