第4章 演算子
この章では、JavaScript の 算術、代入、比較、三項演算子など について説明します。
homepage
# **演算子** *** JavaScriptには、さまざまな演算子がありますが、大きく分けて**算術演算子**、**代入演算子**、**比較演算子**、**論理演算子**の4種類があります。 ## **1.算術演算子** 算術演算子は、計算を行う演算子です。 <table border="1"> <tr style="width:100px ;background-color:#C6E0B4 ;text-align:center;"> <td>演算子</td> <td>説明</td> <td>使用例</td> <td>結果</td> </tr> <tr> <td>+</td> <td>数値の加算</td> <td>1+1 </td> <td>2</td> </tr> <td>+</td> <td>文字列の連結</td> <td>"Hello" + "World" </td> <td>"HelloWorld"</td> </tr> <tr> <td>-</td> <td>数値の減算</td> <td>2-1</td> <td>1</td> </tr> <tr> <td>*</td> <td>数値の乗算</td> <td>2*2</td> <td>4</td> </tr> <tr> <td>/</td> <td>数値の除算</td> <td>8/2</td> <td>4</td> </tr> <tr> <td>%</td> <td>数値の剰余</td> <td>10/3</td> <td>1</td> </tr> </table> +演算子は、計算対象のデータ型に応じて処理内容が変わります。どちらか片方でも文字列であれば、結果は２つの値を連結した文字列となります。 #### **例** [sample4-1.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <script> var x = 123 + 456; document.write("x:" + x + "<br>"); var y = "123" + 456; document.write("y:" + y + "<br>"); </script> </body> </html> ``` #### **実行結果** x:579 y:123456 <br> また、下記の算術演算子もありあす。 **・インクリメント(increment)**<br> インクリメント演算子は（ ```++``` ）です。 一回評価されると元の変数を ＋１になります。 ``` var x = 5; x++; //x = x + 1 と同じ意味です。 var z = x; //zには6が格納されます。 ``` **・デクリメント(decrement)**<br> デクリメント演算子は（ ```--``` ）です。 一回評価されると元の変数を ー１になります。 ``` var x = 5; x--; //x = x - 1 と同じ意味です。 var z = x; //zには4が格納されます。 ``` **・べき乗**<br> べき乗演算子は（ ```**``` ）です。 ``` var x = 5; var z = x ** 2; //xの二乗をzに格納する意味です。 ``` また、```Math.pow(x,y)```を使って同じ結果になります。 ``` var x = 5; var y = 2; var z = Math.pow(x,y); //zには25が格納されます。 ``` **・演算子の優先順位**<br> 演算子の優先順位は、算術式で演算が```実行される順序```を表します。 伝統的な数学と同様に、乗算（```*```）と除算（```/```）は加算（```+```）と減算（```-```）よりも```優先順位が高く```なります。 そして、```括弧()```を使うことで優先順位を```変える```ことができます。 ``` var x = (2 + 5) * 3;//xには21が格納されます。 ``` #### **例** [sample4-2.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <script> var a = 2; document.write((a + 5) * 3); </script> </body> </html> ``` #### **実行結果** 21 <br><br> ## **2.代入演算子** 代入演算子は、JavaScript変数に値を代入します。 + "```=```"代入演算子は、変数に値を代入します。 ``` var x = 10;//数字10を変数xに代入します。 ``` ```注```：等しいは "```==```"演算子を使います。 + "```+=```"代入演算子は変数に値を追加します。 ``` x += 5;// x = x + 5 と同じです。 ``` + "```-=```"代入演算子は変数から値を減算します。 ``` x -= 5;// x = x - 5 と同じです。 ``` + "```*=```"代入演算子は変数を乗算します。 ``` x *= 5;// x = x * 5 と同じです。 ``` + "```/=```"割り当ては、変数を分割します。 ``` x /= 5; // x = x / 5 と同じです。 ``` + "```%=```"代入演算子は、変数の残りを割り当てます。 ``` x %= 5; // x = x % 5 と同じです。 ``` + "```**=```"代入演算子は、変数をべき算します。 ``` x **= y;// x = x ** y と同じです。 ``` #### **例** [sample4-3.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <script> var sum = 0; var i = 1; sum += i; document.write("sum="+sum); </script> </body> </html> ``` #### **実行結果** sum=1 <br><br> ## **3.比較と論理演算子** 比較演算子と論理演算子は、```true``` or ```false```の テストに使用されます。 ### **3-1.比較演算子** 比較演算子は、変数または値の間の同等性または差異を判断するために論理ステートメント(statement)で使用されます。 下の表は比較演算子を説明しています。 <table border="1"> <tr style="width:100px ;background-color:#C6E0B4 ;text-align:center;"> <td>演算子</td> <td>意味</td> <td>使用例</td> <td>評価結果</td> </tr> <tr> <td>></td> <td>左辺が右辺よりも大きい</td> <td>8 > 2</td> <td>true</td> </tr> <tr> <td>>=</td> <td>左辺が右辺より大きいか同じ</td> <td>3 >= 3</td> <td>true</td> </tr> <tr> <td><</td> <td>左辺より右辺が大きい</td> <td>7 < 4</td> <td>false</td> </tr> <tr> <td><=</td> <td>左辺より右辺が大きいか同じ</td> <td>3 <= 6</td> <td>true</td> </tr> <tr> <td>==</td> <td>左辺と右辺の値が同じ</td> <td>7 == 7</td> <td>true</td> </tr> <tr> <td>===</td> <td>左辺と右辺の値と型がおなじ</td> <td>‘7’ === 7</td> <td>false</td> </tr> <tr> <td>!=</td> <td>左辺と右辺が異なる</td> <td>7 != 7</td> <td>false</td> </tr> </table> <br> ### **3-2.論理演算子** 論理演算子は、変数間または値間の論理を決定するために使用されます。 <table border="1"> <tr style="width:100px ;background-color:#C6E0B4 ;text-align:center;"> <td>演算子</td> <td>意味</td> <td>使用例</td> <td>評価結果</td> </tr> <tr> <td>&&</td> <td>左と右共に TRUE の場合に TRUE</td> <td>(9 < 10 && 2 > 1)</td> <td>true</td> </tr> <tr> <td>||</td> <td>左と右どちらかが TRUE の場合に TRUE</td> <td>(5 == 5 || 4 == 5)</td> <td>true</td> </tr> <tr> <td>!</td> <td>TRUE でない場合 TRUE</td> <td>!(4 == 4)</td> <td>false</td> </tr> </table> <br> ### **3-3.条件 (三項) 演算子** 条件 (三項) 演算子は JavaScript では唯一の、3 つのオペランドをとる演算 子です。この演算子は、if 文のショートカットとしてよく用いられます。 #### **書式** ``` 条件式 ? 式1 : 式2 ``` 条件式を評価し、```TRUE```であれば**式1**、```FALSE```であれば**式2**を返します。 <table border="1"> <tr style="width:100px ;background-color:#C6E0B4 ;text-align:center;"> <td>演算子</td> <td>意味</td> <td>使用例</td> <td>評価結果</td> </tr> <tr> <td>? :</td> <td>条件により実行分岐</td> <td>（10>5）? a : b</td> <td>aが返されます</td> </tr> </table> <br> #### **例** [sample4-4.html] ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <script> var age,voteable; age = 19; voteable = (age<20)?"未成人":"成人"; document.write(voteable); </script> </body> </html> ``` #### **実行結果** 未成人 <br><br> *** >**練習** >>**問題1**[ex4-1.html] 下記コードでxに格納された値は何でしょうか。 ``` var x = 5; var y = 2; x %=y; x += 5; x = Math.pow(x,y); ``` >>**問題2**[ex4-2.html] zに格納されたのは何でしょうか。 ``` var y = 10; var x = 1; var z = (y < 10 && 2 > x) ? x+3 : x-1 ; ```
content
戻る
