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

สารบัญ

แสดงสารบัญ

การแปลงสตริงให้เป็นตัวเลข
การแปลงตัวเลขเป็นสตริง
การแปลงวันที่เป็นตัวเลข
การแปลงตัวเลขเป็นวันที่
การแปลงบูลีนเป็นตัวเลข
การแปลงตัวเลขเป็นบูลีน

การแปลงประเภทจาวาสคริปต์

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

โดยการใช้ฟังก์ชันจาวาสคริปต์
อัตโนมัติ ด้วย JavaScript เอง

การแปลงสตริงให้เป็นตัวเลข

วิธีการทั่วโลก Number() แปลงตัวแปร (หรือค่า) ให้เป็นตัวเลข

สตริงตัวเลข (เช่น "3.14") แปลงเป็นตัวเลข (เช่น 3.14)

สตริงว่าง (เช่น "") แปลงเป็น 0

สตริงที่ไม่ใช่ตัวเลข (เช่น "John") จะแปลงเป็น NaN (ไม่ใช่ตัวเลข)

ตัวอย่าง

สิ่งเหล่านี้จะแปลง:

Number("3.14")
Number(Math.PI)
Number(" ")
Number("")

สิ่งเหล่านี้จะไม่แปลง:

Number("99 88")
Number("John")

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The Number() Method</h2>

<p>The Number() metod converts a variable (or value) into a number:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Number("3.14") + "<br>" +
Number(Math.PI) + "<br>" +
Number("    ") + "<br>" +
Number("") + "<br>" +
Number("99 88") + "<br>" +
Number("John") + "<br>";
</script>

</body>
</html>

วิธีการจำนวน

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

Method: คำอธิบาย
Number(): ส่งกลับตัวเลขที่แปลงจากอาร์กิวเมนต์
parseFloat(): แยกวิเคราะห์สตริงและส่งกลับตัวเลขทศนิยม
parseInt(): แยกวิเคราะห์สตริงและส่งกลับจำนวนเต็ม

Unary + ตัวดำเนินการ

สามารถใช้ unary + โอเปอเรเตอร์ ได้ แปลงตัวแปรเป็นตัวเลข:

ตัวอย่าง

let y = "5";     
// y is a string
let x = + y;      
// x is a number

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript typeof Operator</h2>

<p>The typeof operator returns the type of a variable or expression:</p>

<p id="demo"></p>

<script>
let y = "5";
let x = + y;
document.getElementById("demo").innerHTML = typeof y + "<br>" + typeof x;
</script>

</body>
</html>

ถ้า ไม่สามารถแปลงตัวแปรได้ แต่จะยังคงกลายเป็นตัวเลข แต่มีค่า NaN (ไม่ใช่ตัวเลข):

ตัวอย่าง

let y = "John";  
// y is a string
let x = + y;      // x is a number (NaN)

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript typeof Operator</h2>

<p>The typeof operator returns the type of a variable or expression:</p>

<p id="demo"></p>

<script>
let y = "John";
let x = + y;
document.getElementById("demo").innerHTML = typeof y + "<br>" + typeof x;
</script>

</body>
</html>

การแปลงตัวเลขเป็นสตริง

วิธีการสากล String() สามารถแปลงตัวเลขเป็นสตริงได้

สามารถใช้กับตัวเลข ตัวอักษร ตัวแปร หรือนิพจน์ประเภทใดก็ได้:

ตัวอย่าง

String(x)         // returns a string from a number variable x
 String(123)       // returns a string from a number literal 123
 String(100 + 23)  // returns a string from a number from an expression

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript String() Method</h2>

<p>The String() method can convert a number to a string.</p>

<p id="demo"></p>

<script>
let x = 123;
document.getElementById("demo").innerHTML =
  String(x) + "<br>" +
  String(123) + "<br>" +
  String(100 + 23);
</script>
</body>
</html>

วิธีการ Number toString() ทำเช่นเดียวกัน

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Methods</h2>

<p>The toString() method converts a number to a string.</p>

<p id="demo"></p>

<script>
let x = 123;
document.getElementById("demo").innerHTML =
  x.toString() + "<br>" +
   (123).toString() + "<br>" +
   (100 + 23).toString();
</script>

</body>
</html>

วิธีการเพิ่มเติม

ในบท Number Methods คุณ จะพบวิธีการเพิ่มเติมที่สามารถใช้แปลงตัวเลขเป็นได้ สตริง:

toExponential(): ส่งกลับสตริง โดยมีตัวเลขปัดเศษและเขียนโดยใช้สัญลักษณ์เอ็กซ์โปเนนเชียล
toFixed(): ส่งกลับสตริงโดยมีตัวเลขปัดเศษและเขียนด้วยจำนวนทศนิยมที่ระบุ
toPrecision(): ส่งกลับสตริงโดยมีตัวเลขเขียนตามความยาวที่ระบุ

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

สามารถใช้เมธอดสากล Number() เพื่อแปลงวันที่เป็น ตัวเลข

d = new Date();
Number(d)          // returns 1404568027739

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

d = new Date();
d.getTime()        // returns 1404568027739

การแปลงวันที่เป็นสตริง

วิธีการสากล String() สามารถแปลงวันที่เป็น สตริง

 String(Date())  // returns "Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)"

เมธอด Date toString() ทำเช่นเดียวกัน

ตัวอย่าง

 Date().toString()  // returns "Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)"

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

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

การแปลงบูลีนเป็นตัวเลข

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

Number(false)     // returns 0
Number(true)      // returns 1

การแปลงบูลีนเป็นสตริง

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

String(false)      // returns "false"
String(true)       // returns "true"

วิธีการบูลีน toString() ทำเช่นเดียวกัน

false.toString()   // returns "false"
  true.toString()    // returns "true"

การแปลงประเภทอัตโนมัติ

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

ผลลัพธ์ไม่ใช่สิ่งที่คุณคาดหวังเสมอไป:

5 + null    // returns 5         because null is converted to 0
"5" + null  // returns "5null"   because null is converted to "null"
"5" + 2     // returns 
    "52"      because 2 is converted to "2"
 "5" - 2     // returns 3         because "5" is converted to 5
"5" * "2"   // returns 
    10        because "5" and "2" are 
    converted to 5 and 2

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
(5 + null) + "<br>"  +
("5" + null) + "<br>" +
("5" + 2) + "<br>" +
("5" - 2) + "<br>" +
("5" * "2") + "<br>" +
("5" / "2") + "<br>"
</script>

</body>
</html>

การแปลงสตริงอัตโนมัติ

JavaScript เรียกใช้ฟังก์ชัน toString() ของตัวแปรโดยอัตโนมัติเมื่อคุณลอง เพื่อ "ส่งออก" วัตถุหรือตัวแปร:

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"}  // toString converts to "[object Object]"
// if myVar = [1,2,3,4]       // toString converts to "1,2,3,4"
// if myVar = new Date()      // toString converts to "Fri Jul 18 2014 09:08:55 GMT+0200"

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

// if myVar = 123             // toString converts to "123"
// if myVar = true            // toString converts to "true"
// if myVar = false           // toString converts to "false"

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

ตารางนี้แสดงผลลัพธ์ของการแปลงค่า JavaScript ที่แตกต่างกันเป็นตัวเลข สตริง และบูลีน:

ค่าเดิม:

false

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

แปลงเป็นสตริงแล้ว:

"false"

แปลงเป็นบูลีนแล้ว:

false

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting false to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = false;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

true

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

แปลงเป็นสตริงแล้ว:

"true"

แปลงเป็นบูลีนแล้ว:

true

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting true to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = true;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

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

แปลงเป็นสตริงแล้ว:

"0"

แปลงเป็นบูลีนแล้ว:

false

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the number 0 to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = 0;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

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

แปลงเป็นสตริงแล้ว:

"1"

แปลงเป็นบูลีนแล้ว:

true

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the number 1 to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = 1;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

"0"

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

แปลงเป็นสตริงแล้ว:

"0"

แปลงเป็นบูลีนแล้ว:

true

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the string "0" to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "0";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

"000"

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

แปลงเป็นสตริงแล้ว:

"000"

แปลงเป็นบูลีนแล้ว:

true

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the string "000" to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "000";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

"1"

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

แปลงเป็นสตริงแล้ว:

"1"

แปลงเป็นบูลีนแล้ว:

true

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the string "1" to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = 1;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

NaN

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

NaN

แปลงเป็นสตริงแล้ว:

"NaN"

แปลงเป็นบูลีนแล้ว:

false

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting NaN to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = NaN;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

Infinity

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

Infinity

แปลงเป็นสตริงแล้ว:

"Infinity"

แปลงเป็นบูลีนแล้ว:

true

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting Infinity to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = Infinity;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

-Infinity

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

-Infinity

แปลงเป็นสตริงแล้ว:

"-Infinity"

แปลงเป็นบูลีนแล้ว:

true

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting -Infinity to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = -Infinity;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

""

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

แปลงเป็นสตริงแล้ว:

""

แปลงเป็นบูลีนแล้ว:

false

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting an empty string to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

"20"

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

แปลงเป็นสตริงแล้ว:

"20"

แปลงเป็นบูลีนแล้ว:

true

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting a numeric string to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "20";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

NaN

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

"twenty"

แปลงเป็นสตริงแล้ว:

"twenty"

แปลงเป็นบูลีนแล้ว:

true

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting a text string to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "twenty";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

[ ]

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

แปลงเป็นสตริงแล้ว:

""

แปลงเป็นบูลีนแล้ว:

true

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<p>Converting an empty array to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = [];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

[20]

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

แปลงเป็นสตริงแล้ว:

"20"

แปลงเป็นบูลีนแล้ว:

true

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<p>Converting an array with one numeric element to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = [20];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

[10,20]

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

NaN

แปลงเป็นสตริงแล้ว:

"10,20"

แปลงเป็นบูลีนแล้ว:

true

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<p>Converting an array with two numeric elements to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = [10,20];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

["twenty"]

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

NaN

แปลงเป็นสตริงแล้ว:

"twenty"

แปลงเป็นบูลีนแล้ว:

true

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<p>Converting an array with one string element to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = ["twenty"];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

["ten","twenty"]

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

NaN

แปลงเป็นสตริงแล้ว:

"ten,twenty"

แปลงเป็นบูลีนแล้ว:

true

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<p>Converting an array with two string element to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = ["ten","twenty"];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

function(){}

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

NaN

แปลงเป็นสตริงแล้ว:

"function(){}"

แปลงเป็นบูลีนแล้ว:

true

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting a function to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
const x = function(){};
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

{ }

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

NaN

แปลงเป็นสตริงแล้ว:

"[object Object]"

แปลงเป็นบูลีนแล้ว:

true

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting an object to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
const x = {};
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

null

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

แปลงเป็นสตริงแล้ว:

"null"

แปลงเป็นบูลีนแล้ว:

false

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting null to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = null;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าเดิม:

undefined

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

NaN

แปลงเป็นสตริงแล้ว:

"undefined"

แปลงเป็นบูลีนแล้ว:

false

ลองเลย →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting undefined to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = undefined;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>

ค่าในเครื่องหมายคำพูดบ่งบอกถึงค่าสตริง

ค่าสีแดง บ่งบอกถึงค่า (บางส่วน) ที่โปรแกรมเมอร์อาจไม่คาดหวัง