การแปลงประเภทข้อมูล ในภาษา JavaScript

29 October 2020

ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับการแปลงประเภทข้อมูลในภาษา 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 โดยการใช้ฟังก์ชันทั้งสาม

convert_to_numbers.js
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

tostring_method.js
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 เป็นของมันเอง นี่เป็นตัวอย่าง

convert_to_string.js
// 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 เมื่อเราสร้างคลาสของเราเอง

user_tostring.js
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 ที่เราได้ใช้ไปแล้วในตัวอย่างก่อนหน้า ยกตัวอย่างเช่น

string_constructor.js
// 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 เสมอ ยกตัวอย่างเช่น

null_to_string.js
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

convert_to_boolean.js
// 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 นี่เป็นอีกตัวอย่าง

convert_to_boolean2.js
// 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 ซึ่งเป็นสิ่งที่มีประโยชน์เมื่อคุณจะต้องทำงานกับข้อมูลหลากหลายประเภทในการเขียนโปรแกรม

บทความนี้เป็นประโยชน์หรือไม่? Yes · No