@@ -1,48 +1,48 @@ ## แปลงประเภทของข้อมูล # การแปลงชนิดข้อมูล ส่วนใหญ่เวลาเราใช้ตัวดำเนินการ (operator) หรือฟังก์ชัน มันจะแปลงค่าให้เราอัตโนมัติ โดยทั่วไปแล้ว ตัวดำเนินการและฟังก์ชันจะแปลงค่าที่ส่งเข้ามาให้เป็นชนิดข้อมูลที่ถูกต้องโดยอัตโนมัติ ยกตัวอย่างเช่น `alert`จะแปลงค่าอะไรก็ตามให้เป็นสตริงเพื่อแสดงผล การคำนวณทางคณิตศาสตร์ก็จะแปลงค่าให้เป็นตัวเลข ยกตัวอย่างเช่น `alert`จะแปลงค่าเป็น string โดยอัตโนมัติเพื่อนำไปแสดงผล ในขณะที่การดำเนินการทางคณิตศาสตร์จะแปลงค่าเป็นตัวเลข แต่บางทีเราก็ต้องแปลงค่าด้วยตัวเองนะจ๊ะ อย่างไรก็ตาม มีบางกรณีที่เราจำเป็นต้องแปลงค่าเป็นชนิดข้อมูลที่ต้องการ ```smart header="ยังไม่พูดถึงออปเจ็กต์นะ " ในบทนี้เราจะไม่พูดถึงออปเจ็กต์ก่อน เราจะพูดถึง primitiveกันก่อน ```smart header="ยังไม่กล่าวถึง object " ในบทนี้เรายังไม่ครอบคลุมถึง object เราจะพูดถึงแค่ค่า primitiveเท่านั้น เดี๋ยวเรียนเรื่องออปเจ็กต์เสร็จแล้ว ในบท <info:object-toprimitive>เราจะมาดูว่าออปเจ็กต์เข้ามาเกี่ยวข้องยังไง หลังจากที่เราได้เรียนรู้เรื่อง object แล้ว ในบท <info:object-toprimitive>เราจะได้เห็นว่า object เข้ามาเกี่ยวข้องอย่างไร ``` ##แปลงเป็นสตริง ##การแปลงเป็น String การแปลงเป็นสตริงเกิดขึ้นเมื่อเราต้องการค่าในรูปแบบของสตริง การแปลงเป็น string จะเกิดขึ้นเมื่อเราต้องการแสดงค่าในรูปแบบ string เช่น `alert(value)`จะแปลงค่าเพื่อแสดงผล ยกตัวอย่างเช่น `alert(value)`จะแปลงค่าเป็น string เพื่อนำไปแสดงผล นอกจากนี้ เราสามารถใช้ฟังก์ชัน `String(value)`เพื่อแปลงค่าเป็นสตริงได้ด้วย :เรายังสามารถเรียกใช้ฟังก์ชัน `String(value)`เพื่อแปลงค่าเป็น string ได้ :```js run let value = true; alert(typeof value); // boolean *!* value = String(value); // ตอนนี้ valueเป็นสตริง "true" แล้ว value = String(value); // ตอนนี้ valueเป็น string "true" alert(typeof value); // string */!* ``` การแปลงเป็นสตริงส่วนใหญ่ก็เห็นได้ชัดเจน `false`จะกลายเป็น `"false"`, `null`จะกลายเป็น `"null"`, เป็นต้นการแปลงเป็น string โดยทั่วไปมักจะตรงไปตรงมาอยู่แล้ว เช่น `false`กลายเป็น `"false"`, `null`กลายเป็น `"null"` เป็นต้น##แปลงเป็นตัวเลข ##การแปลงเป็นตัวเลข การแปลงเป็นตัวเลขในฟังก์ชันและนิพจน์ทางคณิตศาสตร์เกิดขึ้นโดยอัตโนมัติ การแปลงเป็นตัวเลขที่เกิดขึ้นในฟังก์ชันและนิพจน์ทางคณิตศาสตร์จะดำเนินการโดยอัตโนมัติ เช่น เมื่อใช้เครื่องหมายหาร `/`กับค่าที่ไม่ใช่ตัวเลข :ยกตัวอย่างเช่น เมื่อมีการหาร `/`กับสิ่งที่ไม่ใช่ตัวเลข :```js run alert( "6" / "2" ); // 3,สตริงถูกแปลงเป็นตัวเลข alert( "6" / "2" ); // 3,string ถูกแปลงเป็นตัวเลข ``` เราสามารถใช้ฟังก์ชัน `Number(value)` เพื่อแปลง `value`เป็นตัวเลขอย่างชัดเจน : เราสามารถใช้ฟังก์ชัน `Number(value)` เพื่อแปลง `value`เป็นตัวเลขได้ : ```js run let str = "123"; Expand All @@ -53,98 +53,98 @@ let num = Number(str); // กลายเป็นตัวเลข 123 alert(typeof num); // number ``` การแปลงแบบชัดเจนมักจำเป็นเมื่อเราอ่านค่าจากแหล่งที่มาที่เป็นสตริง เช่น ฟอร์มข้อความแต่คาดว่าจะใส่ตัวเลข โดยทั่วไปแล้วการแปลงเป็นตัวเลขอย่างชัดเจนจะจำเป็นเมื่อเราอ่านค่าจากแหล่งที่เก็บเป็น string เช่น ฟอร์มข้อความแต่คาดหวังว่าค่าที่กรอกเข้ามาจะเป็นตัวเลข หากสตริงไม่ใช่ตัวเลขที่ถูกต้อง ผลลัพธ์ของการแปลงดังกล่าวจะเป็น `NaN` ตัวอย่างเช่น:ถ้า string ไม่ใช่ตัวเลขที่ถูกต้อง ผลลัพธ์จากการแปลงจะได้เป็น `NaN` ตัวอย่างเช่น:```js run let age = Number("ข้อความสุ่มแทนที่จะเป็นตัวเลข "); let age = Number("an arbitrary string instead of a number "); alert(age); // NaN, การแปลงล้มเหลว ``` กฎการแปลงเป็นตัวเลข: | ค่า |กลายเป็น ... | | ค่า | จะกลายเป็น ... | |-------|-------------| |`undefined`|`NaN`| |`null`|`0`| |<code>true and false</code> | `1` และ `0` | | `string` |เว้นวรรค (รวมถึงช่องว่าง แท็บ `\t` ตัวแบ่งบรรทัด `\n` เป็นต้น)จากจุดเริ่มต้นและจุดสิ้นสุดจะถูกลบออก หากสตริงที่เหลือว่าง ผลลัพธ์คือ `0`มิฉะนั้น ตัวเลขจะถูก "อ่าน"จากสตริง ข้อผิดพลาดจะให้ผลลัพธ์เป็น `NaN` | |<code>true และ false</code> | `1` และ `0` | | `string` |ช่องว่าง (รวมถึงเว้นวรรค, tab `\t`, ขึ้นบรรทัดใหม่ `\n` เป็นต้น)ที่จุดเริ่มต้นและสิ้นสุดจะถูกละเว้น ถ้า string ที่เหลือว่างเปล่า ผลลัพธ์จะเป็น `0`มิฉะนั้นตัวเลขจะถูก "อ่าน"จาก string เมื่อเกิด error จะได้เป็น `NaN` | ตัวอย่าง: ```js run alert( Number(" 123 ") ); // 123 alert( Number("123z") ); // NaN (ข้อผิดพลาดในการอ่านตัวเลขที่ "z") alert( Number("123z") ); // NaN (เกิด error ตอนอ่านตัวเลขที่ "z") alert( Number(true) ); // 1 alert( Number(false) ); // 0 ``` โปรดทราบว่า `null` และ `undefined`มีพฤติกรรมที่แตกต่างกัน : `null` จะกลายเป็นศูนย์ ในขณะที่ `undefined` จะกลายเป็น `NaN`โปรดสังเกตว่า `null` และ `undefined`มีพฤติกรรมที่แตกต่างกันในที่นี้ : `null` จะกลายเป็นศูนย์ ในขณะที่ `undefined` จะกลายเป็น `NaN`ตัวดำเนินการทางคณิตศาสตร์ส่วนใหญ่ยังทำการแปลงดังกล่าวด้วย เราจะเห็นสิ่งนั้นในบทต่อไป ตัวดำเนินการทางคณิตศาสตร์ส่วนใหญ่ก็จะทำการแปลงค่าในลักษณะนี้เช่นกัน ซึ่งเราจะได้เห็นในบทถัดไป ##แปลงเป็นบูลีน ##การแปลงเป็น Boolean การแปลงเป็นtrue/false เป็นเรื่องง่ายที่สุด การแปลงเป็นboolean เป็นการแปลงที่ง่ายที่สุด มันเกิดขึ้นในตัวดำเนินการตรรกะ (เดี๋ยวเราจะเจอการทดสอบเงื่อนไขและสิ่งอื่นๆ ที่คล้ายกัน) แต่ยังสามารถทำได้อย่างชัดเจนด้วยการเรียก `Boolean(value)`มันจะเกิดขึ้นในการดำเนินการเชิงตรรกะ (ต่อไปเราจะได้เจอกับการทดสอบเงื่อนไขและสิ่งที่คล้ายคลึงกัน) แต่ก็สามารถทำได้อย่างชัดเจนด้วยการเรียกใช้ `Boolean(value)`กฎการแปลงเป็นบูลีน :กฎการแปลง :- ค่าที่ "ว่างเปล่า" เช่น `0`,สตริงว่าง , `null`, `undefined`, และ `NaN` จะกลายเป็น `false`. - ค่าอื่นๆ จะกลายเป็น `true`. - ค่าที่ "ว่างเปล่า"ตามความเข้าใจทั่วไป เช่น `0`,string เปล่า , `null`, `undefined` และ `NaN` จะกลายเป็น `false` - ค่าอื่นๆ จะกลายเป็น `true` ตัวอย่างเช่น: ```js run alert( Boolean(1) ); // true alert( Boolean(0) ); // false alert( Boolean("สวัสดี ") ); // true alert( Boolean("hello ") ); // true alert( Boolean("") ); // false ``` ```` warn header="โปรดทราบ: สตริงที่มีศูนย์ `\"0\"`เป็น `true`" บางภาษา (อย่างเช่น PHP)จะมองว่า `"0"`เป็น `false` แต่ใน JavaScriptสตริงที่ไม่ว่างเปล่าจะกลายเป็น `true` เสมอ```warn header="โปรดสังเกต: string ที่มีเลขศูนย์ `\"0\"`จะเป็น `true`" ในบางภาษา (โดยเฉพาะ PHP) `"0"`จะถูกพิจารณาว่าเป็น `false` แต่ใน JavaScriptstring ที่ไม่ว่างเปล่าจะเป็น `true` เสมอ```js run alert( Boolean("0") ); // true alert( Boolean(" ") ); // เว้นวรรค, ก็ยังเป็น true (สตริงที่ไม่ว่างเปล่าคือ true) alert( Boolean("0") ); // true alert( Boolean(" ") ); // เว้นวรรค ก็เป็น true (string ที่ไม่ว่างเปล่าทั้งหมดจะเป็น true) ``` ``` ```` ##บทสรุป ##สรุป การแปลงไทป์ที่ใช้กันอย่างแพร่หลายมี 3แบบ คือ แปลงเป็นสตริง แปลงเป็นตัวเลข และ แปลงเป็น true/false การแปลงชนิดข้อมูลที่พบบ่อยที่สุดมี 3ประเภท ได้แก่ การแปลงเป็น string, การแปลงเป็นตัวเลข และการแปลงเป็น boolean **`การแปลงเป็นสตริง `** -- เกิดขึ้นเมื่อเราแสดงผลอะไรบางอย่าง สามารถทำได้ด้วย `String(value)`การแปลงเป็นสตริงสำหรับค่าพื้นฐานมักจะชัดเจน **`การแปลงเป็น String `** -- เกิดขึ้นเมื่อเราแสดงผลอะไรบางอย่าง สามารถทำได้ด้วย `String(value)`โดยทั่วไปการแปลงเป็น string มักจะชัดเจนอยู่แล้วสำหรับค่า primitive **`การแปลงเป็นตัวเลข`** --เกิดขึ้นในคำนวณทางคณิตศาสตร์ สามารถทำได้ด้วย `Number(value)` **`การแปลงเป็นตัวเลข`** --เกิดขึ้นในการดำเนินการทางคณิตศาสตร์ สามารถทำได้ด้วย `Number(value)` การแปลงเป็นไปตามกฎดังนี้ :การแปลงจะเป็นไปตามกฎ :| ค่า |กลายเป็น ... | | ค่า | จะกลายเป็น ... | |-------|-------------| |`undefined`|`NaN`| |`null`|`0`| |<code>true / false</code> | `1 / 0` | | `string` |อ่านสตริงตามที่เป็น เว้นวรรค (รวมถึงช่องว่าง แท็บ `\t`ตัวแบ่งบรรทัด `\n` เป็นต้น)ทั้งสองข้างจะถูกละเว้น สตริงว่างเปล่าจะกลายเป็น `0`ข้อผิดพลาดจะให้ผลลัพธ์เป็น `NaN`. | | `string` |string จะถูกอ่าน "ตามที่เป็น" ส่วนช่องว่าง (รวมถึงเว้นวรรค tab `\t`ขึ้นบรรทัดใหม่ `\n` เป็นต้น)ที่ทั้งสองฝั่งจะถูกละเว้น string เปล่าจะกลายเป็น `0`เมื่อเกิด error จะได้เป็น `NaN` | **`การแปลงเป็นtrue/false `** --เกิดขึ้นในตัวดำเนินการตรรกะ สามารถทำได้ด้วย `Boolean(value)` **`การแปลงเป็นBoolean `** --เกิดขึ้นในการดำเนินการเชิงตรรกะ สามารถทำได้ด้วย `Boolean(value)` การแปลงเป็นไปตามกฎดังนี้ :ทำตามกฎ :| ค่า |กลายเป็น ... | | ค่า | จะกลายเป็น ... | |-------|-------------| |`0`, `null`, `undefined`, `NaN`, `""` |`false`| |ค่าอื่นๆ |ค่าอื่นๆ| `true` | กฎเหล่านี้ส่วนใหญ่เข้าใจง่ายและจำง่าย ข้อยกเว้นที่สำคัญที่ผู้คนมักจะทำผิดพลาดคือ :กฎส่วนใหญ่เหล่านี้เข้าใจและจดจำได้ง่าย ข้อยกเว้นที่ควรทราบเพราะมักทำให้เกิดความสับสน ได้แก่ :- `undefined`เป็น `NaN`เป็นตัวเลข ไม่ใช่ `0` - `"0"`และสตริงที่มีเฉพาะช่องว่าง เช่น `" "`เป็น trueเป็นบูลีน - `undefined`จะเป็น `NaN`ในรูปแบบตัวเลข ไม่ใช่ `0` - `"0"`และ string ที่มีแต่เว้นวรรคอย่าง `" "`จะเป็น trueในรูปแบบ boolean ออปเจ็กต์ไม่ได้ถูกกล่าวถึงในบทนี้ เราจะกลับมาดูเรื่องนี้ในบท <info:object-toprimitive>ซึ่งอุทิศให้กับออปเจ็กต์โดยเฉพาะหลังจากที่เราเรียนรู้สิ่งพื้นฐานเพิ่มเติมเกี่ยวกับ JavaScriptในที่นี้ยังไม่ได้ครอบคลุมถึง object เราจะกลับมาพูดถึงเรื่องนี้อีกครั้งในบท <info:object-toprimitive>ซึ่งอุทิศให้กับ object โดยเฉพาะ หลังจากที่เราได้เรียนรู้เรื่องพื้นฐานของ JavaScript เพิ่มเติมแล้ว