JavaScript ประเภทการเปลี่ยนแปลง

Number() การแปลงค่าเป็น numericString() การแปลงค่าเป็น stringBoolean() การแปลงค่าเป็น boolean

ประเภทข้อมูล JavaScript

มีห้าประเภทของตัวแปรที่สามารถรับค่าเข้ามาได้ใน JavaScript:

  • string
  • number
  • boolean
  • object
  • function

มีสามประเภทของตัวแปร Object:

  • ตัวแปรแบบ Object
  • ตัวแปรแบบ Date
  • ตัวแปรแบบ Array

มีสองประเภทของข้อมูลที่ไม่สามารถรับค่าเข้ามาได้:

  • null
  • undefined

ตัวอักษร typeof

คุณสามารถใช้ typeof ตัวอักษรเพื่อระบุประเภทข้อมูลของตัวแปร JavaScript。

ตัวอย่าง

typeof "Bill"                 // ส่งกลับ "string"
typeof 3.14                   // ส่งกลับ "number"
typeof NaN                    // ส่งกลับ "number"
typeof false                  // ส่งผลลัพธ์ "boolean"
typeof [1,2,3,4]              // ส่งผลลัพธ์ "object"
typeof {name:'Bill', age:62}  // ส่งผลลัพธ์ "object"
typeof new Date()             // ส่งผลลัพธ์ "object"
typeof function () {}         // ส่งผลลัพธ์ "function"
typeof myCar                  // ส่งผลลัพธ์ "undefined" *
typeof null                   // ส่งผลลัพธ์ "object"

ลองทดลองเอง

โปรดจำหนดว่า:

  • ประเภทของ NaN คือตัวเลข
  • ประเภทของแบบสร้างคือแบบสร้าง
  • ประเภทของวันที่คือแบบสร้าง
  • ประเภทของ null คือแบบสร้าง
  • ประเภทของข้อมูลของตัวแปรที่ไม่มีค่าก็ undefined
  • ประเภทของข้อมูลของตัวแปรที่ยังไม่ได้กำหนดค่าก็ undefined

คุณไม่สามารถใช้ typeof ใช้ตัววิเคราะห์ว่าวัตถุ JavaScript คือแบบสร้างแบบภาพ (หรือ วันที่) หรือไม่。

ประเภทของข้อมูลของ typeof

typeof ตัวเลขไม่ใช่ตัวแปร.มันเป็นตัวเลข.ตัวเลข (เช่น + - * /ไม่มีประเภทของข้อมูล

แต่ที่typeof เสมอตลอดกลับมาในรูปแบบของภาษาตัวอักษร（ประเภทของตัววิเคราะห์）。

คุณสมบัติ constructor

constructor ค่าที่กลับมาด้วยอัลตราภาษานี้เป็นฟังก์ชันของทุกตัวแปรใน JavaScript。

ตัวอย่าง

"Bill".constructor                 // ส่งผลลัพธ์ "function String()  { [native code] }"
(3.14).constructor                 // ส่งผลลัพธ์ "function Number()  { [native code] }"
false.constructor                  // ส่งผลลัพธ์ "function Boolean() { [native code] }"
[1,2,3,4].constructor              // ส่งผลลัพธ์ "function Array()   { [native code] }"
{name:'Bill', age:62}.constructor  // ส่งผลลัพธ์ "function Object()  { [native code] }"
new Date().constructor             // 返回 "function Date()    { [native code] }"
function () {}.constructor         // 返回 "function Function(){ [native code] }"

ลองทดลองเอง

您可以通过检查 constructor 属性来确定某个对象是否为数组（包含单词 "Array"）：

ตัวอย่าง

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

ลองทดลองเอง

或者更简单，您可以检查对象是否是数组函数：

ตัวอย่าง

function isArray(myArray) {
    return myArray.constructor === Array;
}

ลองทดลองเอง

您可以通过检查 constructor 属性来确定某个对象是否为日期（包含单词 "Date"）：

ตัวอย่าง

function isDate(myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}

ลองทดลองเอง

或者更简单，您可以检查对象是否是日期函数：

ตัวอย่าง

function isDate(myDate) {
    return myDate.constructor === Date;
}

ลองทดลองเอง

JavaScript ประเภทการเปลี่ยนแปลง

ตัวแปร JavaScript สามารถแปลงเป็นตัวแปรใหม่และประเภทข้อมูลอื่น

  • ด้วยการใช้ฟังก์ชัน JavaScript
  • ผ่าน JavaScript ตัวเองอัตโนมัติการแปลง

แปลงค่าตัวเลขเป็นแบบสตริง

เมธอดโลก String() สามารถแปลงตัวเลขเป็นแบบสตริง

มันสามารถใช้กับประเภทตัวเลข ข้อความ ตัวเลขประกาย หรือ แสดงเป็นเอกสาร

ตัวอย่าง

String(x)         // คืนค่าแบบสตริงจากตัวเลขประกาย x
String(123)       // คืนค่าแบบสตริงจากตัวเลขแสดงเป็นข้อความ 123
String(100 + 23)  // คืนค่าแบบสตริงจากค่าตัวเลขในแสดง式

ลองทดลองเอง

วิธีตัวเลข toString() เช่นเดียวกัน。

ตัวอย่าง

x.toString()
(123).toString()
(100 + 23).toString()

ลองทดลองเอง

ในวิธีตัวเลขในบทนี้ คุณจะเรียนรู้วิธีที่สามารถใช้เพื่อแปลงค่าตัวเลขเป็นแบบสตริง

วิธี คำอธิบาย
toExponential() คืนค่าแบบสตริง ให้เป็นค่าที่ความยาวที่ตั้งค่าและปรับปรุง และเขียนด้วยระบบนิยามเลขเชิงเศษ
toFixed() คืนค่าแบบสตริง ให้เป็นค่าที่ความยาวที่ตั้งค่าและปรับปรุง และเขียนด้วยตัวเลขที่มีทศนิยมที่กำหนด
toPrecision() คืนค่าแบบสตริง ให้เป็นความยาวที่กำหนด

เปลี่ยนบูลเป็นข้อความ

เมธอดโลก String() สามารถเปลี่ยนบูลเป็นข้อความได้

String(false)        // กลับมาเป็น "false"
String(true)         // กลับมาเป็น "true"

วิธีบูล toString() เช่นเดียวกัน。

false.toString()     // กลับมาเป็น "false"
true.toString()      // กลับมาเป็น "true"

เปลี่ยนวันที่เป็นข้อความ

เมธอดโลก String() สามารถเปลี่ยนวันที่เป็นข้อความได้

String(Date())

วิธีการใช้วันที่ toString() เช่นเดียวกัน。

ตัวอย่าง

Date().toString()

ในวิธีการใช้วันที่ในบทความนี้ คุณจะหาวิธีที่สามารถใช้เปลี่ยนวันที่เป็นข้อความได้:

วิธี คำอธิบาย
getDate() ได้รับวันที่ (1-31)
getDay() หรือสัปดาห์ที่นับจากเลข (0-6)
getFullYear() ได้รับปีสี่หลัก (yyyy)
getHours() ได้รับชั่วโมง (0-23)
getMilliseconds() ได้รับมิลลิเซกันด์ (0-999)
getMinutes() ได้รับนาที (0-59)
getMonth() ได้รับเดือน (0-11)
getSeconds() ได้รับวินาที (0-59)
getTime() ได้รับเวลา (มิลลิเซกันด์ตั้งแต่วันที่ 1 มกราคม 1970)

เปลี่ยนข้อความเป็นตัวเลข

เมธอดโลก Number() สามารถเปลี่ยนข้อความเป็นตัวเลขได้

ข้อความที่มีตัวเลขดังเช่น ("3.14") จะเปลี่ยนเป็นตัวเลข (เช่น 3.14)。

ข้อความว่างเปล่าจะเปลี่ยนเป็น 0。

ข้อความอื่นๆ จะเปลี่ยนเป็น NaN（Not a number，不是数字）。

Number("3.14")    // กลับมาเป็น 3.14
Number(" ")       // กลับมาเป็น 0
Number("")        // กลับมาเป็น 0
Number("99 88")   // กลับมาเป็น NaN

ในวิธีตัวเลขในบทความนี้ คุณจะหาวิธีที่สามารถใช้เปลี่ยนข้อความเป็นตัวเลขได้:

วิธี คำอธิบาย
parseFloat() แยกข้อความและกลับมาเป็นตัวเลขทศนิยม
parseInt() แยกข้อความและกลับมาเป็นตัวเลข

เดียวทาง + ตัวเครื่องหมาย

เดียวทาง + ตัวเครื่องหมายสามารถใช้เปลี่ยนค่าตัวแปรเป็นตัวเลขได้:

ตัวอย่าง

var y = "5";      // y คือข้อความ
var x = + y;      // x คือตัวเลข

ลองทดลองเอง

ถ้าไม่สามารถเปลี่ยนค่าตัวแปรเป็นตัวเลข จะยังเป็นตัวเลข แต่ค่าของมันคือ NaN（Not a number）：

ตัวอย่าง

var y = "Bill";   // y คือข้อความ
var x = + y;      // x คือตัวเลข (NaN)

ลองทดลองเอง

แปลงประกายเชิงรูปแบบเป็นตัวเลข

เมธอดโลก Number() ยังสามารถแปลงประกายเชิงรูปแบบเป็นตัวเลขด้วย。

Number(false)     // กลับค่า 0
Number(true)      // กลับค่า 1

แปลงวันที่เป็นตัวเลข

เมธอดโลก Number() ใช้ได้เพื่อแปลงวันที่เป็นตัวเลข。

d = new Date();
Number(d)

วิธีการใช้วันที่ getTime() เช่นเดียวกัน。

d = new Date();
d.getTime()

การแปลงประเภทข้อมูลโดยอัตโนมัติ

ถ้า JavaScript พยายามปฏิบัติต่อประเภทข้อมูล "ผิดพลาด" มันจะพยายามแปลงค่านี้เป็นประเภทข้อมูล "ถูกต้อง"

ผลลัพธ์ไม่จะเป็นที่คาดหวังของคุณเสมอ:

5 + null    // กลับค่า 5         เพราะ null ถูกแปลงเป็น 0
"5" + null  // กลับค่า "5null"   เพราะ null ถูกแปลงเป็น "null"
"5" + 2     // กลับค่า 52        เพราะ 2 ถูกแปลงเป็น "2"
"5" - 2     // กลับค่า 3         เพราะ "5" ถูกแปลงเป็น 5
"5" * "2"   // กลับค่า 10        เพราะ "5" และ "2" ถูกแปลงเป็น 5 และ 2

ลองทดลองเอง

การแปลงเป็นตัวอักษรโดยอัตโนมัติ

JavaScript จะเรียกใช้ตัวแปร toString() ฟังก์ชัน ขณะที่คุณพยายาม "ออก" วัตถุหรือตัวแปร:

document.getElementById("demo").innerHTML = myVar;
// ถ้า myVar = {name:"Fjohn"}  // toString คืนค่า "[object Object]"
// ถ้า myVar = [1,2,3,4]       // toString คืนค่า "1,2,3,4"
// ถ้า myVar = new Date()      // toString คืนค่า ""

ตัวเลขและประกายเชิงรูปแบบจะถูกการแปลงเป็นตัวอักษร แต่ไม่เห็นชัดเจน:

// ถ้า myVar = 123             // toString คืนค่า "123"
// ถ้า myVar = true            // toString คืนค่า "true"
// ถ้า myVar = false           // toString คืนค่า "false"

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

ตารางข้างล่างนี้ระบุผลลัพธ์การแปลงค่า JavaScript ต่างๆ ให้เป็นตัวเลข ตัวอักษร และตัววิสัย

ค่าต้นฉบับ การแปลงเป็นตัวเลข การแปลงเป็นตัวอักษร การแปลงเป็นลักษณะทางวิสัย ลองเล่น
false 0 "false" false ลองเล่น
true 1 "true" true ลองเล่น
0 0 "0" false ลองเล่น
1 1 "1" true ลองเล่น
"0" 0 "0" true ลองเล่น
"000" 0 "000" true ลองเล่น
"1" 1 "1" true ลองเล่น
NaN NaN "NaN" false ลองเล่น
Infinity Infinity "Infinity" true ลองเล่น
-Infinity -Infinity "-Infinity" true ลองเล่น
"" 0 "" false ลองเล่น
"20" 20 "20" true ลองเล่น
"twenty" NaN "twenty" true ลองเล่น
[ ] 0 "" true ลองเล่น
[20] 20 "20" true ลองเล่น
[10,20] NaN "10,20" true ลองเล่น
["twenty"] NaN "twenty" true ลองเล่น
["ten","twenty"] NaN "ten,twenty" true ลองเล่น
function(){} NaN "function(){}" true ลองเล่น
{ } NaN "[object Object]" true ลองเล่น
null 0 "null" false ลองเล่น
undefined NaN "undefined" false ลองเล่น

ค่าในเครื่องวางคำว่านำไปสู่ค่าของตัวนิยาม

ค่าแดงนำไปสู่ค่าที่ (บางครั้ง) แพทย์ระบุไม่ต้องการ