ตัวดำเนินการ ในภาษา TypeScript

ตัวดำเนินการ (Operator) คือสิ่งที่ใช้สำหรับดำเนินการหรือประมวลผลข้อมูลเพื่อให้ได้รับค่าใหม่ ตัวดำเนินการในภาษา TypeScript นั้นมีหลายประเภทโดยสามารถแบ่งออกตามหน้าที่การทำงานองมัน นี่เป็นเนื้อหาที่คุณจะได้เรียนรู้ในบทนี้

• ตัวดำเนินการคืออะไร
• ตัวดำเนินการกำหนดค่า
• ตัวดำเนินการทางคณิตศาสตร์
• ตัวดำเนินการเปรียบเทียบ
• ตัวดำเนินการตรรกศาสตร์
• ตัวดำเนินการระดับบิต
• ตัวดำเนินการเพิ่มและลดค่า
• Ternary operator
• ลำดับความสำคัญของตัวดำเนินการ

ตัวดำเนินการคืออะไร

ตัวดำเนินการ (Operator) คือสิ่งที่ใช้ดำเนินการหรือประมวลผลข้อมูลเพื่อให้ได้รับค่าใหม่ ตัวดำเนินการมีหลายประเภทโดยแบ่งออกตามหน้าที่การทำงาน เช่น ตัวดำเนินการทางคณิตศาสตร์ใช้สำหรับคำนวณทางตัวเลข หรือตัวดำเนินการเปรียบเทียบใช้สำหรับเปรียบเทียบความเท่ากันของข้อมูล เป็นต้น

ตัวดำเนินการจะแสดงด้วยสัญลักษณ์แบบหนึ่งหรือหลายตัวอักษร เช่น + เป็นตัวดำเนินการสำหรับบวกเลข หรือ <= เป็นตัวดำเนินการเปรียบเทียบว่าค่าน้อยกว่าหรือเท่ากันหรือไม่ นึี่เป็นรูปแบบการใช้งานทั่วไปของตัวดำเนินการในภาษา TypeScript

// Unary operator
[op] exp
// Binary operator
exp1 [op] exp2

ตัวดำเนินการ [op] จะใช้ร่วมกับข้อมูลที่เรียกว่าตัวถูกดำเนินการ (Operands) exp โดยที่ตัวดำเนินการที่ทำงานกับหนึ่งตัวถูกดำเนินการจะเรียกว่า Unary operator ส่วนตัวดำเนินการที่ทำงานกับสองตัวถูกดำเนินการจะเรียกว่า Binary operator มาเริ่มต้นกับตัวดำเนินการแรกในภาษา TypeScript นั่นคือตัวดำเนินการกำหนดค่า

ตัวดำเนินการกำหนดค่า

ตัวดำเนินการกำหนดค่า (Assignment operator) (=) เป็นตัวดำเนินการที่ใช้สำหรับกำหนดค่าให้กับตัวแปรในตอนที่มันถูกประกาศหรือเปลี่ยนค่าในตัวแปรให้ค่าเป็นใหม่ ตัวดำเนินการกำหนดค่าแทบจะใช้งานตลอดเวลาในการเขียนโปรแกรม นี่เป็นตัวอย่างการใช้งาน

let song: string = "Firefly";
let year: number = 2018;

เราใช้ตัวดำเนินการกำหนดค่าเพื่อกำหนดค่าให้กับตัวแปรในตอนที่ประกาศ ในตัวอย่างนี้ เราประกาศสองตัวแปรเพื่อเก็บชื่อเพลงและปีที่มันถูกเผยแพร่ นอกจากนี้ คุณสามารถประกาศตัวแปรด้วยคำสั่ง const และใช้ตัวดำเนินการนี้ได้เช่นเดียวกัน

year = 2021;

อย่างบอกไปตอนต้น มันยังใช้สำหรับเปลี่ยนค่าในตัวแปรให้เป็นค่าใหม่ได้ นี่เป็นการเปลี่ยนแปลงค่าในตัวแปร year จากค่าเดิมให้เป็น 2021 แทน จะเห็นว่าการใช้งานตัวดำเนินการกำหนดค่าไม่มีอะไรซับซ้อน คุณได้เห็นเราใช้งานมันเป็นจำนวนมากในบทที่ผ่านมา

นอกจากนี้ ตัวดำเนินการกำหนดค่ายังใช้ในสถานที่อื่นๆ เช่น การกำหนดค่าเริ่มต้นให้กับพารามิเตอร์ของฟังก์ชัน ยกตัวอย่างเช่น

function sayHi(name: string = "Marcus") {
    console.log(`Hi ${name}!`);
}

ในตัวอย่างนี้ เราได้ประกาศฟังก์ชัน sayHi ที่มีหนึ่งพารามิเตอร์คือ name โดยพารามิเตอร์นี้ได้มีการกำหนดค่าเริ่มต้นให้เป็น "Marcus" โดยใช้ตัวดำเนินการกำหนดค่า นั่นหมายความว่าหากเราเรียกใช้ฟังก์ชันโดยไม่ส่งพารามิเตอร์ค่าเริ่มต้นจะถูกใช้งานแทน

ตัวดำเนินการทางคณิตศาสตร์

ตัวดำเนินการทางคณิตศาสตร์ (Mathematic operator) ใช้สำหรับการคำนวณทางคณิตศาสตร์กับตัวเลข เช่น การบวก การลบ การคูณ การหาร เป็นต้น ตัวดำเนินการทางคณิตศาสตร์จะทำงานกับสองตัวถูกดำเนินการ นี่เป็นรายการของตัวดำเนินการทางคณิตศาสตร์ในภาษา TypeScript

นี่เป็นตัวอย่างการใช้งานตัวดำเนินการทางคณิตศาสตร์รูปแบบต่างๆ สำหรับคำนวณตัวเลขในภาษา TypeScript

let a: number = 5;
let b: number = 2;

console.log(`a + b = ${a + b}`);
console.log(`a - b = ${a - b}`);
console.log(`a * b = ${a * b}`);
console.log(`a / b = ${a / b}`);
console.log(`a % b = ${a % b}`);
console.log(`a ** b = ${a ** b}`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

a + b = 7
a - b = 3
a * b = 10
a / b = 2.5
a % b = 1
a ** b = 25

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

นอกจากนี้ ในภาษา TypeScript ยังมีอีกสองตัวดำเนินการเพิ่มเข้ามา ได้แก่ ตัวดำเนินการหารเอาเศษ (%) ที่จะส่งค่ากลับเป็นเศษที่ได้จากการหาร a ด้วย b และตัวดำเนินการยกกำลัง (**) ส่งค่ากลับเป็นผลของ a ยกกำลังด้วย b

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

ตัวดำเนินการเปรียบเทียบ (Comparison operator) ใช้เพื่อเปรียบเทียบค่าสองค่าและให้ผลลัพธ์เป็น Boolean ตัวดำเนินการเปรียบเทียบสามารถใช้ได้กับข้อมูลทุกประเภท แต่เพื่อให้เข้าใจได้ง่ายในบทนี้เราจะแสดงการใช้งานกับตัวเลข นี่เป็นรายการของตัวดำเนินการเปรียบในภาษา TypeScript

มาดูตัวอย่างการใช้งานตัวดำเนินการเปรียบสำหรับเปรียบตัวเลขในภาษา TypeScript ในตัวอย่างนีี้ เป็นโปรแกรมสำหรับตรวจสอบว่าคุณมีเงินเพียงพอสำหรับซื้อคอมพิวเตอร์หรือไม่ โดยการเปรียบเทียบเงินที่มีกับราคาขายของคอมพิวเตอร์

let money: number = 120;

if (money >= 100) {
    console.log("You can buy this computer.");
} else {
    console.log("Sorry, you don't have enough money.");
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

You can buy this computer.

ตัวดำเนินการเปรียบเทียบ >= ใช้เพื่อเปรียบเทียบว่ามีเงินเพียงพอสำหรับซื้อคอมพิวเตอร์หรือไม่ ถ้าหากค่าทางด้านซ้ายของตัวดำเนินการ money มากกว่าหรือเท่ากับค่าทางด้านขวาของตัวดำเนินการ 100 ตัวดำเนินการให้ผลลัพธ์เป็นจริงและโปรแกรมทำงานในบล็อคของคำสั่ง if

แต่ถ้าหากไม่ใช่ตัวดำเนินการจะส่งค่ากลับเป็นเท็จ ทำให้โปรแกรมทำงานในบล็อคของคำสั่ง else แทน คุณสามารถทดสอบผลลัพธ์นี้ได้โดยการเปลี่ยนค่าในตัวแปร money ให้น้อยกว่า 100 หรือเพิ่มราคาของคอมพิวเตอร์ให้สูงขึ้น

มาดูอีกตัวอย่างสำหรับการใช้งานตัวดำเนินการเปรียบเทียบ ในตัวอย่างนี้ เป็นการเปรียบเทียบอายุของคนสองคนว่าเท่ากัน น้อยกว่าหรือมากกว่า โดยโปรแกรมจะแสดงข้อความที่สอดคล้องกับผลลัพธ์ที่ได้จากการเปรียบเทียบ

let myAge: number = 10;
let yourAge: number = 13;

if (myAge == yourAge) {
    console.log("We are friend.");
} else if (myAge < yourAge) {
    console.log("I'm your younger brother or sister.");
} else {
    console.log("I'm your older brother or sister.");
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

I'm your younger brother or sister.

ในตัวอย่าง เรามีสองตัวแปร myAge และ yourAge ที่เก็บอายุของฉันและคุณ โปรแกรมแสดงข้อความบอกว่าฉันเป็นน้องของคุณเนื่องจากอายุของ myAge น้อยกว่า yourAge หลังจากนี้ให้คุณลองเปลี่ยนค่าในตัวแปร myAge เป็น 13 และรันโปรแกรมอีกครั้ง นี่เป็นผลลัพธ์การทำงานของโปรแกรม

We are friend.

โปรแกรมแสดงได้ผลลัพธ์ว่าทั้งสองเป็นเพื่อนกันเพราะว่าพวกเขามีอายุเท่ากัน

นอกจากจะใช้งานกับตัวเลขแล้ว ตัวดำเนินการเปรียบเทียบยังสามารถใช้ได้กับข้อมูลประเภทอื่นๆ ได้ ในตัวอย่างนี้ เป็นการใช้งานตัวดำเนินการเพื่อเปรียบเทียบค่าของ String ว่ามันเท่ากันหรือไม่ด้วยตัวดำเนินการเปรียบเทียบความเท่ากัน

let username: string = "metin";

if (username == "metin") {
    console.log("Welcome Metin!");
} else {
    console.log("Hmm... we don't know you.");
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Welcome Metin!

เนื่องจากค่าในตัวแปร username เท่ากับ "metin" ที่ให้ผลลัพธ์เป็นจริง ดังนั้นโปรแกรมทำงานในบล็อคของคำสั่ง if และแสดงข้อความว่ายินดีต้อนรับออกทางหน้าจอ จากนั้นคุณลองเปลีี่ยนค่าในตัวแปรเป็นค่าอื่นและโปรแกรมควรจะทำงานในบล็อคของคำสั่ง else แทน

ตัวดำเนินการตรรกศาสตร์

ตัวดำเนินการตรรกศาสตร์ (Logical operator) ใช้เพื่อดำเนินการทางตรรกศาสตร์กับค่าของ Boolean และให้ผลลัพธ์เป็น Boolean ที่เกิดจากการทำงานของตัวดำเนินการแต่ละแบบ นี่เป็นรายการของตัวดำเนินการตรรกศาสตร์ในภาษา TypeScript

จากในตารางจะเห็นว่าตัวดำเนินการ AND และ OR จะทำงานกับสองตัวถูกดำเนินการ ในขณะที่ตัวดำเนินการ NOT ทำงานกับหนึ่งตัวถูกดำเนินการ ต่อไปมาดูว่าแต่ละตัวดำเนินการทำงานอย่างไร

ตัวดำเนินการ AND

ตัวดำเนินการ AND ใช้สำหรับเชื่อมสองค่าของ Boolean เข้าด้วยกัน ถ้าหากค่าของ Boolean ทั้งสองมีค่าเป็น true จะได้ผลลัพธ์เป็น true ไม่เช่นนั้นจะได้ผลลัพธ์เป็น false ในตัวอย่างนี้แสดงผลลัพธ์การทำงานที่เป็นไปได้ทั้งหมดของตัวดำเนินการ AND

console.log(`true && true = ${true && true}`);
console.log(`true && false = ${true && false}`);
console.log(`false && true = ${false && true}`);
console.log(`false && false = ${false && false}`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

true && true = true
true && false = false
false && true = false
false && false = false

ตัวดำเนินการ OR

ตัวดำเนินการ OR ใช้สำหรับเชื่อมสองค่าของ Boolean เข้าด้วยกัน ถ้าหากค่าของ Boolean อย่างน้อยหนึ่งค่าเป็น true จะได้ผลลัพธ์เป็น true ไม่เช่นนั้นจะได้ผลลัพธ์เป็น false ในตัวอย่างนี้แสดงผลลัพธ์การทำงานที่เป็นไปได้ทั้งหมดของตัวดำเนินการ OR

console.log(`true || true = ${true || true}`);
console.log(`true || false = ${true || false}`);
console.log(`false || true = ${false || true}`);
console.log(`false || false = ${false || false}`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

true || true = true
true || false = true
false || true = true
false || false = false

ตัวดำเนินการ NOT

ตัวดำเนินการ NOT ใช้สำหรับกลับค่าของ Boolean ให้เป็นค่าที่ตรงกันข้าม นั่นคือจาก true เป็น false และจาก false เป็น true ในตัวอย่างนี้แสดงผลลัพธ์การทำงานที่เป็นไปได้ทั้งหมดของตัวดำเนินการ NOT

console.log(`!true = ${!true}`);
console.log(`!false = ${!false}`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

!true = false
!false = true

ต่อไปมาดูตัวอย่างการใช้งานตัวดำเนินการตรรกศาสตร์ในการเขียนโปรแกรม มาเริ่มต้นกับตัวดำเนินการ AND กันก่อน ในตัวอย่างนี้ เป็นโปรแกรมจำลองการเข้าสู่ระบบที่จะตรวจสอบชื่อผู้ใช้งานและรหัสผ่านว่าถูกต้องหรือไม่

let username: string = "metin";
let password: string = "1234";

if (username == "metin" && password == "secret") {
    console.log("Login success.");
} else {
    console.log("Invalid username or password.");
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Invalid username or password.

ในตัวอย่าง เป็นโปรแกรมจำลองการเข้าสู่ระบบที่เก็บชื่อผู้ใช้และรหัสผ่านในตัวแปร username และ password ตามลำดับ เพื่อตรวจสอบว่าการเข้าสู่ระบบสำเร็จจะเปรียบเทียบค่าทั้งสองว่าตรงกับค่าที่กำหนดหรือไม่ และเราใช้ตัวดำเนินการ AND เพื่อกำหนดว่าทั้งชื่อผู้ใช้และรหัสผ่านต้องถูกต้อง

โปรแกรมให้ผลลัพธ์เป็นเป็น false เนื่องจากค่าที่ตัวดำเนินการ AND ได้รับคือ true && false และโปรแกรมทำงานในบล็อคของคำสั่ง else แสดงข้อความว่าชื่อผู้ใช้งานหรือรหัสผ่านไม่ถุูกต้อง คุณสามารถลองเปลี่ยนชื่อผู้ใช้และรหัสผ่านให้เป็นค่าที่ถูกต้องและลองรันโปรแกรมอีกครั้ง

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

let fish: number = 12;
let money: number = 3;

if (fish >= 10 || money >= 5) {
    console.log("You got a new fishhook.");
} else {
    console.log("You don't have enough fish nor money to trade.");
}

นึี่เป็นผลลัพธ์การทำงานของโปรแกรม

You got a new fishhook.

ในตัวอย่างนี้ เขาจะได้รับเบ็ดตกปลาอันใหม่เนื่องจากเขามีปลาเพียงพอสำหรับการแลก ในการตรวจสอบเงื่อนไขเราใช้ตัวดำเนินการ OR เพื่อเชื่อมเงื่อนไขว่าต้องมีอย่างน้อยหนึ่งค่าที่เป็นจริง นั่นคือนิพจน์ fish >= 10 ให้ผลลัพธ์เป็น true และ money >= 5 ให้ผลลัพธ์เป็น false

เนื่องจาก Boolean ทั้งสองมีอย่างน้อยหนึ่งค่าเป็นจริง true || false ดังนั้นผลลัพธ์การทำงานของตัวดำเนินการ OR จึงเป็น true นั่นหมายความว่าถึงแม้เขาจะไม่เงินไม่เพียงพอ แต่เขาก็มีปลาเพียงพอที่จะใช้แลกเอาเบ็ดตกปลาอันใหม่มาได้

สุดท้ายมาดูตัวอย่างการใช้งานตัวดำเนินการ NOT สำหรับกลับค่าของ Boolean ให้เป็นค่าที่ตรงกันข้าม นี่เป็นโปรแกรมที่จะบอกว่าคุณทำการบ้านเสร็จแล้วหรือยัง

let homeworkFinished: boolean = false;
if (homeworkFinished == false) {
    console.log("My homework did not finished yet.");
} else {
    console.log("I have finished my homework.");
}

ในตัวอย่างนี้ ตัวแปร homeworkFinished ใช้เก็บสถานะว่าทำการบ้านเสร็จหรือยัง โดย true หมายความว่าทำเสร็จแล้ว และ false หมายความว่ายังไม่เสร็จ ในโปรแกรมเราได้เปรียบเทียบค่าในตัวแปรกับ false เพื่อตรวจสอบว่าการบ้านยังไม่เสร็จใช่หรือไม่

ผลลัพธ์ของการเปรีบเทียบเป็นจริงเพราะว่า false == false ให้ผลลัพธ์เป็นจริง แต่แทนที่เปรียบเทียบค่าในรูปแบบนี้ เราสามารถใช้ตัวดำเนินการ NOT เพื่อกลับค่าในตัวแปรให้เป็นค่าที่ตรงกันข้ามเพื่อนำมาตรวจสอบเงื่อนไขได้ ดังนั้นมันสามารถเขียนใหม่ได้เป็น

let homeworkFinished: boolean = false;
if (!homeworkFinished) {
    console.log("My homework did not finished yet.");
} else {
    console.log("I have finished my homework.");
}

นั่นหมายความว่าถ้าหากค่าในตัวแปร homeworkFinished เป็น false มันจะถูกเปลี่ยนค่าเป็น true ซึ่งจะทำให้โปรแกรมทำงานในบล็อคของคำสั่ง if ซึ่งในการใช้งาน Boolean นั้นเรามักจะไม่เปรียบเทียบกับ false แต่ใช้ตัวดำเนินการ NOT แทนเมื่อต้องการตรวจสอบค่าที่ตรงกันข้าม

และนี่เป็นผลลัพธ์การทำงานของโปรแกรม

My homework did not finished yet.

โปรแกรมบอกว่าคุณยังทำการบ้านไม่เสร็จ ตอนนี้ลองเปลี่ยนค่าในตัวแปรเป็น true และดูผลลัพธ์อีกครั้ง

ตัวดำเนินการระดับบิต

ตัวดำเนินการระดับบิต (Bitwise operator) คือใช้เพื่อดำเนินการในระบิตของข้อมูลที่มีค่าเป็น 0 กับ 1 มันมักใช้ในการเขียนโปรแกรมระดับต่ำ (Low level) และเนื่องจาก TypeScript เป็นภาษาระดับสูงจึงไม่ค่อยนิยมนำมาใช้งานในการเขียนโปรแกรมทั่วไป แต่ถ้าหากคุณต้องการใช้มันก็สามารถทำได้ นี่เป็นตัวดำเนินการระดับบิตในภาษา TypeScript

ในตารางนี้แสดงตัวดำเนินการระดับบิตแต่ละประเภทซึ่งมีหน้าที่การทำงานที่แตกต่างกันออกไปซึ่งสามารถอธิบายได้ดังนี้

ตัวดำเนินการ BIT AND

ตัวดำเนินการ BIT AND จะทำการเปรียบเทียบค่า BIT ของ a และ b แบบบิตต่อบิต และให้ผลลัพธ์เป็นบิตใหม่ที่มีค่าเป็น 1 ถ้าหากบิตของทั้งสองเป็น 1 ไม่เช่นนั้นให้ผลลัพธ์เป็นบิต 0

ตัวดำเนินการ BIT OR

ตัวดำเนินการ BIT OR จะทำการเปรียบเทียบค่า BIT ของ a และ b แบบบิตต่อบิต และให้ผลลัพธ์เป็นบิตใหม่ที่มีค่าเป็น 1 ถ้าหากมีอย่างน้อยหนึ่งบิตที่เป็น 1 ไม่เช่นนั้นให้ผลลัพธ์เป็นบิต 0

ตัวดำเนินการ BIT XOR

ตัวดำเนินการ BIT XOR จะทำการเปรียบเทียบค่า BIT ของ a และ b แบบบิตต่อบิต และให้ผลลัพธ์เป็นบิตใหม่ที่มีค่าเป็น 1 ถ้าหากบิตของทั้งสองมีค่าต่างกัน ไม่เช่นนั้นให้ผลลัพธ์เป็นบิต 0

ตัวดำเนินการ BIT NOT

ตัวดำเนินการ BIT NOT ทำการกลับบิตของข้อมูลจาก 0 เป็น 1 และจาก 1 เป็น 0 ตัวดำเนินการนี้ทำงานกับหนึ่งตัวถูกดำเนินการ

ต่อไปมาดูตัวอย่างการใช้งานตัวดำเนินการระดับบิตสี่ตัวแรกในตารางกันก่อน กำหนดให้ค่าในตัวแปร a เป็น 5 และ b เป็น 12 ตามลำดับ นี่เป็นผลลัพธ์การทำงานของตัวดำเนินการระดับบิตประเภทต่างๆ ในภาษา TypeScript

let a: number = 5;
let b: number = 12;

console.log(`a = ${a.toString(2).padStart(4, '0')}`);
console.log(`b = ${b.toString(2).padStart(4, '0')}`);
console.log(`a & b = ${(a & b).toString(2).padStart(4, '0')}`);
console.log(`a | b = ${(a | b).toString(2).padStart(4, '0')}`);
console.log(`a ^ b = ${(a ^ b).toString(2).padStart(4, '0')}`);
console.log(`~a = ${(~a).toString(2).padStart(4, '0')}`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

a = 0101
b = 1100
a & b = 0100
a | b = 1101
a ^ b = 1001
~a = -110

ในตัวอย่าง สังเกตว่าบิตผลลัพธ์ให้ผลลัพธ์ตามที่ได้อธิบายไว้ ในการแสดงตัวเลขในรูปแบบของเลขฐานสองหรือบิตเพื่อให้ง่ายต่อการตรวจสอบ เราสามารถใช้เมธอด toString โดยระบุฐานเป็น 2 ในพารามิเตอร์ของเมธอดได้ จากนั้นใช้เมธอด padStart สำหรับแปลง String ให้มีความยาวเป็น 4 บิตเสมอโดยเติม 0 เข้าไปด้านหน้า

หมายเหตุ เนื่องจากในตัวอย่างนี้มีการใช้งานเมธอด padStart ดังนั้นคุณจะต้องคอมไพล์โปรแกรมโดยระบุตัวเลือก --target ของภาษา JavaScript เป็น es2017 หรือใหม่กว่า นี่เป็นคำสั่งที่จะใช้ในตอนคอมไพล์โปรแกรม tsc app.ts --target es2017

ต่อไปมาดูการทำงานของตัวดำเนินการระดับบิตที่เหลือกันต่อ

ตัวดำเนินการ BIT LEFT SHIFT

ตัวดำเนินการ BIT LEFT SHIFT ใช้สำหรับเลื่อนบิตไปทางด้านซ้ายตามจำนวนครั้งที่กำหนด n โดยการเลื่อนบิตไปทางด้านซ้ายแต่ละบิตจะทำให้ค่าของตัวเลขเพิ่มขึ้นเป็นสองเท่า และบิต 0 จะถูกเติมเข้ามาทางด้านขวาสุดแทนที่บิตที่ถูกเลื่อนออกไป

ตัวดำเนินการ BIT RIGHT SHIFT

ในทางกลับกัน ตัวดำเนินการ BIT RIGHT SHIFT ใช้สำหรับเลื่อนบิตไปทางด้านขวาตามจำนวนครั้งที่กำหนด n การเลื่อนบิตไปทางด้านขวาแต่ละบิตจะทำให้ค่าของตัวเลขลดลง ครึ่งหนึ่ง และบิตทางด้านขวา n บิตจะถูกนำออกไป

นี่เป็นตัวอย่างการใช้ตัวดำเนินการ BIT LEFT SHIFT และ BIT RIGHT SHIFT สำหรับเลื่อนบิตไปทางด้านซ้ายหรือด้านขวาในภาษา TypeScript กับจำนวนเต็มที่มีค่าเป็น 5 ที่มีค่าของบิตเป็น 00000101 ในรูปแบบของเลขฐานสอง

let a: number = 5;

function display(n) {
    return n.toString(2).padStart(8, '0');
}

console.log("EXP | BIN | DEC");
console.log(`a | ${display(a)} | ${a}`);
console.log(`a << 2 | ${display(a << 2)} | ${a << 2}`);
console.log(`a >> 2 | ${display(a >> 2)} | ${a >> 2}`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

EXP | BIN | DEC
a | 00000101 | 5
a << 2 | 00010100 | 20
a >> 2 | 00000001 | 1

ในตัวอย่างนี้ เราได้ใช้ตัวดำเนินการสำหรับเลื่อนบิตของ 5 ไปทางด้านซ้ายและด้านขวาอย่างละสองตำแหน่ง เมธอด display ใช้สำหรับแปลงตัวเลขในฐานสิบไปยังฐานสอง เนื่องจากบิตของข้อมูลแสดงในรูปแบบของเลขฐานสอง นี่จะทำให้คุณเห็นว่าบิตผลลัพธ์นั้นเปลี่ยนแปลงไปอย่างไร

ตัวดำเนินการเพิ่มและลดค่า

ตัวดำเนินการเพิ่มค่า (Incrementing operator) คือตัวดำเนินการที่ใช้สำหรับเพิ่มค่าในตัวแปรขึ้น 1 และตัวดำเนินการลดค่า (Decrementing operator) คือตัวดำเนินการที่ใช้สำหรับลดค่าในตัวแปรลง 1 ตัวดำเนินการเพิ่มและลดค่านี้ใช้เป็นคำสั่งลัดแทนที่จะใช้ตัวดำเนินการคณิตศาสตร์อย่าง + และ - นี่เป็นตัวอย่างการใช้งาน

let i: number = 1;
i++;
console.log("i =", i);

let j: number = 10;
j--;
console.log("j =", j);

ตัวดำเนินการเพิ่มหรือลดค่าใช้สำหรับการเปลี่ยนแปลงของตัวเลขที่ละหนึ่งเท่านั้น เราสามารถเขียนโปรแกรมเพื่อให้ผลลัพธ์เช่นเดียวกันได้โดยการใช้ตัวดำเนินการทางคณิตศาสตร์เหมือนกับตัวอย่างต่อไปนี้

let i: number = 1;
i = i + 1;
console.log("i =", i);

let j: number = 10;
j = j - 1;
console.log("j =", j);

ทั้งสองให้ผลลัพธ์การทำงานที่เหมือนกันเป็น

i = 2
j = 9

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

ตัวดำเนินการเพิ่มหรือลดค่ายังมักจะใช้ในส่วนของการอัพเดทค่าของคำสั่ง for หรืออัพเดทค่าภายในลูป ยกตัวอย่างเช่น

for (let i = 1; i <= 5; i++) {
    console.log("i =", i);
}

let counter = 3;
while (counter >= 0) {
    console.log("Countdown:", counter);
    counter--;
}

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

• Prefix (++variable) เพิ่มหรือลดค่าในตัวแปรก่อนและส่งค่าในตัวแปรกลับ
• Prefix (variable++) ส่งค่าในตัวแปรกลับก่อนแล้วค่อยเพิ่มหรือลดค่าในตัวแปร

ต่อไปมาดูกันว่าทั้งสองรูปแบบมีการทำงานอย่างไร นี่เป็นการเปรียบเทียบเมื่อใช้งานสำหรับเพิ่มค่าภายในคำสั่ง while loop

let i = 1, j = 1;
while (i <= 10) {
    console.log(`i = ${++i}, j = ${j++}`);
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

i = 2, j = 1
i = 3, j = 2
i = 4, j = 3
i = 5, j = 4
i = 6, j = 5
i = 7, j = 6
i = 8, j = 7
i = 9, j = 8
i = 10, j = 9
i = 11, j = 10

ตัวแปร ++i เป็นการใช้งานตัวดำเนินการแบบ Prefix และตัวแปร j++ เป็นการใช้งานแบบ Postfix จะเห็นว่าค่าในตัวแปร i เพิ่มขึ้นก่อนที่มันจะถูกจะแสดงผล ในขณะที่ค่าในตัวแปร j ยังเป็นค่าเดิมอยู่เนื่องจากมันถูกเพิ่มขึ้นในภายหลังนั่นเอง

Ternary operator

Ternary operator คือตัวดำเนินการที่ใช้สำหรับเลือกค่าสองค่าจากเงื่อนไขที่กำหนดหรือมันสามารถใช้งานเป็นคำสั่ง if else แบบสั้นได้ นี่เป็นรูปแบบการใช้งานตัวดำเนินการ Ternary operator ในภาษา TypeScript

condition ? value1 : value2;

ตัวดำเนินการนี้ทำงานกับสามตัวถูกดำเนินการโดย condition เป็นเงื่อนไขสำหรับตรวจสอบ ถ้าหากเงื่อนไขเป็นจริงค่าที่ถุูกเลือกจะเป็น value1 และถ้าไม่ใช่จะเป็น value2 โดยค่าที่ถูกเลือกสามารถเป็น Literal ตัวแปร และนิพจน์ใดๆ ได้ นี่เป็นตัวอย่างการใช้งาน

let n: number = 5;
let result: string = n % 2 == 0 ? "even" : "odd";
console.log(`n is an ${result} number.`);

ในตัวอย่างนี้ เป็นโปรแกรมตรวจสอบว่าตัวเลขเป็นจำนวนคู่หรือจำนวนคี่ เนืื่องจากเงื่อนไข n % 2 ให้ผลลัพธ์เป็น false ดังนั้นค่าที่ถูกเลือกจากตัวดำเนินการจะเป็น "odd" และจะถูกเก็บไว้ในตัวแปร result

หรือกล่าวอีกนัยหนึ่ง Ternary operator เป็นรูปแบบการใช้งานของคำสั่ง if else ในเวอร์ชันที่สั้นกว่านั่นเอง นั่นทำให้โปรแกรมด้านบนมีค่าเท่ากับในตัวอย่างนี้

let n: number = 5;
let result: string;
if (n % 2 == 0) {
    result = "even";
} else {
    result = "odd";
}
console.log(`n is an ${result} number.`);

ซึ่งให้ผลลัพธ์เช่นเดียวกันเป็น

n is an odd number.

จะเห็นว่า Ternary operator มักใช้กับการตรวจสอบเงื่อนไขแบบสั้นๆ นี่จะช่วยให้โค้ดไม่ยาวและอ่านได้ง่าย

ลำดับความสำคัญของตัวดำเนินการ

ลำดับความสำคัญของตัวดำเนินการ (Precedence of operators) คือลำดับที่ตัวดำเนินการถูกประมวลผลซึ่งถูกกำหนดโดยไวยากรณ์ของภาษา ตัวดำเนินการทั้งหมดในภาษา TypeScript จะมีลำดับความสำคัญของมัน และถ้าหากตัวดำเนินการมีลำดับความสำคัญเท่ากันการคำนวณจะทำจากซ้ายไปขวา

เนื่องจากตัวดำเนินการในภาษา TypeScript มีเป็นจำนวนมาก ดังนั้นเราจะแนะนำลำดับความสำคัญของตัวดำเนินการพื้นฐานที่ได้เรียนในบทนี้เท่านั้น นี่เป็นลำดับความสำคัญของตัวเนินการที่เรียงจากมากไปน้อย

1. วงเล๋็บ () จะทำงานก่อนเสมอ
2. ตามด้วยตัวดำเนินการ !
3. ตามด้วยตัวดำเนินการ **
4. ตามด้วยตัวดำเนินการ *, / และ %
5. ตามด้วยตัวดำเนินการ +, -
6. ตามด้วยตัวดำเนินการ <, <=, >, >=
7. ตามด้วยตัวดำเนินการ ==, !=
8. ตามด้วยตัวดำเนินการ &&
9. ตามด้วยตัวดำเนินการ ||

เราได้ละเว้นตัวดำเนินการบางตัวออกไปเพื่อทำให้มันเรียบง่าย สำหรับลำดับความสำคัญของตัวดำเนินการทั้งหมดในภาษา TypeScript คุณสามารถอ่านเพิ่มเติมได้ที่ Operator precedence

ต่อไปมาดูตัวอย่างการทำงานของลำดับความสำคัญของตัวดำเนินการในภาษา TypeScript ให้คุณลองพิจารณาคำสั่งต่อไปนี้ว่ามันได้ผลลัพธ์เป็นอะไร

let c = 1 + 4 * 3;
// c = 13

คุณสามารถเดาผลลัพธ์ในตัวแปร c ได้หรือไม่ว่ามันคืออะไร มันคือ 8 หรือ 13 กันแน่

คำตอบก็คือ 13 นั่นเป็นเพราะว่าลำดับความสำคัญของตัวดำเนินการ * นั้นมากกว่าตัวดำเนินการ + เหมือนกับที่ได้อธิบายไปในตอนต้น ตัวดำเนินการที่มีลำดับความสำคัญมากกว่าจะทำงานก่อน ดังนั้นโปรแกรมประมวลผล 4 * 3 ก่อนและนำผลลัพธ์ที่ได้ไปบวกกับ 1 ในรูปแบบนี้

let c = 1 + (4 * 3);
// c = 13

วงเล็บ (expression) ใช้สำหรับกำหนดความสำคัญให้นิพจน์ทำงานก่อน ในกรณีที่คุณต้องการควบคุมการทำงานของตัวดำเนินการ คุณสามารถใช้วงเล็บครอบในส่วนที่ต้องการให้ทำงานก่อนได้ ยกตัวอย่างเช่นหากเราต้องการให้บวกตัวเลขก่อน

let c = (1 + 4) * 3;
// c = 8

ในกรณีนี้ ค่าในวงเล็บจะถูกประมวลผลก่อนที่จะนำไปคูณกับ 3 ซึ่งจะได้ผลลัพธ์เป็น 8

ส่วนในกรณีที่ตัวดำเนินการมีลำดับความสำคัญเท่ากัน มันจะทำงานจากซ้ายไปขวาเสมอ

let x = 5 - 3 + 4;
let y = 6 * 2 / 3;
// x = 6
// y = 4

นี่ก็เป็นวิธีที่ตัวดำเนินการถูกประมวลผลตามความลำดับความสำคัญของมัน อย่างไรก็ตาม ถ้าหากคุณไม่แน่ใจเกี่ยวกับการทำงานของตัวดำเนินการหรือผลลัพธ์ที่จะได้รับ เราแนะนำให้ใส่วงเล็บด้วยเสมอเพื่อให้โปรแกรมมีความชัดเจนและอ่านง่าย

นี่เป็นตัวอย่างการหาความยาวด้านตรงข้ามมุมฉากจากทฤฏีพีทากอรัส

let a = 3;
let b = 4;
let c = Math.sqrt(a * a + b * b);
console.log(c);

แม้ว่านี่จะทำงานได้ถูกตรงตามที่เราคาดหวัง แต่มันจะดีกว่าถ้าหากเราใส่วงเล็บให้เรียบร้อย ดังนั้นเราสามารถเขียนใหม่ได้เป็น

let a = 3;
let b = 4;
let c = Math.sqrt((a * a) + (b * b));
console.log(c);

นี่จะทำให้เราสามารถเห็นว่าทันทีว่าคำสั่งมีลำดับการทำงานอย่างไร และมันช่วยให้การอ่านโค้ดเข้าใจได้ง่ายขึ้น

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับตัวดำเนินการในภาษา TypeScript เราได้แนะนำการใช้งานตัวดำเนินการประเภทต่างๆ ซึ่งมีหน้าการทำงานที่แตกต่างกัน และในตอนท้ายได้แนะนำให้คุณเข้าใจกับลำดับความสำคัญของตัวดำเนินการในภาษา TypeScript