การเปลี่ยนประเภท ECMAScript

所有程序设计语言最重要的特征之一是具有进行类型转换的能力。

ECMAScript 给开发者提供了大量简单的类型转换方法。

大部分类型具有进行简单转换的方法，还有几个全局方法可以用于更复杂的转换。无论哪种情况，在 ECMAScript 中，类型转换都是简短的一步操作。

转换成字符串

ECMAScript 的 Boolean 值、数字和字符串的原始值的有趣之处在于它们是伪对象，这意味着它们实际上具有属性和方法。

例如，要获得字符串的长度，可以采用下面的代码：

var sColor = "red";
alert(sColor.length);	//输出 "3"

尽管 "red" 是原始类型的字符串，它仍然具有属性 length，用于存放字符串的大小。

总而言之，3 种主要的原始类型 Boolean 值、数字和字符串都有 toString() 方法，可以把它们的值转换成字符串。

提示：คุณอาจจะถามว่า

Boolean 类型的 toString() 方法只是输出 "true" 或 "false"，结果由变量的值决定：

var bFound = false;
alert(bFound.toString());	//输出 "false"

Number 类型的 toString() 方法比较特殊，它有两种模式，即默认模式和基模式。采用默认模式，toString() 方法只是用相应的字符串输出数字值（无论是整数、浮点数还是科学计数法），如下所示：

var iNum1 = 10;
var iNum2 = 10.0;
alert(iNum1.toString());	//输出 "10"
alert(iNum2.toString());	//输出 "10"

หมายเหตุ：在默认模式中，无论最初采用什么表示法声明数字，Number 类型的 toString() 方法返回的都是数字的十进制表示。因此，以八进制或十六进制字面量形式声明的数字输出的都是十进制形式的。

采用 Number 类型的 toString() 方法的基模式，可以用不同的基输出数字，例如二进制的基是 2，八进制的基是 8，十六进制的基是 16。

基只是要转换成的基数的另一种加法而已，它是 toString() 方法的参数：

var iNum = 10;
alert(iNum.toString(2));	//输出 "1010"
alert(iNum.toString(8));	//输出 "12"
alert(iNum.toString(16));	//输出 "A"

在前面的示例中，以 3 种不同的形式输出了数字 10，即二进制形式、八进制形式和十六进制形式。HTML 采用十六进制表示每种颜色，在 HTML 中处理数字时这种功能非常有用。

หมายเหตุ：对数字调用 toString(10) 与调用 toString() 相同，它们返回的都是该数字的十进制形式。

参阅：

ดู คู่มือการใช้ JavaScript提供的有关 toString() 方法的详细信息：

แปลงเป็นตัวเลข

ECMAScript มีวิธีสองที่สามารถแปลงค่าตัวเลขที่ไม่เป็นตัวเลขให้เป็นตัวเลข คือ parseInt() และ parseFloat()

เหมือนที่คุณคาดคิดไว้ ตัวแรกจะแปลงค่าเป็นตัวเลขเต็ม ตัวที่สองแปลงค่าเป็นตัวเลขเป็นจำนวนเต็ม มีเฉพาะเมื่อเรียกใช้วิธีด้วย String ที่ถูกต้อง แต่ถ้าเรียกใช้ด้วยชนิดอื่น วิธีนี้จะส่งผลลัพธ์ NaN

parseInt()

ก่อนที่จะตรวจสอบว่าสตริงเป็นตัวเลขหรือไม่ วิธี parseInt() และ parseFloat() จะตรวจสอบสตริงอย่างละเอียด

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

เช่นเดียวกับที่คุณคาดคิดไว้ ถ้าต้องการแปลงสตริง "12345red" ให้เป็นตัวเลข วิธี parseInt() จะส่งผลลัพธ์ 12345 เพราะเมื่อตรวจสอบถึงตัวอักษร r วิธี parseInt() จะหยุดตรวจสอบ

ตัวเลขที่อยู่ในสตริงจะถูกแปลงเป็นตัวเลขโดยทันที ตัวอย่างเช่น "0xA" จะถูกแปลงเป็นตัวเลข 10 อย่างถูกต้อง แต่สตริง "22.5" จะถูกแปลงเป็น 22 เพราะจุดของตัวเลขเป็นอักษรที่บล็อคออกจากการตรวจสอบ สำหรับตัวเลขเต็ม

ตัวอย่างเช่นนี้:

var iNum1 = parseInt("12345red");	// ส่งผลลัพธ์ 12345
var iNum1 = parseInt("0xA");	// ส่งผลลัพธ์ 10
var iNum1 = parseInt("56.9");	// ส่งผลลัพธ์ 56
var iNum1 = parseInt("red");	// ส่งผลลัพธ์ NaN

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

var iNum1 = parseInt("AF", 16);	// ส่งผลลัพธ์ 175

ตัวเลขที่เป็นเส้นใบสองทศนิยม หรือแปดทศนิยม หรือสิบทศนิยม (โดยมาตรฐาน) สามารถเรียกใช้วิธี parseInt() ได้เช่นนี้:

var iNum1 = parseInt("10", 2);	// ส่งผลลัพธ์ 2
var iNum2 = parseInt("10", 8);	// คืนค่า 8
var iNum3 = parseInt("10", 10);	// คืนค่า 10

หากตัวเลขเป็นเลขทศนิยมที่มีหน้าหน้า 0 ดังนั้นควรใช้ระบบหน่วยเลขที่ 10 เพื่อที่จะไม่ได้ค่าที่ไม่ตามความคาดหวัง ตัวอย่างเช่น：

var iNum1 = parseInt("010");	// คืนค่า 8
var iNum2 = parseInt("010", 8);	// คืนค่า 8
var iNum3 = parseInt("010", 10);	// คืนค่า 10

ในบรรยายรหัสนี้ สองบรรทัดรหัสทั้งสองจะแปลงตัวคำ "010" ให้เป็นตัวเลข บรรทัดแรกนับว่าเป็นค่าเป็นระบบเลขทศนิยมเป็นระบบหน่วยเลขที่ 8 และแปลงในวิธีเดียวกับบรรทัดที่สอง (เปิดแถวด้วยค่าเป็นระบบหน่วยเลขที่ 8) บรรทัดสุดท้ายประกาศค่าเป็นระบบหน่วยเลขที่ 10 ดังนั้น iNum3 จะมีค่าเท่ากับ 10

ดู

ดู คู่มือการใช้ JavaScriptรายละเอียดเกี่ยวกับวิธี parseInt() ที่ได้มีให้parseInt()

parseFloat()

วิธี parseFloat() มีทางเดินทางที่คล้ายวิธี parseInt() โดยตรวจสอบแต่ละตัวอักษรจากตำแหน่ง 0 จนกว่าจะพบตัวอักษรที่ไม่มีความหมาย แล้วแปลงตัวอักษรก่อนตำแหน่งนั้นเป็นตัวเลข

อย่างไรก็ตาม สำหรับวิธีนี้ จุดที่ปรากฏขึ้นแรกเป็นตัวอักษรที่มีความหมาย หากมีจุดที่ปรากฏขึ้นสองจุด จุดที่ปรากฏขึ้นเป็นครั้งที่สองจะถูกมองว่าเป็นตัวอักษรที่ไม่มีความหมาย parseFloat() จะแปลงตัวอักษรก่อนจุดที่ปรากฏขึ้นเป็นตัวเลข นี่หมายความว่า ตัวคำ "11.22.33" จะถูกแปลงเป็น 11.22

ความแตกต่างอีกของการใช้วิธี parseFloat() คือ ตัวคำต้องแสดงเป็นตัวเลขจำนวนเศษที่เป็นระบบสิบเบส ไม่ใช่ระบบเป็นหน่วยเลขทศนิยมหรือสิบหกหลังจากนั้น วิธีนี้จะละเลยตัวเลขหน้าของตัวคำ ดังนั้นตัวเลขทศนิยม 0102 จะถูกแปลงเป็น 102 สำหรับตัวเลขทศนิยม 0xA จะคืนค่า NaN เพราะ x ไม่ใช่ตัวอักษรที่มีความหมายในตัวเลขเศษ (หมายเหตุ：หลังจากทดสอบ การทำงานของเบราเซอร์ที่เฉพาะจะคืนค่า 0 แทน NaN)。

นอกจากนี้ วิธี parseFloat() ไม่มีโมดูลหลัก

ตัวอย่างเช่นนี้เป็นตัวอย่างการใช้ความหมาย parseFloat()

var fNum1 = parseFloat("12345red");	// คืนค่า 12345
var fNum2 = parseFloat("0xA");	// คืนค่า NaN
var fNum3 = parseFloat("11.2");	// คืนค่า 11.2
var fNum4 = parseFloat("11.22.33");	// คืนค่า 11.22
var fNum5 = parseFloat("0102"); // คืนค่า 102
var fNum1 = parseFloat("red"); // คืนค่า NaN

ลองทดสอบด้วยตัวเอง

ดู

ดู คู่มือการใช้ JavaScriptข้อมูลเกี่ยวกับฟังก์ชัน parseFloat() ที่ได้มา:parseFloat()

การแปลงประเภท

คุณยังสามารถใช้การแปลงประเภท (type casting)มีความมุ่งหมายที่จะจัดการประเภทของค่าที่ต้องการแปลง การแปลงประเภทเป็นเรื่องที่ช่วยเหลือในการเข้าถึงค่าที่มีประเภทอื่น

หมายเหตุนักเขียน:cast มีความหมายว่า "casting" ซึ่งเหมาะกับความหมายของ "การแปลงประเภท"

มี 3 ชนิดของการแปลงประเภทที่สามารถใช้ได้ใน ECMAScript

  • Boolean(value) - แปลงค่าที่ใส่เข้ามาเป็นประเภท Boolean;
  • Number(value) - แปลงค่าที่ใส่เข้ามาเป็นตัวเลข (สามารถเป็นตัวเลขเต็มหรือจำนวนเศษ);
  • String(value) - แปลงค่าที่ใส่เข้ามาเป็นตัวอักษร;

ด้วยการใช้หนึ่งในฟังก์ชันทั้งสามนี้เพื่อแปลงประเภทค่า จะทำให้เกิดค่าใหม่ซึ่งเก็บค่าที่แปลงมาจากค่าเดิม มันอาจทำให้เกิดผลที่ไม่คาดหมาย

ฟังก์ชัน Boolean()

เมื่อค่าที่ต้องการแปลงประเภทเป็นตัวอักษรที่มีอักษรอย่างน้อยหนึ่งตัว ตัวเลขที่ไม่เป็น 0 หรือวัตถุ ฟังก์ชัน Boolean() จะส่งกลับค่า true หากค่านั้นเป็นตัวอักษรที่เป็นช่องว่าง ตัวเลข 0 หรือ undefined หรือ null มันจะส่งกลับค่า false

คุณสามารถทดสอบการแปลงประเภทกลุ่ม Boolean ด้วยรหัสต่อไปนี้:

var b1 = Boolean(""); //false - ตัวอักษรที่เป็นช่องว่าง
var b2 = Boolean("hello"); //true - ตัวอักษรที่ไม่เป็นช่องว่าง
var b1 = Boolean(50); //true - ตัวเลขไม่เป็น 0
var b1 = Boolean(null); //false - null
var b1 = Boolean(0); //false - 0
var b1 = Boolean(new object()); //true - วัตถุ

ฟังก์ชัน Number()

การแปลงประเภทของฟังก์ชัน Number() คล้ายกับการใช้ parseInt() และ parseFloat() แต่มันจะแปลงค่าทั้งหมดของค่าที่มีอยู่ ไม่ใช่ส่วนหนึ่งของค่า

ยังจำไหมว่า ฟังก์ชัน parseInt() และ parseFloat() ต่อรองค่าของตัวแปรซึ่งมีอักษรผิดพลาดแรกที่แรก ดังนั้น "1.2.3" จะถูกแปลงเป็น "1" และ "1.2" ตามลำดับ。

การเปลี่ยนประเภทด้วย Number() คือ "1.2.3" จะหลุดค่า NaN เพราะไม่สามารถแปลงค่าตัวอักษรทั้งหมดเป็นตัวเลขได้ หากค่าตัวอักษรสามารถแปลงได้ทั้งหมด Number() จะตรวจสอบว่าจะเรียกฟังก์ชัน parseInt() หรือ parseFloat()

ตารางด้านล่างชี้แจงสถานการณ์ที่เกิดขึ้นเมื่อเรียกใช้ฟังก์ชัน Number() สำหรับค่าที่ต่างกัน

วิธีใช้ ผลลัพธ์
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number("1.2") 1.2
Number("12") 12
Number("1.2.3") NaN
Number(new object()) NaN
Number(50) 50

ฟังก์ชัน String()

วิธีการเปลี่ยนประเภทที่สุดท้ายคือ String() มันสามารถเปลี่ยนค่าใดก็ได้เป็นตัวอักษร

เพื่อทำการเปลี่ยนประเภทดังกล่าว แค่เรียกฟังก์ชัน toString() ของค่าที่ถูกส่งเข้ามาเท่านั้น กล่าวคือ การเปลี่ยน 12 ไปเป็น "12" การเปลี่ยน true ไปเป็น "true" การเปลี่ยน false ไปเป็น "false" และอื่น ๆ

ความแตกต่างเดียวที่เปลี่ยนค่าเป็นตัวอักษรและเรียกฟังก์ชัน toString() คือ การเปลี่ยนค่า null และ undefined โดยบังคับประเภทสามารถสร้างตัวอักษรได้โดยไม่ทำให้เกิดข้อผิดพลาด

var s1 = String(null);	//"null"
var oNull = null;
var s2 = oNull.toString();	//จะทำให้เกิดข้อผิดพลาด

การทำการปรับแปลงประเภทของค่าบังคับสำหรับภาษาแบบประเภทอ่อนเช่น ECMAScript มีประโยชน์มาก แต่ควรให้การตรวจสอบค่าที่ถูกต้อง