การแปลงประเภทข้อมูล ในภาษา JavaScript
ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับการแปลงประเภทข้อมูลในภาษา JavaScript เพื่อแปลงข้อมูลจากอีกประเภทหนึ่งไปยังอีกประเภทที่เราต้องการใช้งาน การแปลงข้อมูลนั้นเป็นสิ่งที่จำเป็นเนื่องจากการเขียนโปรแกรมเราต้องเจอกับข้อมูลหลายประเภท ในบทนี้เราจะพูดถึงการแปลงประเภทข้อมูลพื้นฐานได้แก่ ตัวเลข String และ Boolean นี่เป็นเนื้อหาในบทนี้
- การแปลงข้อมูลเป็นตัวเลข
- การแปลงข้อมูลเป็น String
- การแปลงข้อมูลเป็น Boolean
การแปลงข้อมูลเป็นตัวเลข
ตัวเลขในภาษา JavaScript นั้นเป็นประเภทข้อมูลจากคลาส Number
มันใช้สำหรับเก็บค่าที่สามารถอธิบายได้ในเชิงตัวเลข การเก็บข้อมูลเป็นตัวเลขนั้นสะดวกในการนำไปคำนวณ ในการเขียนโปรแกรมเราอาจต้องการแปลงข้อมูลประเภทอื่นให้เป็นตัวเลข ยกตัวอย่างเช่น String literal ที่ประกอบไปด้วยตัวเลข เป็นต้น
let str1 = "12";
let str2 = "5.45";
ในตัวอย่าง แม้ว่าค่าในตัวแปรทั้งสองจะประกอบไปด้วยตัวเลข แต่มันมีประเภทข้อมูลเป็น String นั่นเป็นเพราะว่าเรากำหนดค่าโดยการใช้ String literal ดังนั้นภาษา JavaScript เห็นมันเป็น String การประมวลผลและการดำเนินการใดๆ จะถูกทำในบริษทของ String
เพื่อแปลง String หรือค่าใดๆ ในภาษา JavaScript ให้เป็นตัวเลข เราสามารถทำได้โดยใช้สามฟังก์ชันดังต่อไปนี้
Number()
: แปลงออบเจ็คใดๆ ให้เป็นตัวเลขparseInt()
: แปลง String ให้เป็นตัวเลขจำนวนเต็มparseFloat()
: แปลง String ให้เป็นตัวเลขจำนวนเต็มทศนิยม
นี่เป็นตัวอย่างการแปลง String เป็นตัวเลขในภาษา JavaScript โดยการใช้ฟังก์ชันทั้งสาม
console.log("Number");
console.log(Number("12"));
console.log(Number("-1"));
console.log(Number("3.4567"));
console.log("parseInt");
console.log(parseInt("10"));
console.log(parseInt("10.5"));
console.log(parseInt("1.2345"));
console.log("parseFloat");
console.log(parseFloat("3.14"));
console.log(parseFloat("10E5"));
console.log(parseFloat("-1.2345"));
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
Number
12
-1
3.4567
parseInt
10
10
1
parseFloat
3.14
1000000
-1.2345
ในตัวอย่าง เป็นโปรแกรมสำหรับแปลง String ให้เป็นตัวเลขในภาษา JavaScript; Number
เป็นคลาส ของตัวเลข แต่เราใช้มันในรูปแบบของคอนสตรัคเตอร์ฟังก์ชันเพื่อแปลง String ไปเป็นตัวเลข ส่วนฟังก์ชัน parseInt
และ parseFloat
ใช้แปลง String เป็นตัวเลขจำนวนเต็ม และตัวเลขทศนิยมตามลำดับ
ในการใช้งานฟังก์ชันเหล่านี้ คุณจะต้องตรวจสอบให้แน่ใจว่าค่าที่ส่งเข้าไปยังฟังก์ชันเป็นค่าของตัวเลขที่ถูกต้อง เมื่อค่าที่ส่งเข้าไปยังฟังก์ชันไม่เป็นตัวเลข ผลลัพธ์การทำงานนั้นอาจผิดพลาด และแต่ละฟังก์ชันนั้นให้ผลลัพธ์ที่แตกต่างกัน ยกตัวอย่างเช่น
console.log(Number("1.602E-19")); // 1.602e-19
console.log(Number("-3.14")); // -3.14
console.log(Number("16px")); // NaN
console.log(Number("abc")); // NaN
ในการใช้งานฟังก์ชัน Number
ค่าของ String จะต้องเป็นตัวเลขที่ถูกต้องเท่านั้น ถ้าหากค่าที่ส่งเข้าไปประกอบไปด้วยตัวอักษรอื่นที่ไม่ใช่ตัวเลข ฟังก์ชันนี้ส่งค่ากลับเป็น NaN
ซึ่งเป็นค่าที่มีความหมายว่า Not a Number
สำหรับฟังก์ชัน parseInt
และ parseFloat
จะแปลงค่าใน String ให้เป็นตัวเลขเช่นกัน แต่ฟังก์ชันเหล่านี้จะค้นหาเพียงตัวเลขเท่านั้นเพื่ิอแปลง ถ้ามันพบว่าค่าใน String ไม่ใช่ค่าของตัวเลขที่ถูกต้อง มันหยุดการแปลงและการค้นหาส่วนที่เหลือทันที นี่เป็นตัวอย่าง
console.log(parseInt("-5")); // -5
console.log(parseInt("16px")); // 16
console.log(parseInt("abc")); // NaN
console.log(parseInt("zz123")); // NaN
console.log(parseFloat("1.25E3")); // 1250
console.log(parseFloat("5.5-6.5")); // 5.5
console.log(parseFloat("PI=3.14")); // NaN
ฟังก์ชัน parseInt
และฟังก์ชัน parseFloat
จะทำการค้นหาหาตัวเลขหรือ Number literal ที่ถูกต้องซึ่งประกอบไปด้วย 0-9
, E
, e
และเครื่อหมาย .
และ -
ไปจนกว่าจะไม่ใช่ และนำค่าที่ได้มาแปลง ในกรณีที่ตัวอักษรตัวแรกใน String ไม่ใช่ค่าของตัวเลข ผลลัพธ์ที่ได้จะเป็น NaN
เราสามารถใช้ฟังก์ชัน Number
เพื่อแปลงข้อมูลประเภทอื่นๆ นอกจาก String ไปยังตัวเลขได้ ยกตัวอย่างเช่น ในการแปลง Boolean เป็นตัวเลขนั้น true
จะถูกแปลงเป็น 1
และ false
ถูกแปลงเป็น 0
console.log(Number(true)); // 1
console.log(Number(false)); // 0
นอกจากนี้ ฟังก์ชัน parseInt
และ parseFloat
ยังมีพารามิเตอร์ตัวที่สองที่ใช้กำหนดการแปลง String จากเลขฐานที่กำหนดเป็นตัวเลขได้ กล่าวคือเราสามารถใช้มันเพื่อแปลง String ของตัวเลขในเลขฐานอื่นๆ ไปยังเลขฐานสิบได้ นี่เป็นตัวอย่าง
console.log(parseInt("100010", 2)); // 34
console.log(parseInt("042", 8)); // 34
console.log(parseInt("0x22", 16)); // 34
พารามิเตอร์ที่สองของฟังก์ชันใช้กำหนดเลขฐานตั้งต้นใน String ที่ต้องการแปลงเป็นเลขฐานสิบ ในตัวอย่างนี้ เป็นการแปลง String ของตัวเลขที่อยู่ในรูปแบบของเลขฐานสอง ฐานแปด และฐานสิบหก เป็นตัวเลขฐานสิบ ตามลำดับ และตัวเลขทั้งหมดมีค่าเท่ากับ 34
ในเลขฐานสิบ
หมายเหตุ: ค่าของตัวเลขใน String ต้องเป็นค่าที่ถูกต้องเท่านั้น เช่น เมื่อแปลงจาก String ของเลขฐานแปด
parseInt(str, 8)
ค่าของstr
ต้องมีตัวอักษรเป็น 0 - 7 เท่านั้น ไม่เช่นนั้นผลลัพธ์ที่ได้จะเป็น0
ซึ่งหมายความว่าไม่สามารถแปลงได้
การแปลงข้อมูลเป็น String
String นั้นเป็นประเภทข้อมูลพื้นฐานที่ใช้มากที่สุดในการเขียนโปรแกรม ดังนั้นการแปลงข้อมูลระหว่าง String และข้อมูลประเภทอื่นๆ จึงเป็นเรื่องพื้นฐานที่จำเป็นต้องทราบ ในภาษา JavaScript เราสามารถแปลงข้อมูลใดๆ เป็น String ได้โดยการใช้ฟังก์ชัน String
และเมธอด toString
เมธอด toString
ทุกออบเจ็คในภาษา JavaScript นั้นสืบทอดมาจากคลาส Object
ซึ่งคลาสนี้มีเมธอด toString
ที่ใช้กำหนดเพื่อแปลงออบเจ็คเป็น String
เมื่อเรียกใช้งานเมธอดบนออบเจ็คของตัวเลข ค่าของตัวเลขถูกแปลงเป็น String หรือเมื่อเรียกใช้เมธอดบนออบเจ็คอื่นๆ ออบเจ็คเหล่านั้นถูกแปลงเป็น String ตามการทำงานที่กำหนดในเมธอด นี่เป็นตัวอย่างการแปลงตัวเลขเป็น String ด้วยเมธอด toString
console.log((-1).toString());
console.log((5).toString());
console.log((3.14).toString());
console.log((1.25E-3).toString());
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
-1
5
3.14
0.00125
เมธอด toString
เป็นเมธอดที่สามารถเรียกจากออบเจ็คได้โดยตรง มันทำหน้าที่สำหรับแปลงตัวเลขเป็น String นั่นหมายความว่า -1
ถูกแปลงเป็น "-1"
แต่เมื่อค่าของ String ถูกแสดงด้วยฟังก์ชัน console.log
มีเพียงเนื้อหาของ String เท่านั้นที่ถูกแสดง ไม่รวม Double quote
เมธอด toString
เป็นเมธอดที่เราสามารถเรียกใช้งานบนออบเจ็คใดๆ ในภาษา JavaScript ในการแปลงออบเจ็คเป็น String ด้วยเมธอด toString
ผลลัพธ์การทำงานของออบเจ็คแต่ละประเภทจะแตกต่างกัน เนื่องจากแต่ละคลาสที่สืบทอดมาจากคลาส Object
มีการ Override การทำงานของเมธอด toString
เป็นของมันเอง นี่เป็นตัวอย่าง
// Numbers
console.log((10).toString());
console.log((3.14).toString());
// Booleans
console.log((true).toString());
console.log((false).toString());
let user = {
id: 1,
name: "Metin"
};
function sayHi() {
console.log("Hi everyone!");
}
// Other complex objects
console.log([1, 2, 3, 4].toString());
console.log(user.toString());
console.log(sayHi.toString());
console.log(new Date().toString());
console.log(/hello/.toString());
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
10
3.14
true
false
1,2,3,4
[object Object]
function sayHi() {
console.log("Hi everyone!");
}
Tue Sep 22 2020 21:50:06 GMT+0700 (Indochina Time)
/hello/
ในตัวอย่างนี้ เป็นการเรียกใช้งานเมธอด toString
บนออบเจ็คประเภทต่างๆ เพื่อแปลงออบเจ็คเหล่านั้นเป็น String จะเห็นว่าการทำงานของเมธอดในแต่ละออบเจ็คนั้นแตกต่างกันไป ยกตัวอย่างเช่น
console.log([1, 2, 3, 4].toString());
console.log(user.toString());
console.log(sayHi.toString());
เมื่อเรียกใช้งานเมธอด toString
บนอาเรย์ แต่ละค่าในอาเรย์ถูกนำมาแปลงเป็น String และเชื่อมต่อกันด้วยเครื่องหมายคอมมา (,
) เมื่อเรียกใช้เมธอดบนออบเจ็ค Object literal ค่าที่ได้จะเป็น [object Object]
เสมอ แลเมื่อเรียกเมธอดบนฟังก์ชัน ค่าที่ได้จะเป็นโค้ดที่เขียนไว้ในฟังก์ชันแทน
สิ่งหนึ่งที่ควรระวังในการใช้เมธอด toString
ก็คือมันไม่สามารถใช้กับ null
หรือ undefined
ได้ ค่าทั้งสองนี้ไม่ใช่ออบเจ็คในภาษา JavaScript แต่มันเป็นค่าคงที่ที่ใช้แสดงถึงค่าเพียงค่าเดียวกัน ดังนั้นโค้ดต่อไปนี้จะทำให้เกิดข้อผิดพลาดขึ้น
console.log(null.toString());
console.log(undefined.toString());
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
TypeError: Cannot read property 'toString' of null
...
TypeError: Cannot read property 'toString' of undefined
นี่เป็นสิ่งที่คุณควรระวังเมื่อต้องทำงานกับโค้ดที่อาจจะมีเป็นค่า null
หรือ undefined
ยกตัวอย่างเช่น บางฟังก์ชันอาจส่งค่ากลับเป็น null
เพื่อแสดงว่าข้อมูลไม่มีอยู่ เป็นต้น ซึ่งเป็นสิ่งที่พบได้บ่อยสำหรับฟังก์ชันในภาษา JavaScript
ข้อมูลน่ารู้: เมธอด
toString
เป็นมาตรฐานของเมธอดสำหรับกำหนดการแปลงออบเจ็คเป็น String นั่นหมายความว่าเมื่อคุณสร้างคลาสของคุณ คุณควร Override เมธอดเพื่อแปลงออบเจ็คเป็น String ไม่เช่นนั้นค่าที่ได้จากการเรียกใช้เมธอดจะเป็น[object Object]
เหมือนกับที่คุณเห็นในตัวอย่าง
ในตัวอย่างนี้ แสดงวิธีการกำหนดการทำงานเมธอด toString
เมื่อเราสร้างคลาสของเราเอง
class User {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
toString() {
return `{ fistName: ${this.firstName},` +
`lastName: ${this.lastName} }`
}
}
let user = new User("Metin", "Homsin");
// Explicit callss
console.log(user.toString());
// Implicit call
console.log(String(user));
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
{ fistName: Metin,lastName: Homsin }
{ fistName: Metin,lastName: Homsin }
จะเห็นว่าเมื่อเราแปลงออบเจ็คเป็น String ด้วยคอนสตรัคเตอร์ฟังก์ชัน String
มันมีการเรียกใช้เมธอด toString
อัตโนมัติ นี่เป็นวิธีปฏิบัติในภาษา JavaScript ในการกำหนดการทำงานของเมธอดสำหรับแปลงออบเจ็คเป็น String
และอย่างที่คุณเห็นในตัวอย่างที่ผ่านมา เช่น อาเรย์ วันที่ ฟังก์ชัน หรือ Regular expression ออบเจ็คแต่ละประเภทมีการทำงานที่แตกต่างกันเมื่อเรียกใช้เมธอด toString
นั่นเป็นเพราะว่าคลาสของแต่ละออบเจ็คมีการ Override การทำงานของเมธอด แต่มันมีความหมายเดียวกันคือแปลงออบเจ็คเป็น String
คลาสคอนสรัตเตอร์ String
วิธีที่สองในการแปลงข้อมูลเป็น String คือการใช้งานคลาสคอนสรัตเตอร์ฟังก์ชัน String
ในรูปแบบของฟังก์ชัน สำหรับการใช้งานทั่วไปนั้นมันให้ผลลัพที่ไม่แตกต่างจากเมธอด toString
ที่เราได้ใช้ไปแล้วในตัวอย่างก่อนหน้า ยกตัวอย่างเช่น
// Numbers
console.log(String(10));
console.log(String(3.14));
// Booleans
console.log(String(true));
console.log(String(false));
let user = {
id: 1,
name: "Metin"
};
function sayHi() {
console.log("Hi everyone!");
}
// Other complex objects
console.log(String([1, 2, 3, 4]));
console.log(String(user));
console.log(String(sayHi));
console.log(String(new Date()));
console.log(String(/hello/));
นี่เป็นผลลัพธ์การทำงานของการใช้ฟังก์ชัน String เพื่อแปลงออบเจ็คประเภทต่างๆ ให้เป็น String
10
3.14
true
false
1,2,3,4
[object Object]
function sayHi() {
console.log("Hi everyone!");
}
Tue Sep 22 2020 22:19:42 GMT+0700 (Indochina Time)
/hello/
จะเห็นว่าการทำงานของคอนสรัตเตอร์ฟังก์ชัน String
นั้นให้ผลลัพธ์ที่ไม่แตกต่างกับการใช้งานเมธอด toString
ที่คุณได้เห็นไปแล้วในตัวอย่างก่อนหน้า ซึ่งคุณสามารถใช้รูปแบบไหนก็ได้เพื่อแปลงออบเจ็คเป็น String
อย่างไรก็ตาม สิ่งหนึ่งที่ต่างระหว่างเมธอด toString
กับการใช้วิธีนี้ก็คือ คอนสตรัคเตอร์ฟังก์ชัน String
สามารถใช้แปลงค่า null
และ undefined
ได้ ซึ่งนี่จะเป็นประโยชน์เมื่อข้อมูลของเราอาจเป็น null
หรือ undefinded
แต่เราต้องการแปลงมันเป็น String เสมอ ยกตัวอย่างเช่น
console.log(String(null));
console.log(String(undefined));
let user = {
id: 1,
name: "Metin"
}
console.log(String(user.age));
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
null
undefined
undefined
ในตัวอย่าง null
ถูกแปลงเป็น"null"
และ undefined
ถูกแปลงเป็น "undefined"
ซึ่งก่อนการแปลงฟังก์ชันจะทำการตรวจสอบก่อนว่าเป็นค่าทั้งสองนี่หรือไม่ นี่จะทำให้มั่นใจได้ว่าโปรแกรมของเราจะไม่เกิดข้อผิดพลาดแม้ว่าค่าในตัวแปรหรือออบเจ็คจะเป็น null
หรือ undefined
ดังนั้นเพื่อแปลงข้อมูลเป็น String เราแนะนำให้ใช้ฟังก์ชัน String
ถ้าหากเป็นไปได้ เนื่องจากมันมีการตรวจสอบ null
และ undefined
ให้กับเราด้วย
คอนสตรัคเตอร์ฟังก์ชัน String
นี้ถูกใช้โดย JavaScript engine ในการแปลงออบเจ็คเป็น String อัตโนมัติเมื่อเราทำการเชื่อมต่อ String ยกตัวอย่างเช่น
console.log("welcome to " + 2020);
let name = "Metin";
let age = 28;
console.log(`${name} is ${age} years old`);
นี่เป็นผลลัพธ์การทำงานของโปรแกรม
welcome to 2020
Metin is 28 years old
เมื่อเราทำการเชื่อมต่อค่าอื่นกับ String โดยไม่แปลงค่าเหล่านั้นให้เป็น String ก่อน; ภาษา JavaScript จะทำการแปลงค่าเหล่านั้นเป็น String ด้วยฟังก์ชัน String
โดยอัตโนมัติ เช่นนี้
console.log("welcome to " + String(2020));
...
console.log(`${String(name)} is ${String(age)} years old`);
นั่นเป็นเหตุผลว่าทำไมการใช้ฟังก์ชัน String
จึงปลอดภัยกว่า อย่างไรก็ตามคุณสามารถใช้เมธอด toString
ได้หากต้องการ
การแปลงข้อมูลเป็น Boolean
ข้อมูลทุกประเภทสามารถแปลงค่าเป็น Boolean ได้โดยการใช้คอนสตรัคเตอร์ฟังก์ชัน Boolean
นี่เป็นกฏของการแปลงข้อมูลประเภทอื่นๆ เป็น Boolean ในภาษา JavaScript
- ตัวเลข:
0
หรือ0.0
จะถูกแปลงเป็นfalse
ส่วนค่าอื่นๆ จะถูกแปลงเป็นtrue
- String: ค่าของ String ว่าง
""
จะถูกแปลงเป็นfalse
ส่วนค่าอื่นๆ จะถูกแปลงเป็นtrue
- null และ undefinded: จะถูกแปลงเป็น
false
เสมอ - ออบเจ็ค อาเรย์ และค่าอื่นๆ: จะถูกแปลงเป็น
true
เสมอ
และนี่เป็นตัวอย่างในการแปลงออบเจ็คประเภทต่างๆ เป็น Boolean ในภาษา JavaScript โดยการใช้คอนสตรัคเตอร์ฟังก์ชัน Boolean
// Falsly values
console.log(Boolean(0)); // false
console.log(Boolean(0.0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined));// false
// Truthly values
console.log(Boolean(10)); // true
console.log(Boolean(-5)); // true
console.log(Boolean("Metin")); // true
console.log(Boolean(" ")); // true
อย่างที่เราได้บอกไป ค่าที่เป็น false
นั้นจะมีตัวเลข 0
ค่าของ String ว่าง ค่า null
และ undefinded
เท่านั้น ส่วนค่าอื่นๆ ในภาษา JavaScript จะถูกประเมินค่าเป็น true
เมื่อมันถูกแปลงเป็น Boolean นี่เป็นอีกตัวอย่าง
// Empty objects
console.log(Boolean({})); // true
console.log(Boolean([])); // true
console.log(Boolean(function(){})); // true
// Not empty objects
console.log(Boolean({id: 1, name: "Metin"})); // true
console.log(Boolean([1, 2, 3, 4])); // true
console.log(Boolean(function(){ console.log("hello"); })); // true
console.log(Boolean(new Date())); // true
ซึ่งนี่จะรวมถึงอาเรย์ ออบเจ็ค หรือฟังก์ชันว่างเปล่าด้วย ซึ่งค่าเหล่านี้จะถูกแปลงเป็น true
เสมอ ซึ่งกฏของการแปลงนี้ถูกกำหนดโดยข้อกำหนดของภาษา JavaScript เอง
นอกจากนี้ การแปลงค่าเป็น Boolean ยังเกิดขึ้นอัตโนมัติในภาษา JavaScript ยกตัวอย่างเช่น คำสั่ง if นั้นต้องการเงื่อนไขที่เป็น Boolean เพื่อทำงาน แต่เราสามารถกำหนดเงื่อนไขโดยใช้ค่าใดๆ ก็ได้ โดยไม่ต้องแปลงเป็น Boolean ก่อน ยกตัวอย่างเช่น
let name = "Metin";
if (name) {
console.log("Name nhas value.");
} else {
console.log("Name is empty.");
}
ในตัวอย่างนี้ เป็นการใช้ค่าของออบเจ็คเพื่อสร้างเงื่อนไขโดยตรง ถ้าหากค่าดังกล่าวไม่ใช่ Boolean ภาษา JavaScript จะทำการแปลงเป็น Boolean ให้อัตโนมัติ เพื่อใช้ในการตรวจสอบเงื่อนไขกับคำสั่ง if ซึ่งจะมีค่าเทียบเท่ากับ
let name = "Metin";
if (Boolean(name)) {
console.log("Name has value.");
} else {
console.log("Name is empty.");
}
นี่เป็นสิ่งที่ภาษา JavaScript ทำให้กับเราเบื้องหลังอัตโนมัติ โดยการแปลงค่า Expression ของคำสั่ง if เป็น Boolean ก่อนทำงาน ซึ่งช่วยอำนวยสะดวกให้กับเราในการเขียนโปรแกรมและช่วยให้การเขียนโค้ดสั้นลง
ในบทนี้ คุณได้เรียนรู้เกี่ยวกับการแปลงประเภทข้อมูลในภาษา JavaScript เราได้พูดถึงการแปลงข้อมูลกับตัวเลข String และ Boolean ซึ่งเป็นสิ่งที่มีประโยชน์เมื่อคุณจะต้องทำงานกับข้อมูลหลากหลายประเภทในการเขียนโปรแกรม