Articles
แนะนำ JavaScript
ฟังก์ชันในตัวของ JavaScript

ฟังก์ชันในตัวของ JavaScript

บทความนี้อธิบายเกี่ยวกับฟังก์ชันในตัวของ JavaScript

YouTube Video

ฟังก์ชันในตัวของ JavaScript

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

ฟังก์ชันในตัวคืออะไร?

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

ฟังก์ชันในตัวที่สำคัญ

parseInt() 

1// Convert string to integer
2console.log(parseInt("42"));      // Output: 42
3console.log(parseInt("42px"));    // Output: 42
4console.log(parseInt("0xF", 16)); // Output: 15
5console.log(parseInt("0xF"));     // Output: 15
6console.log(parseInt("px42"));    // Output: NaN

  • parseInt() เป็นฟังก์ชันที่แปลงข้อความ (string) และเปลี่ยนให้อยู่ในรูปแบบตัวเลขจำนวนเต็ม (integer) หากจุดเริ่มต้นของข้อความมีตัวเลข ส่วนดังกล่าวจะถูกส่งคืนเป็นตัวเลขจำนวนเต็ม สามารถกำหนดรูปแบบฐาน (radix) ได้ตามต้องการ

  • หากจุดเริ่มต้นของข้อความไม่มีตัวเลข จะคืนค่าเป็น NaN (ไม่ใช่ตัวเลข) หากไม่ได้กำหนดรูปแบบฐานจะถือว่าเป็นฐานสิบ แต่หากข้อความเริ่มต้นด้วย "0x" จะถูกตีความเป็นฐานสิบหก

parseFloat() 

1// Convert string to float
2console.log(parseFloat("3.14"));      // Output: 3.14
3console.log(parseFloat("3.14abc"));   // Output: 3.14
4console.log(parseFloat("42"));        // Output: 42

  • parseFloat() เป็นฟังก์ชันที่แปลงข้อความและเปลี่ยนให้อยู่ในรูปแบบเลขทศนิยม ใช้เมื่อจัดการกับตัวเลขที่มีจุดทศนิยม

  • เช่นเดียวกับ parseInt() หากจุดเริ่มต้นของข้อความไม่ใช่ตัวเลข จะคืนค่าเป็น NaN จุดเด่นคือสามารถแยกวิเคราะห์ทั้งส่วนจำนวนเต็มและส่วนทศนิยมได้อย่างถูกต้อง

isNaN() 

1console.log(isNaN(NaN));         // Output: true
2console.log(isNaN(42));          // Output: false
3console.log(isNaN("hello"));     // Output: true

  • isNaN() ใช้สำหรับตรวจสอบว่าค่าที่กำหนดเป็น NaN หรือไม่ NaN (ไม่ใช่ตัวเลข) หมายถึงค่าที่ไม่ถูกต้องในรูปตัวเลข

  • isNaN() ยังสามารถใช้กับข้อมูลประเภทอื่นที่ไม่ใช่ตัวเลขได้ ตัวอย่างเช่น จะคืนค่า true หากข้อความไม่สามารถแปลงเป็นตัวเลขได้

Number() 

1console.log(Number("42"));        // Output: 42
2console.log(Number("3.14"));      // Output: 3.14
3console.log(Number("0xff"));      // Output: 255
4console.log(Number("abc"));       // Output: NaN

  • Number() เป็นฟังก์ชันที่แปลงข้อความหรือข้อมูลประเภทอื่นให้อยู่ในรูปแบบตัวเลข ส่งกลับ NaN หากให้สตริงที่ไม่ใช่ตัวเลข

  • ต่างจาก parseInt() หรือ parseFloat(), Number() จะพิจารณาว่าเป็นการแปลงที่ไม่ถูกต้องและส่งกลับ NaN หากสตริงมีตัวอักษรที่ไม่ใช่ตัวเลข

String() 

1console.log(String(42));           // Output: "42"
2console.log(String(3.14));         // Output: "3.14"
3console.log(String(true));         // Output: "true"
4console.log(String(null));         // Output: "null"
5console.log(String(undefined));    // Output: "undefined"
  • String() เป็นฟังก์ชันที่แปลงตัวเลขและประเภทข้อมูลอื่นๆ ให้เป็นสตริง String(42) จะคืนค่าสตริง "42"
  • หากค่าที่ต้องการแปลงคือ null หรือ undefined จะคืนค่าสตริงเป็น "null" หรือ "undefined" ตามลำดับ
  • มันมีประโยชน์สำหรับการจัดการประเภทข้อมูลต่างๆ เช่น ตัวเลข บูลีน หรืออ็อบเจ็กต์ โดยการแปลงพวกมันให้เป็นสตริง

Array 

1const arr = Array(3);
2console.log(arr); // Output: [ <3 empty items> ]
3
4const arr2 = Array(1, 2, 3);
5console.log(arr2); // Output: [1, 2, 3]
  • Array เป็นตัวสร้างที่ใช้สำหรับสร้างอาเรย์ใหม่
  • ถ้ามีอาร์กิวเมนต์หนึ่งค่า จะถูกมองว่าเป็นความยาวของอาเรย์ และจะสร้างอาเรย์เปล่า
  • ถ้ามีอาร์กิวเมนต์หลายค่า จะสร้างอาเรย์โดยมีค่าพวกนั้นเป็นองค์ประกอบ

Array.isArray() 

1console.log(Array.isArray([1, 2, 3])); // Output: true
2console.log(Array.isArray("not an array")); // Output: false
  • Array.isArray() เป็นเมธอดที่ใช้ตรวจสอบว่าอาร์กิวเมนต์เป็นอาเรย์หรือไม่
  • มันจะคืนค่า true หากอาร์กิวเมนต์เป็นอาเรย์ และคืนค่า false หากไม่ใช่

isFinite() 

1console.log(isFinite(42));         // Output: true
2console.log(isFinite(Infinity));   // Output: false
3console.log(isFinite(NaN));        // Output: false

  • isFinite() ใช้ตรวจสอบว่าค่าที่กำหนดนั้นจำกัดหรือไม่ ส่งกลับ true สำหรับตัวเลขที่จำกัด และ false ในกรณีอื่นๆ (เช่น infinity หรือ NaN)

  • ใน JavaScript, Infinity และ -Infinity แทนค่าความไม่มีที่สิ้นสุดและเป็นประเภทตัวเลข แต่ isFinite() จะพิจารณาว่าค่าความไม่มีที่สิ้นสุดนี้ไม่ถูกต้อง

eval() 

1let expression = "2 + 2";
2console.log(eval(expression));    // Output: 4
3
4console.log(eval("var x = 10; x * 2"));  // Output: 20

  • eval() เป็นฟังก์ชันที่ประเมินและรันโค้ด JavaScript ที่ให้มาในรูปแบบสตริง คุณสามารถรันโค้ด JavaScript แบบไดนามิกได้

  • eval() ทรงพลังมาก แต่มีความเสี่ยงด้านความปลอดภัย ดังนั้นจึงควรหลีกเลี่ยงในการพัฒนาโปรแกรมจริง การรันโค้ดจากภายนอกด้วย eval() อาจนำไปสู่พฤติกรรมที่ไม่คาดคิดและช่องโหว่ด้านความปลอดภัย

encodeURI() / decodeURI() 

1let url = "https://example.com/?name=John Doe&age=25";
2let encodedUrl = encodeURI(url);
3console.log(encodedUrl);
4// Output: https://example.com/?name=John%20Doe&age=25
5
6let decodedUrl = decodeURI(encodedUrl);
7console.log(decodedUrl);
8// Output: https://example.com/?name=John Doe&age=25

  • encodeURI() เป็นฟังก์ชันที่ใช้เข้ารหัส (แปลง) อักขระที่ไม่สามารถใช้ใน URL ได้ ในทางกลับกัน decodeURI() จะถอดรหัส URL ที่เข้ารหัสให้กลับเป็นรูปแบบเดิม

  • การเข้ารหัสมีความสำคัญโดยเฉพาะเมื่อจัดการกับอักขระพิเศษ ตัวอย่างเช่น อักขระอย่างช่องว่างหรือ & จำเป็นต้องถูกเข้ารหัสเพื่อให้รวมใน URL ได้อย่างถูกต้อง ดังนั้นจำเป็นต้องดำเนินการอย่างเหมาะสมโดยใช้ encodeURI()

setTimeout() / setInterval() 

 1// Execute a function after 2 seconds
 2setTimeout(() => {
 3    console.log("This runs after 2 seconds");
 4}, 2000);
 5
 6// Execute a function every 1 second
 7let intervalId = setInterval(() => {
 8    console.log("This runs every 1 second");
 9}, 1000);
10
11// Stop the interval after 5 seconds
12setTimeout(() => {
13    clearInterval(intervalId);
14}, 5000);

  • setTimeout() เป็นฟังก์ชันจับเวลาที่ใช้เรียกฟังก์ชันหนึ่งครั้งหลังจากเวลาที่กำหนด setInterval() จะเรียกฟังก์ชันซ้ำๆ ในช่วงเวลาที่กำหนด

  • setTimeout() และ setInterval() ทำงานแบบอะซิงโครนัส โดยเรียกฟังก์ชันหลังจากเวลาที่กำหนดผ่านไป ยังสามารถยกเลิกการทำงานได้โดยใช้ clearTimeout() หรือ clearInterval()

สรุป

การใช้ฟังก์ชันในตัวของ JavaScript จะช่วยให้เขียนโปรแกรมที่ง่ายและมีประสิทธิภาพมากขึ้น ฟังก์ชันที่แนะนำในที่นี้เป็นพื้นฐานและมีประโยชน์ในสถานการณ์ต่างๆ อย่าลืมเขียนโค้ดจริงและตรวจสอบพฤติกรรมเพื่อเพิ่มความเข้าใจ

เรียนรู้การประมวลผลที่ซับซ้อนขึ้นและการใช้งานฟังก์ชันขั้นสูงเพื่อพัฒนาทักษะ JavaScript ของคุณต่อไป

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

ตัวดำเนินการ Nullish Coalescing ในภาษา JavaScript