![Article Image](https://mecode.blog/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBHZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--0465c895cf17962a70fda75c73ab7291f4458f73/addition-black-and-white-black-and-white-374918.jpg)
Tue Sep 25 17:50:59 2018 [19506 views]
Operators ใน JavaScript คืออะไร?
บกควานนี้อธิบายเกี่ยวกับ Operators พื้นฐานใน JavaScript เช่น arithmetic, logical และ comparison operators.
Operators
Operators คือเครื่องหมายต่างๆที่เอาไว้ใช้ทำการคำนวนทางคณิตศาสตร์หรือตรรกะ
ก่อนขึ้นเรื่อง operators ควรเข้าใจชนิดพื้นฐานของตัวแปล
ในบทความนี้จะใช้ตัวแปลสามชนิดคือ:
number
(ตัวเลข) เช่น 10
, 5.555
string
(ตัวอักษร) เช่น “abcd”, “5.555”
⇐ สังเกตว่ามี “ ”
ครอบตัวแปลที่เป็นสตริงเสมอ
boolean
(ค่าความเป็นจริง) คือ true
หรือ false
Arithmetic operators
Arithmetic operators นั้นใช้ในการคำนวนทางคณิตศาสตร์ ซึ่งเหมือนภาษาโปรแกรมมิ่งอื่นๆ
Operator
ความหมาย
ตัวอย่าง
+
บวก
Note: ถ้านำ string มาบวกกับ number หรือ string จะเท่ากับนำมาต่อกัน (concatenate)
console.log(4 + 2); // ได้ 6
console.log(“4” + “2”); //ได้ “42”
-
ลบ
console.log(4 - 2); // ได้ 2
*
คูณ
console.log(4 * 2); // ได้ 8
/
หาร
console.log(4 / 2); // ได้ 2
**
ยกกำลัง
console.log(4 ** 2); // ได้ 16
%
โมดูลัส หาค่าเศษจากหาร
console.log(10 % 3); // ได้ 1
++
+1 กับตัวแปรที่ถูกดำเนินการ
เขียนได้สองแบบคือ x++
และ ++x
x++
จะให้ค่า x
ก่อนบวก
++x
จะให้ค่า x
หลังบวก
var x = 10;
console.log( x++ ); // ได้ 10
console.log( x ); // ได้ 11
var y = 10;
console.log( ++y ); // ได้ 11
console.log( y ); // ได้ 11
--
-1 กับตัวแปรที่ถูกดำเนินการ
เขียนได้สองแบบคือ x--
และ --x
กฎเกณฑ์เหมือน ++
var x = 10;
console.log( --x ); // ได้ 9
ลำดับในการคำนวน (เช่นคูณหารก่อนบวกลบ) นั้นเป็นไปตามหลักคณิตศาสตร์ สามารถใช้วงเล็บบอกลำดับได้
ตัวอย่าง
console.log( ( 2 + 2 ) * 4 ); // ได้ 16
Comparison operators
Comparison operators ใช้ในการเปรียบเทียบค่าสองค่าแล้วคืนค่าว่าการเปรียบเทียบนั้นเป็นจริงหรือไม่
Operator
ความหมาย
==
และ ===
เท่ากับ
!=
และ !==
ไม่เท่ากับ
>
มากกว่า
>=
มากกว่าหรือเท่ากับ
<
น้อยกว่า
<=
น้อยกว่าหรือเท่ากับ
ตัวอย่าง:
console.log( 1 === 1 ); // ได้ true
console.log( 2 <= 1 ); // ได้ false
การคำนวนและเปรียบเทียบค่าระหว่างตัวแปลที่มีชนิดต่างกัน
ถ้าหากค่าทั้งสองที่นำมาใช้เป็นคนละชนิด (type) กัน JavaScript จะพยายามปลี่ยนชนิดให้เหมือนกันก่อน ตัวอย่างเช่น:
console.log(“4” + 2 ); //ได้ “42”
Operator + ใช้เชื่อมต่อ string ได้ 2
จึงถูกแปลงเป็น string
console.log(“4” - 2); // ได้ 2
Operator - ใช้ได้กับ number เท่านั้น “4”
ถึงถูกแปลงเป็นเลขก่อน
กฎการเปลี่ยนชนิดนี้ถูกใช้กับ Comparison operator เช่นเดียวกันเช่น
console.log(“4” == 4); // ได้ true
มีข้อยกเว้นคือ !==
และ ===
ที่จะทำการเปรียบเทียบอย่างเข้มงวด ไม่ทำการเปลี่ยนชนิดของค่า
console.log(“4” === 4);
ได้ false
เนื่องจาก “4”
เป็น string
และ 4
เป็น number
แนะนำให้ใช้ ===,!==
แทน ==,!==
เนื่องจาก กฎการเปลี่ยนชนิดตัวแปลของ Javascript ค่อนข้างจะสับสน โดยเฉพาะการคำนวนคณิตศาสตร์ระหว่าง number
, string
หรือเปรียบเทียบค่า null
กับ undefined
กับตัวแปรอื่นๆ
ในการคำนวนทางคณิตศาสตร์ ควรเปลี่ยน type ในเหมือนกันก่อนเพื่มความชัดเจน เช่น:
console.log(Number(“4”) + 2); // ได้ 6
Assignment operators
Assignment operators เช่น =
นั้นเปลื่ยนค่าที่อยู่ทางซ้ายของตัว operator ขึ้นอยู่กับค่าทางขวา
Operators ส่วนใหญ่ใช้ในการเขียนย่อ
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
ตัวอย่าง:
Let a = 10;
a += 5;
console.log(a); // ได้ 15
Logical operators
Logical operators ทั่วไปจะใช้เปรียบเทียบระหว่างค่า boolean
ใน JavaScript มี logical operator คือ &&
(และ) กับ ||
(หรือ)
ตัวอย่าง
console.log( true && true ); // ได้ true
console.log( true && false ); // ได้ false
console.log( true || false ); // ได้ true
console.log( false || false ); // ได้ false
&&
จะถูกคำนวนก่อน ||
สามารถใช้วงเล็บบอกลำดับการเปรียบเทียบได้
ตัวอย่าง:
console.log( false && true || true ); // ได้ true
console.log( false && (true || true) ); // false
หากมีโลจิกที่ซับซ้อน แนะนำให้ครอบวงเล็บให้ชัดเจน
บกควานนี้อธิบายเกี่ยวกับ Operators พื้นฐานใน JavaScript เช่น arithmetic, logical และ comparison operators.
Operators
Operators คือเครื่องหมายต่างๆที่เอาไว้ใช้ทำการคำนวนทางคณิตศาสตร์หรือตรรกะ
ก่อนขึ้นเรื่อง operators ควรเข้าใจชนิดพื้นฐานของตัวแปล
ในบทความนี้จะใช้ตัวแปลสามชนิดคือ:
number
(ตัวเลข) เช่น 10
, 5.555
string
(ตัวอักษร) เช่น “abcd”, “5.555”
⇐ สังเกตว่ามี “ ”
ครอบตัวแปลที่เป็นสตริงเสมอboolean
(ค่าความเป็นจริง) คือ true
หรือ false
Arithmetic operators
Arithmetic operators นั้นใช้ในการคำนวนทางคณิตศาสตร์ ซึ่งเหมือนภาษาโปรแกรมมิ่งอื่นๆ
Operator | ความหมาย | ตัวอย่าง |
| บวก Note: ถ้านำ string มาบวกกับ number หรือ string จะเท่ากับนำมาต่อกัน (concatenate) |
|
| ลบ |
|
| คูณ |
|
| หาร |
|
| ยกกำลัง |
|
| โมดูลัส หาค่าเศษจากหาร |
|
| +1 กับตัวแปรที่ถูกดำเนินการ เขียนได้สองแบบคือ
|
|
| -1 กับตัวแปรที่ถูกดำเนินการ เขียนได้สองแบบคือ |
|
ลำดับในการคำนวน (เช่นคูณหารก่อนบวกลบ) นั้นเป็นไปตามหลักคณิตศาสตร์ สามารถใช้วงเล็บบอกลำดับได้
ตัวอย่างconsole.log( ( 2 + 2 ) * 4 ); // ได้ 16
Comparison operators
Comparison operators ใช้ในการเปรียบเทียบค่าสองค่าแล้วคืนค่าว่าการเปรียบเทียบนั้นเป็นจริงหรือไม่
Operator | ความหมาย |
| เท่ากับ |
| ไม่เท่ากับ |
| มากกว่า |
| มากกว่าหรือเท่ากับ |
| น้อยกว่า |
| น้อยกว่าหรือเท่ากับ |
ตัวอย่าง:console.log( 1 === 1 ); // ได้ true
console.log( 2 <= 1 ); // ได้ false
การคำนวนและเปรียบเทียบค่าระหว่างตัวแปลที่มีชนิดต่างกัน
ถ้าหากค่าทั้งสองที่นำมาใช้เป็นคนละชนิด (type) กัน JavaScript จะพยายามปลี่ยนชนิดให้เหมือนกันก่อน ตัวอย่างเช่น:
console.log(“4” + 2 ); //ได้ “42”
Operator + ใช้เชื่อมต่อ string ได้ 2
จึงถูกแปลงเป็น string
console.log(“4” - 2); // ได้ 2
Operator - ใช้ได้กับ number เท่านั้น “4”
ถึงถูกแปลงเป็นเลขก่อน
กฎการเปลี่ยนชนิดนี้ถูกใช้กับ Comparison operator เช่นเดียวกันเช่นconsole.log(“4” == 4); // ได้ true
มีข้อยกเว้นคือ !==
และ ===
ที่จะทำการเปรียบเทียบอย่างเข้มงวด ไม่ทำการเปลี่ยนชนิดของค่าconsole.log(“4” === 4);
ได้ false
เนื่องจาก “4”
เป็น string
และ 4
เป็น number
แนะนำให้ใช้ ===,!==
แทน ==,!==
เนื่องจาก กฎการเปลี่ยนชนิดตัวแปลของ Javascript ค่อนข้างจะสับสน โดยเฉพาะการคำนวนคณิตศาสตร์ระหว่าง number
, string
หรือเปรียบเทียบค่า null
กับ undefined
กับตัวแปรอื่นๆ
ในการคำนวนทางคณิตศาสตร์ ควรเปลี่ยน type ในเหมือนกันก่อนเพื่มความชัดเจน เช่น:console.log(Number(“4”) + 2); // ได้ 6
Assignment operators
Assignment operators เช่น =
นั้นเปลื่ยนค่าที่อยู่ทางซ้ายของตัว operator ขึ้นอยู่กับค่าทางขวา
Operators ส่วนใหญ่ใช้ในการเขียนย่อ
Operator | ความหมาย |
|
|
|
|
|
|
|
|
|
|
ตัวอย่าง:Let a = 10;
a += 5;
console.log(a); // ได้ 15
Logical operators
Logical operators ทั่วไปจะใช้เปรียบเทียบระหว่างค่า boolean
ใน JavaScript มี logical operator คือ &&
(และ) กับ ||
(หรือ)
ตัวอย่างconsole.log( true && true ); // ได้ true
console.log( true && false ); // ได้ false
console.log( true || false ); // ได้ true
console.log( false || false ); // ได้ false
&&
จะถูกคำนวนก่อน ||
สามารถใช้วงเล็บบอกลำดับการเปรียบเทียบได้
ตัวอย่าง:console.log( false && true || true ); // ได้ true
console.log( false && (true || true) ); // false
หากมีโลจิกที่ซับซ้อน แนะนำให้ครอบวงเล็บให้ชัดเจน
เกี่ยวกับผู้เขียน
Pasin Boonsermsuwong
ฉายา "Born to be" คลุกคลีเกี่ยวกับ IT มาตั้งแต่เด็ก เชี่ยวชาญด้าน React Python และ Django
แสดงความคิดเห็น
![Author's Profile Picture](/assets/pasin-d89025bba0e39c91634569563b0297f4081d78566378c2398ec5e20ce024707f.jpg)
Pasin Boonsermsuwong
ฉายา "Born to be" คลุกคลีเกี่ยวกับ IT มาตั้งแต่เด็ก เชี่ยวชาญด้าน React Python และ Django