Operators (ตัวดำเนินการ)

ในเนื้อหาหัวข้อ Syntax ได้มีการกล่าวถึงเรื่องของ Operators พื้นฐานของจาวาสคริปต์และยกตัวอย่างการใช้งาน Operators ซึ่งเนื้อหานี้จะเป็นการพูดถึงรายละเอียดเกี่ยวกับ Operators มากยิ่งขึ้น

ตัวดำเนินการเกี่ยวกับตัวเลข (Number)

Operator คำอธิบาย
+ การบวกเพิ่ม
การลบ
* การคูณ
** การยกกำลัง
/ การหาร
% การหารเอาเศษ
++ เพิ่มขึ้น
ลดลง

 

ตัวดำเนินการกำหนดค่า (Assignment) ใช้ในการกำหนดค่าตัวแปร

Operator ตัวอย่าง
= x = y ซึ่งมีค่าเท่ากับ (x = y)
+= x += y ซึ่งมีค่าเท่ากับ (x = x + y)
-= x -= y ซึ่งมีค่าเท่ากับ (x = x – y)
*= x *= y ซึ่งมีค่าเท่ากับ (x = x * y)
/= x /= y ซึ่งมีค่าเท่ากับ (x = x / y)
%= x %= y ซึ่งมีค่าเท่ากับ (x = x % y)
**= x **=  y ซึ่งมีค่าเท่ากับ (x = x ** y)

ตัวอย่าง การใช้ตัวดำเนินการตัวเลข และกำหนดค่า

var x = 10;

x += 5;

x -= 2;

x *= 10;

x /= 2;

//ผลลัพธ์คือ x มีค่าเท่ากับ 65

จากตัวอย่างด้านบนสามารถอธิบายได้ว่า สร้างตัวแปร x และกำหนดค่าเริ่มต้นเท่า 10 จากนั้นนำ x ไปบวก 5 –> ลบ 2 –> คูณ 10 และหารด้วย 2 สุดท้ายผลลัพธ์ของตัวแปร x จึงมีค่าเท่ากับ 65

 

ตัวดำเนินการสตริง (String) ในที่นี้คือการเชื่อมสตริง (Concatenate)

การ concate สตริงนั้นใช้เครื่องหมาย + 

การต่อสตริงแบบที่ 1 

"Hello" + (10+2)

//ผลลัพธ์ Hello12

 

การต่อสตริงแบบที่ 2

var name = "Pawin";

name += " Khenphukhiaw";

//ผลลัพธ์ Pawin Khenphukhiaw

 

ตัวดำเนินการเปรียบเทียบ (Comparison)

กำหนดให้ตัวแปร x มีค่าเท่ากับ 5 (x = 5) และนำตัวแปร x ไปใช้ในตัวอย่างการเปรียบเทียบในตางราง

Operator Description ตัวอย่างการเปรียบเทียบ คืนค่าเป็น True/False
== ค่าเท่ากัน x == 8 false
x == 5 true
x == “5” true
=== เท่ากันทั้งค่าและประเภทของตัวแปร x === 5 true
x === “5” false
!= ไม่เท่ากัน x != 8 true
!== ค่าไม่เท่ากัน หรือประเภทตัวแปรไม่เท่ากัน x !== 5 false
x !== “5” true
x !== 8 true
> มากกว่า x > 8 false
< น้อยกว่า x < 8 true
>= มากกว่าหรือเท่ากับ x >= 8 false
<= น้อยกว่าหรือเท่ากับ x <= 8 true

 

ตัวดำเนินการด้านตรรกะ (Logical)

กำหนดให้ตัวแปร a = 50 และตัวแปร b = 20 จากนั้นนำตัวแปรทั้ง 2 ไปใช้สร้างตัวอย่างในตาราง

Operator คำอธิบาย ตัวอย่าง ผลลัพธ์ True/False
&& และ (a>b && b!=a)  True
(a>b && b==a)  False
|| หรือ (a>b || b==a)  True
(a<b || b==a)  False
! ไม่ (ความหมายตรงข้าม) !(a==b) True
!(a!=b) False

 

ตัวดำเนินการเกี่ยวกับประเภท (Type)

Operator คำอธิบาย
typeof ส่งคืนค่าประเภทของตัวแปร
instanceof ส่งคืนค่า true หากอ็อบเจ็กต์เป็นอินสแตนซ์ของประเภทอ็อบเจ็กต์

ประเภทของตัวแปร

ใน JavaScript มีข้อมูล 5 ประเภทดังนี้

  • string
  • number
  • boolean
  • object
  • function

วัตถุมี 6 ประเภทดังนี้

  • Object
  • Date
  • Array
  • String
  • Number
  • Boolean

ข้อมูลที่ไม่มีค่าแบ่งออกเป็น 2 ประเภทดังนี้

  • null
  • undefined

 

ตัวอย่าง การใช้งานตัวดำเนินการเกี่ยวกับประเภท

<html>
  <body>

    <h2>The JavaScript typeof Operator</h2>


    <p id="demo"></p>

    <script>
    document.getElementById("demo").innerHTML = 
      typeof "pawin" + "<br>" +
      typeof 4.5555 + "<br>" +
      typeof NaN + "<br>" +
      typeof false + "<br>" +
      typeof {name:'john', age:34} + "<br>" +
      typeof new Date() + "<br>" +
      typeof function () {} + "<br>" +
      typeof myCar + "<br>" +
      typeof null;
    </script>

  </body>
</html>


 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: