将介绍JavaScript中 '+'加号运算符在一元、二元运算时的表现。

目录

1.一元运算符

2. 二元运算符

1. 一元运算符

语法: + Expression

说明:'+'号运算符作为一元运算符时,Expression将进行ToNumber()操作。

ToNumber( argument )转换方式:

argument类型 返回值
Undefined return NaN
Null return +0
Boolean true return 1; false return 0;
Number return value
String 若字符串为纯数字时返回转换后的数字;非纯数字返回NaN
Symbol 抛出 TypeError 异常
Object

进行以下步骤:

1.先进行ToPrimitive(argument, hint Number)得到rs;
2.然后返回 ToNumber(rs)的结果。

示例:

// Undefined
+ undefined; // => NaN // Null
+ null; // => 0 // Boolean
+ true; // => 1
+ false; // => 0 // String
+ '1'; // => 1
+ '-1'; // => -1
+ 'a1'; // => NaN // Object
+ {}; // => NaN
+ { valueOf: function () { return 0 } }; // => 0

  

2. 二元运算符

语法: AdditiveExpression + MultiplicativeExpression

2.1 解析步骤

首先看下ECMAScript 2015(ES6)关于加法运算符的说明:

AdditiveExpression : AdditiveExpression + MultiplicativeExpression

  1. Let lref be the result of evaluating AdditiveExpression.

  2. Let lval be GetValue(lref).

  3. ReturnIfAbrupt(lval).

  4. Let rref be the result of evaluating MultiplicativeExpression.

  5. Let rval be GetValue(rref).

  6. ReturnIfAbrupt(rval).

  7. Let lprim be ToPrimitive(lval).

  8. ReturnIfAbrupt(lprim).

  9. Let rprim be ToPrimitive(rval).

  10. ReturnIfAbrupt(rprim).

  11. If Type(lprim) is String or Type(rprim) is String, then

    1. Let lstr be ToString(lprim).

    2. ReturnIfAbrupt(lstr).

    3. Let rstr be ToString(rprim).

    4. ReturnIfAbrupt(rstr).

    5. Return the String that is the result of concatenating lstr and rstr.

  12. Let lnum be ToNumber(lprim).

  13. ReturnIfAbrupt(lnum).

  14. Let rnum be ToNumber(rprim).

  15. ReturnIfAbrupt(rnum).

  16. Return the result of applying the addition operation to lnum and rnum. See the Note below 12.7.5.

链接:http://www.ecma-international.org/ecma-262/6.0/#sec-addition-operator-plus

简单概括为下面4个步骤:

1) 值进行GetValue()操作。

2) 值进行ToPrimitive()操作,

3) 若一方为String类型,2个值都进行ToString()转换,最后进行字符串连接操作。

4) 若都不是String类型,2个值都进行ToNumber()转换,最后进行算数加法运算。

2.2 ToPrimitive(value)方法说明

在上面的步骤中,重点说明是其中的ToPrimitive()方法,除了在'+'号运算符用到此方法外,ToNumber()、ToString()等也都用到此方法。

2.2.1 方法签名

语法:ToPrimitive ( input [, PreferredType] )

参数:

①参 input :传入的值。

②参数 PreferredType :可选,需要被转换的类型。'+'加号作为一元运算符时,此值为“number”;而作为二元运算符时,未传递此值,以默认的“default”代替。

2.2.2 解析说明

ToPrimitive()的详细解析过程可以看这里:http://www.ecma-international.org/ecma-262/6.0/#sec-toprimitive

简化为以下步骤:

1) 若input类型为原始值(如:Undefined、Null、Boolean、Number、String、Symbol),直接返回input的本身。

2) 若input类型为object(如:Array、Object、Date),将根据第②个参数 PreferredType 的值进行以下操作:

就像之前讲的,'+'加号作为一元运算符时, 传递参数 PreferredType 的值为“number”;而作为二元运算符时,未传递此值时以默认的“default”代替。

在上面的图中,只看到 PreferredType 的值为“number” 或 “string” 时才进行解析,那么默认的“default”表示什么呢?

重点来了:Date类型内部重写了@@toPrimitive()方法,将“default”设置为“string”,而其他内置的对象都将“default”设置为“number”。

Date.prototype[@@toPrimitive]:http://www.ecma-international.org/ecma-262/6.0/#sec-date.prototype-@@toprimitive

2.3 示例

1) String + String

说明:进行字符串连接操作

'a' + 'b'; // => 'ab'
'1' + '2'; // => '12'

2) Number + Number

说明:进行算数的加法操作

1 + 2; // => 3

3) Number + String or String + Number

说明:Number类型的值先进行ToString()转换,随后再与另一个String类型的值进行拼接操作

1 + '0'; // => '10'
1 + '0a'; // => '10a'
'1' + 2; // => 12

4) Array + String or Array + Number

说明:Array类型进行ToPrimitive()转换时,先执行valueOf(),因其返回一个object类型的值,所以又执行了toString()方法。

var tmpList = ['a', 'b', 'c'];
tmpList.valueOf(); // => ["a", "b", "c"] 输出自身
tmpList.toString(); // a,b,c // 1.Array + String
tmpList + 'd'; // => a,b,cd // 2.重写Array的valueOf()方法,使其返回一个非object
Array.prototype.valueOf = function (e) {
return this.join('-');
}
tmpList + 'd'; // => a-b-cd

  

5) Date + String or Date + Number

说明:上面已经讲过,Date类型重写了ToPrimitive(),所以先调用toString(),若返回值为object,再调用valueOf()。

var dt = new Date();
dt.valueOf(); // => 1503501745901
dt.toString(); // Wed Aug 23 2017 23:22:25 GMT+0800 (中国标准时间) // 1.Date + String : dt直接使用了dt.toString()方法
dt + 'd'; // => Wed Aug 23 2017 23:22:25 GMT+0800 (中国标准时间)d // 2.重写Date的toString()方法,使其返回一个object的值
Date.prototype.toString = function (e) {
return { year: this.getFullYear() };
}
// 略过了 dt.toString(),调用了 dt.valueOf()
dt + 'd'; // => 1503501745901d
End
菜单加载中...

JavaScript 加号运算符详解的更多相关文章

  1. JS中的加号+运算符详解

    加号+运算符 在 JavaScript 中,加法的规则其实很简单,只有两种情况: 把数字和数字相加 把字符串和字符串相加 所有其他类型的值都会被自动转换成这两种类型的值. 为了能够弄明白这种隐式转换是 ...

  2. javascript算术运算符详解

    算术运算符 +.-.*./.%.++.-- ++.--分为前缀形式和后缀形式 前缀形式先加减1在执行 后缀形式先执行再加减1 注意 +号用来连接两个字符串 只要+连接的操作数中有一个是字符串型,JS就 ...

  3. 从mixin到new和prototype:Javascript原型机制详解

    从mixin到new和prototype:Javascript原型机制详解   这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...

  4. JavaScript严格模式详解

    转载自阮一峰的博客 Javascript 严格模式详解   作者: 阮一峰 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict m ...

  5. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  6. javascript 节点属性详解

    javascript 节点属性详解 根据 DOM,html 文档中的每个成分都是一个节点 DOM 是这样规定的:整个文档是一个文档节点每个 html 标签是一个元素节点包含在于 html 元素中的文本 ...

  7. (" use strict")Javascript 严格模式详解

    Javascript 严格模式详解 转载别人的博客内容,浏览了一遍,没有全部吸收,先保存一下链接 http://www.ruanyifeng.com/blog/2013/01/javascript_s ...

  8. 【HANA系列】SAP HANA XS使用JavaScript数据交互详解

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...

  9. JavaScript运行机制详解

    JavaScript运行机制详解   var test = function(){ alert("test"); } var test2 = function(){ alert(& ...

随机推荐

  1. JavaWeb 后端 <一> 之 Tomcat服务器 - Http协议 学习笔记

    1.Web开发概述 1.1服务器上的资源分类: a.静态资源:指web页面中供人们浏览的数据始终是不变.html css js 图片 多媒体 b.动态资源:指web页面中供人们浏览的数据是由程序产生的 ...

  2. 大数据平台常见异常-zookeeper

    本文主要阐述大数据平台环境zookeeper常见异常和解决方案 1.Connection reset by peer异常 异常说明 我们现在项目有个任务OneMinuteDataSync是用spark ...

  3. 使用ajax提交form表单(转)

    前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的aja ...

  4. 扩展SQLite使其能从apk文件中读取db

    游戏中会大量使用到配置文件,每个项目组根据自己不同的需求会选择不同的存储格式,比如使用Json或者SQLite来存储数据.此处我们只对使用SQLite的情况来做讨论.一般情况下会选择把它放在可读写目录 ...

  5. epii.js简约而不简单的JS模板引擎

    epii.js是什么 epii.js是一个 模板引擎,可快速实现数据与ui绑定,快速实现事件绑定,与处理,不依赖任何第三方库,仅仅8k,在native+webapp开发 和 web开发,h5微网页上均 ...

  6. java第一课,java基础

    Java:                是1991年SUN公司的James Gosling等人开发名称为Oak的语言,希望用于控制嵌入在有线电视交换盒,PDA等的微处理器.java.是面向互联网的语 ...

  7. C# 设计模式之空对象模式

    最近看了不少的书籍和视频等相关资料,决定自己边学习边写一下个人对设计模式的理解,如果有不对的请大家多多指正. 今天先说说我个人觉得最简单的设计模式 -- [空对象模式] 空对象模式可以减少客户端对对象 ...

  8. SQL Server 数据库表的管理

    上一篇文章简单梳理了一下SQL Server数据库的安装和基本操作,这篇文章主要讲述一下数据库表的管理 一.数据库的创建 有关数据库的创建有两种方式,一种是通过视图创建,第二种就是通过T-SQL语句来 ...

  9. useradd新建用户和权限分配

    场景:在搭建Ftp服务器时候,需要新建ftp用户,其实新建的ftp用户和Linux中root新建的用户一样,只是需要了解新建用户时候的相关规则. 1 解决新建用户缺少配置文件 1.1 新建用户 指定目 ...

  10. C++引用形参,函数返回多个值

    之前编代码有遇到过想让一个函数返回多个值的情况,low low的我不知道有什么办法,直接使用的全局变量将函数里的值传出去. 今天看书,<C++primer>第五版中文版第189页:使用引用 ...