首页 > JS > JavaScript基础

JavaScript 类型转换

JavaScript基础 2022-04-25 01:34:06小码哥的IT人生shichen

JavaScript 类型转换

Number() 转换数值，String() 转换字符串，Boolean() 转换布尔值。

JavaScript 数据类型

JavaScript 中有五种可包含值的数据类型：

字符串（string）
数字（number）
布尔（boolean）
对象（object）
函数（function）

有三种对象类型：

对象（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"

完整实例：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof 运算符</h2>
<p>typeof 运算符返回变量、对象、函数或表达式的类型。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
  typeof "john" + "<br>" +
  typeof 3.14 + "<br>" +
  typeof NaN + "<br>" +
  typeof false + "<br>" +
  typeof [1,2,3,4] + "<br>" +
  typeof {name:'john', age:34} + "<br>" +
  typeof new Date() + "<br>" +
  typeof function () {} + "<br>" +
  typeof myCar + "<br>" +
  typeof null;
</script>
</body>
</html>

运行结果：

Javascript typeof 运算符

typeof 运算符返回变量、对象、函数或表达式的类型。

string
number
number
boolean
object
object
object
function
undefined
object

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请注意：

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

完整实例：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript constructor 属性</h2>
<p>constructor 属性返回变量或对象的构造器函数。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
  "john".constructor + "<br>" +
  (3.14).constructor + "<br>" +
  false.constructor + "<br>" +
  [1,2,3,4].constructor + "<br>" +
  {name:'john', age:34}.constructor + "<br>" +
  new Date().constructor + "<br>" +
  function () {}.constructor;
</script>
</body>
</html>

运行结果：

Javascript constructor 属性

constructor 属性返回变量或对象的构造器函数。

function String() { [native code] }
function Number() { [native code] }
function Boolean() { [native code] }
function Array() { [native code] }
function Object() { [native code] }
function Date() { [native code] }
function Function() { [native code] }

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

示例代码：

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

完整实例：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数组</h2>
<p>这个“自制的” isArray() 函数在数组上使用时返回 true：</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
  return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>
</body>
</html>

运行结果：

Javascript 数组

这个“自制的” isArray() 函数在数组上使用时返回 true：

true

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

示例代码：

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

完整实例：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数组对象</h2>
<p>这个“自制的” isArray() 函数在数组上使用时返回 true：</p>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
  return myArray.constructor === Array;
}
</script>
</body>
</html>

运行结果：

Javascript 数组对象

这个“自制的” isArray() 函数在数组上使用时返回 true：

true

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

示例代码：

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

完整实例：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 日期对象</h2>
<p>这个“自制的” isDate() 函数在日期上使用时返回 true：</p>
<p id="demo"></p>
<script>
var myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);
function isDate(myDate) {
  return myDate.constructor.toString().indexOf("Date") > -1;
}
</script>
</body>
</html>

运行结果：

Javascript 日期对象

这个“自制的” isDate() 函数在日期上使用时返回 true：

true

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

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

示例代码：

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

完整实例：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 日期对象</h2>
<p>这个“自制的” isDate() 函数在日期上使用时返回 true：</p>
<p id="demo"></p>
<script>
var myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);
function isDate(myDate) {
  return myDate.constructor === Date;
}
</script>
</body>
</html>

运行结果：

Javascript 日期对象

这个“自制的” isDate() 函数在日期上使用时返回 true：

true

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

JavaScript 类型转换

JavaScript 变量能够被转换为新变量以及另一种数据类型：

通过使用 JavaScript 函数
通过 JavaScript 本身自动转换

把数值转换为字符串

全局方法 String() 能够把数字转换为字符串。

它可用于任意类型的数字、文字、变量或表达式：

示例代码：

String(x)         // 从数值变量 x 返回字符串
String(123)       // 从数值文本 123 返回字符串
String(100 + 23)  // 从表达式中的数值返回字符串

完整实例：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String() 方法</h2>
<p>String() 方法把数字转换为字符串。</p>
<p id="demo"></p>
<script>
var x = 123;
document.getElementById("demo").innerHTML =
  String(x) + "<br>" +
  String(123) + "<br>" +
  String(100 + 23);
</script>
</body>
</html>

运行结果：

Javascript String() 方法

String() 方法把数字转换为字符串。

123
123
123

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

数字方法 toString() 同理。

示例代码：

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

完整实例：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数字方法</h2>
<p>toString() 方法把数字转换为字符串。</p>
<p id="demo"></p>
<script>
var x = 123;
document.getElementById("demo").innerHTML =
  x.toString() + "<br>" +
   (123).toString() + "<br>" +
   (100 + 23).toString();
</script>
</body>
</html>

运行结果：

Javascript 数字方法

toString() 方法把数字转换为字符串。

123
123
123

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

在数字方法这一章，您将学到更多可用于将数值转换为字符串的方法：

方法	描述
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()	获得时间（1970 年 1 月 1 日以来的毫秒）

把字符串转换为数值

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

完整实例：

<h1>Code not loaded</h1>

运行结果：

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

如果无法转换变量，则仍会成为数字，但是值为 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

完整实例：

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = [];
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>

运行结果：

5
5null
52
3
10
2.5

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

自动字符串转换

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

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

红色的值指示了（某些）程序员也许不希望的值。

测试示例：

<!DOCTYPE html>
<html>
<body>
<p>把数字 false 转换为其他类型：</p>
<p id="demo" style="font-family:courier"></p>
<script>
var x = false;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>
</body>
</html>

运行结果：

把数字 false 转换为其他类型：

Number : 0
String : false
Boolean: false

PS：读者可以使用上述表中对应的数值替换测试代码中的变量，测试运行结果。

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

上一篇JavaScript typeof 运算符下一篇JavaScript 位运算符

JavaScript 类型转换

JavaScript 类型转换

JavaScript 数据类型

typeof 运算符

示例代码：

完整实例：

typeof 的数据类型

constructor 属性

示例代码：

完整实例：

示例代码：

完整实例：

示例代码：

完整实例：

示例代码：

完整实例：

示例代码：

完整实例：

JavaScript 类型转换

把数值转换为字符串

示例代码：

完整实例：

示例代码：

完整实例：

把布尔转换为字符串

把日期转换为字符串

示例代码：

把字符串转换为数值

一元 + 运算符

示例代码：

完整实例：

示例代码：

把布尔转换数值

把日期转换为数字

自动类型转换

完整实例：

自动字符串转换

JavaScript 类型转换表

测试示例：

相关阅读

tags标签云

JS栏目导航

最新文章

热门文章