JavaScript_html/css_WEB-ITnose のプラス演算子の詳細

JavaSript は非常に優れた言語です。変数の型の変更、オブジェクトへのメソッドやプロパティの追加、さまざまな変数型の演算子の使用など、さまざまなことができるので、その柔軟性が気に入っています。

ただし、JavaScript を柔軟に使用するには、依然として代償を払わなければなりません。開発者は、加算 ( + )、等しいか等しい ( == および === )、等しくない ( !== または === ) など、さまざまな型を処理するためにさまざまな演算子を使用する方法を理解する必要があります。同時に、多くの演算子は独自の方法を使用して型変換を処理できます。

加算演算子

最も一般的に使用される演算子の 1 つは加算演算子です: + 。この演算子は、文字列と数値を連結するために使用されます。

ルール 1: 文字列の連結

// string + string = string (concatenation)var result = "Hello, " + "World!";console.log(result); // "Hello, World!"

ルール 2: 数値の加算

// number + number = number (addition)var result = 10 + 5;  console.log(result);// 15

JavaScript では、 object 、 array 、 null または unknown の演算子を使用できます。次に、これらを使用するためのルールと詳細を見ていきます。

使用規則

JavaScript の演算子を使用していくつかの型を変換する方法を理解するために、以下のいくつかの例を見てみましょう:

operand + operand = result  

• 演算子の番号にオブジェクトがある場合、プリミティブ値 (文字列) に変換されます。 、数値またはブール値)
• オペランドに文字列がある場合、2 番目のオペランドは文字列に変換され、文字列に連結されます
• その他の場合、2 つのオペランドは数値に変換され、加算演算を実行するためのルール

オブジェクト変換:

• オブジェクト型が Date の場合、toString() メソッドを使用できます
• その他の場合は、valueOf() メソッドを使用し、プリミティブ値を返します
• valueOf( ) メソッドの場合プリミティブ値に戻すことはできません。toString() メソッドを使用できます。そして、これはほとんどの場合に起こります

2 つのオペランドがプリミティブ型である場合、演算子はチェックし、少なくとも 1 つのオペランドが文字列である場合、それらは文字列として連結されます。他の場合には、オペランドは単純に数値として扱われ、加算演算が実行されます。

学習例

次の例は、加算演算子をより深く理解するのに役立ち、同時により複雑な状況での変換方法を理解するのに役立ちます。

例 1: 数値と文字列

var result = 1 + "5"; //"15"

• 1 + "5" : ルール 2 に従って、2 番目のオペランドが文字列である場合、数値 1 は文字列 "1" になります
• "1" + "5" : 文字列連結
• "15"

2 番目のオペランドは文字列です。最初のオペランドは数値を文字列に変換し、それらを連結します。

例 2: 数値と配列

var result = [1,3,5] + 1; // "1,3,51"

• [1,3,5] + 1 : ルールによるone 、配列 [1,3,5] は元の値を "1,3,5" に変換します
• "1,3,5" + 1 : ルール 2 に従って、数値 1 は文字列に変換されます"1"
• "1,3,5" + "1" : 文字列の連結
• 1,3,51

最初のオペランドは値を文字列に変換する配列です。オペランドが数値の場合、値を文字列に変換し、2 つの文字列を連結します。

例 3: 数値とブール値

var result = 10 + true; // 11

• 10 + true : ルール 3 に従って、ブール値 true は数値 1 に変換されます
• 10 + 1 : 数値が加算されます
• 11

どちらのオペランドも文字列ではないため、ブール値は数値に変換されてから数値の加算演算が実行されます。

リスト 4: 数値とオブジェクト

var result = 15 + {};//"15[object Object]"

• 15 + {} : 2 番目のオペランドはオブジェクトであり、そのオブジェクトはルール 1 [object Object] に従って文字列に変換されます
• 15 + "[object] Object]" : ルール 2 に従って、数値 15 は文字列 "15" に変換されます
• "15" + "[object Object]" : 文字列の連結
• "15[object Object]"

2 番目のオペランドはオブジェクトであり、文字列に変換されます。 valueOf() メソッドは、toString() メソッドを使用してプリミティブ値ではなくオブジェクト自体を返すため、文字列を返します。

2 番目のオペランドは文字列に変換されます。このとき、数値も文字列に変換され、2 つのオペランドが文字列接続されます。

示例5： 数字和 null

var result = 8 + null; //8

• 8 + null : 因为操作数没有字符串，根据规则三， null 将转换为数字 0
• 8 + 0 : 两个数字做加法运算
• 8

如果操作数不是对象或字符串时， null 将转换为数字，然后做数字的加法运算。

示例6: 字符串和 null

var result = "queen" + null; // "queennull"

• "queen" + null : 因为第一个操作数是一个字符串，根据规则二， null 将转换为一个字符串 "null"
• "queen" + "null" : 字符串连接
• "queennull"

因为第一个操作数是一个字符串，所以 null 将转换为一个字符串 "null" ，然后两个操作数做字符串连接。

示例7： 数字和 undefined

var result = 12 + undefined; // NaN

• 12 + undefined : 因为没有任何一个操作数是字符串，根据规则三, undefined 将转换为一个数字 NaN
• 12 + NaN : 做数字加法运算
• NaN

因为没有操作数是对象或字符串， undefined 将转换为 NaN 。两个数字做加法运算，因为任何一个数字和 NaN 做加法运算，其值都等于 NaN

console.log(1 + "5"); // "15"console.log([1, 3, 5] + 1); //"1,3,51"console.log(10 + true); //11console.log(15 + {}); //"15[object Object]"console.log(8 + null); // 8console.log("queen" + null); // "queennull"console.log({} + null); // "[object Object]null"console.log(12 + undefined); //NaNconsole.log("w3cplus" + undefined);//"w3cplusundefined"console.log([] + null); // "null"console.log([] + undefined); // "undefined"console.log([] + "w3cplus"); // "w3cplus"

总结

为了避免潜在的问题，不在对旬上直接使用加法操作符，除非明确使用 toString() 或 valueOf() 方法。

如上面的示例所示，上面有一些特列的案例。简单点说，如果开发人员知道确切的数据类型在做加法操作的时候，知道场景的转换规则，将会帮助你减少出错的概率，让你编码也更开心。

本文根据 @Dmitri Pavlutin 的《 JavaScript addition operator in details 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://rainsoft.io/javascriptss-addition-operator-demystified/ 。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。