ตัวดำเนินการจาวาสคริปต์

สารบัญ

ตัวดำเนินการบวก + เพิ่มตัวเลข:

ตัวดำเนินการกำหนด = กำหนดค่าให้กับตัวแปร

การกำหนด JavaScript

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

ตัวอย่างการมอบหมายงาน

let x = 10;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The = Operator</h2>

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

<script>
let x = 10;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

// Assign the value 5 to x
let x = 5;
// Assign the value 2 to y
let y = 2;
// Assign the value x + y to z:
let z = x + y;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The Assignment (=) Operator</h2>

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

<script>
// Assign the value 5 to x
let x = 5;
// Assign the value 2 to y
let y = 2;
// Assign the value x + y to z
let z = x + y;
// Display z
document.getElementById("demo").innerHTML = "The sum of x + y is: " + z;
</script>

</body>
</html>

การเพิ่มจาวาสคริปต์

ตัวดำเนินการบวก (+) เพิ่มตัวเลข:

การเพิ่ม

let x = 5;
let y = 2;
let z = x + y;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>The + Operator</h2>

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

<script>
let x = 5;
let y = 2;
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

การคูณจาวาสคริปต์

ตัวดำเนินการคูณ (*) คูณตัวเลข:

การคูณ

let x = 5;
let y = 2;
let z = x * y;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>The * Operator</h2>

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

<script>
let x = 5;
let y = 2;
let z = x * y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

ประเภทของตัวดำเนินการ JavaScript

มีตัวดำเนินการ JavaScript หลายประเภท:

ตัวดำเนินการทางคณิตศาสตร์
ผู้ดำเนินการที่ได้รับมอบหมาย
ตัวดำเนินการเปรียบเทียบ
ตัวดำเนินการสตริง
ตัวดำเนินการเชิงตรรกะ
ตัวดำเนินการ Bitwise
ตัวดำเนินการแบบไตรภาค
ตัวดำเนินการประเภท

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

ตัวดำเนินการทางคณิตศาสตร์ใช้ในการดำเนินการทางคณิตศาสตร์กับตัวเลข:

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

let a = 3;
let x = (100 + 50) * a;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>Arithmetic Operations</h2>
<p>A typical arithmetic operation takes two numbers (or expressions) and produces a new number.</p>

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

<script>
let a = 3;
let x = (100 + 50) * a;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

+: ส่วนที่เพิ่มเข้าไป
-: การลบ
*: การคูณ
**: การยกกำลัง (ES2016)
/: แผนก
%: โมดูลัส (ส่วนคงเหลือ)
++: เพิ่มขึ้น
--: ลดลง

บันทึก

ตัวดำเนินการทางคณิตศาสตร์มีคำอธิบายโดยละเอียดอยู่ใน บท JS เลขคณิต

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

ตัวดำเนินการมอบหมายจะกำหนดค่าให้กับตัวแปร JavaScript

ตัวดำเนินการกำหนดการเพิ่ม (+=) เพิ่มค่าให้กับตัวแปร

งานที่มอบหมาย

let x = 10;
x += 5;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>The += Operator</h2>

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

<script>
var x = 10;
x += 5;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Operator	Example	Same As
=	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

บันทึก

ตัวดำเนินการมอบหมายมีคำอธิบายโดยละเอียดอยู่ใน บทมอบหมาย JS

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

==: เท่ากับ
===: ค่าเท่ากันและชนิดเท่ากัน
!=: ไม่เท่ากับ
!==: มีค่าไม่เท่ากันหรือชนิดไม่เท่ากัน
>: มากกว่า
<: น้อยกว่า
>=: มากกว่าหรือเท่ากับ
<=: น้อยกว่าหรือเท่ากับ
?: ตัวดำเนินการที่ประกอบไปด้วย

บันทึก

ตัวดำเนินการเปรียบเทียบมีคำอธิบายโดยละเอียดอยู่ใน บทเปรียบเทียบ JS

การเปรียบเทียบสตริง JavaScript

ตัวดำเนินการเปรียบเทียบทั้งหมดข้างต้นสามารถใช้กับสตริงได้:

ตัวอย่าง

let text1 = "A";
let text2 = "B";
let result = text1 < text2;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Operators</h1>

<p>All conditional operators can be used on both numbers and strings.</p>

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

<script>
let text1 = "A";
let text2 = "B";
let result = text1 < text2;
document.getElementById("demo").innerHTML = "Is A less than B? " + result;
</script>

</body>
</html>

โปรดทราบว่าสตริงจะถูกเปรียบเทียบตามตัวอักษร:

ตัวอย่าง

let text1 = "20";
let text2 = "5";
let result = text1 < text2;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Operators</h1>
<p>Note that strings are compared alphabetically:</p>

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

<script>
let text1 = "20";
let text2 = "5";
let result = text1 < text2;
document.getElementById("demo").innerHTML = "Is 20 less than 5? " + result;
</script>

</body>
</html>

การเพิ่มสตริง JavaScript

+ ยังสามารถใช้เพื่อเพิ่ม (ต่อกัน) สตริง:

ตัวอย่าง

let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Operators</h1>
<h2>The + Operator</h2>
<p>The + operator concatenates (adds) strings.</p>

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

<script>
let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;
document.getElementById("demo").innerHTML = text3;
</script>

</body>
</html>

ตัวดำเนินการกำหนด += ยังสามารถใช้เพื่อเพิ่ม (ต่อกัน) สตริง:

ตัวอย่าง

let text1 = "What a very ";
text1 += "nice day";

ผลลัพธ์ของ text1 จะเป็น:

What a very nice day

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Operators</h1>
<h2>The += Operator</h2>
<p>The assignment operator += can concatenate strings.</p>

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

<script>
let text1 = "What a very ";
text1 += "nice day";
document.getElementById("demo").innerHTML = text1;
</script>

</body>
</html>

บันทึก

เมื่อใช้กับสตริง ตัวดำเนินการ + จะเรียกว่าตัวดำเนินการต่อข้อมูล

การเพิ่มสตริงและตัวเลข

การเพิ่มตัวเลขสองตัวจะส่งคืนผลรวม แต่การเพิ่มตัวเลขและสตริงจะส่งคืนสตริง:

ตัวอย่าง

let x = 5 + 5;
let y = "5" + 5;
let z = "Hello" + 5;

ผลลัพธ์ของ x, y และ z จะเป็น:


10

55

Hello5

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Operators</h1>
<h2>The + Operator</h2>
<p>Adding a number and a string, returns a string.</p>

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

<script>
let x = 5 + 5;
let y = "5" + 5;
let z = "Hello" + 5;
document.getElementById("demo").innerHTML =
x + "<br>" + y + "<br>" + z;
</script>

</body>
</html>

บันทึก

หากคุณเพิ่มตัวเลขและสตริง ผลลัพธ์จะเป็นสตริง!

ตัวดำเนินการเชิงตรรกะ JavaScript

&&: ตรรกะและ
||: ตรรกะหรือ
!: ไม่สมเหตุสมผล

บันทึก

ตัวดำเนินการเชิงตรรกะมีคำอธิบายโดยละเอียดอยู่ใน บทเปรียบเทียบ JS

ตัวดำเนินการประเภท JavaScript

typeof: ส่งกลับประเภทของตัวแปร
instanceof: คืนค่าเป็นจริงหากวัตถุเป็นตัวอย่างของประเภทวัตถุ

บันทึก

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

ตัวดำเนินการ Bitwise ของ JavaScript

ตัวดำเนินการบิตทำงานกับตัวเลข 32 บิต

ตัวถูกดำเนินการที่เป็นตัวเลขใดๆ ในการดำเนินการจะถูกแปลงเป็นตัวเลข 32 บิต ผลลัพธ์จะถูกแปลงกลับเป็นหมายเลข JavaScript

Operator	Description	Example	Same as	Result	Decimal
&	AND	5 & 1	0101 & 0001	0001	1
\|	OR	5 \| 1	0101 \| 0001	0101	5
~	NOT	~ 5	~0101	1010	10
^	XOR	5 ^ 1	0101 ^ 0001	0100	4
<<	left shift	5 << 1	0101 << 1	1010	10
>>	right shift	5 >> 1	0101 >> 1	0010	2
>>>	unsigned right shift	5 >>> 1	0101 >>> 1	0010	2

ตัวอย่างข้างต้นใช้ตัวอย่างที่ไม่ได้ลงนามขนาด 4 บิต แต่ JavaScript ใช้ตัวเลขที่ลงนามแบบ 32 บิต
ด้วยเหตุนี้ใน JavaScript ~ 5 จะไม่ส่งคืน 10 มันจะส่งคืน -6.
~00000000000000000000000000000101 จะกลับมา 111111111111111111111111111111010

ตัวดำเนินการ Bitwise ได้รับการอธิบายอย่างครบถ้วนใน JS บทระดับบิต