JavaScript 类型转换

目录

    显示目录

  • 将字符串转换为数字

  • 将数字转换为字符串

  • 将日期转换为数字

  • 将数字转换为日期

  • 将布尔值转换为数字

  • 将数字转换为布尔值

JavaScript 类型转换

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>

数字方法

在数字方法一章中，您 会发现更多可用于将字符串转换为 数字：

Method

描述

Number()

返回一个从其参数转换而来的数字

parseFloat()

解析字符串并返回浮点数

parseInt()

解析一个字符串并返回一个整数

一元 + 运算符

一元 + 运算符可用于 将变量转换为数字：

例子

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>

更多方法

在数字方法一章中，您 会发现更多可用于将数字转换为 字符串：

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)"

在日期方法一章中，您 会发现更多可用于将日期转换为 字符串：

getDate()

获取数字形式的日期 (1-31)

getDay()

获取工作日的数字 (0-6)

getFullYear()

获取四位数年份 (yyyy)

getHours()

获取小时 (0-23)

getMilliseconds()

获取毫秒（0-999）

getMinutes()

获取分钟 (0-59)

getMonth()

获取月份 (0-11)

getSeconds()

获取秒数 (0-59)

getTime()

获取时间（自 1970 年 1 月 1 日以来的毫秒数）

将布尔值转换为数字

全局方法 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

转换为数字：

0

转换为字符串：

"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

转换为数字：

1

转换为字符串：

"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

转换为数字：

0

转换为字符串：

"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

转换为数字：

1

转换为字符串：

"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

转换为字符串：

"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"

转换为数字：

0

转换为字符串：

"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

转换为字符串：

"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>

原始值：

""

转换为数字：

0

转换为字符串：

""

转换为布尔值：

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

转换为字符串：

"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>

原始值：

[ ]

转换为数字：

0

转换为字符串：

""

转换为布尔值：

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

转换为字符串：

"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

转换为数字：

0

转换为字符串：

"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>

引号中的值表示字符串值。

红色值表示（某些）程序员可能不期望的值。