Article Image

Tue Sep 25 17:50:59 2018 [17729 views]

By Pasin Boonsermsuwong

Operators ใน JavaScript คืออะไร?

 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

หากมีโลจิกที่ซับซ้อน แนะนำให้ครอบวงเล็บให้ชัดเจน

Share

เกี่ยวกับผู้เขียน

Author's Profile Picture
Pasin Boonsermsuwong

ฉายา "Born to be" คลุกคลีเกี่ยวกับ IT มาตั้งแต่เด็ก เชี่ยวชาญด้าน React Python และ Django

แสดงความคิดเห็น