JavaScript 类型转换 -HTML教程 -css5.net


JavaScript 类型转换


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


一、JavaScript 数据类型

在 JavaScript 中有 5 种数据类型:

  • 字符串:string

  • 数字:number

  • 布尔:boolean

  • 对象:object

  • 函数:function

还有3种对象类型:

  • 对象:Object

  • 日期:Date

  • 数组:Array

不包含任何值的数据类型:

  • null

  • undefined


二、typeof 运算符

你可运用 typeof 运算符查看 JavaScript 变量的数据类型。

示例代码

typeof "css5"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'css5', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (声明 myCar 才有声明)
typeof null                   // 返回 object


演示一下

请提示注意:

  • NaN 数据类型是数值(number)

  • 数组(array)数据类型对象(object)

  • 日期(Date)数据类型对象(object)

  • null 数据类型对象(object)

  • 未定义变量的数据类型为 undefined


三、constructor 属性

constructor 属性返回所有 JavaScript 变量构造函数。

示例代码

"css5".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'css5', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }


演示一下

你可运用 constructor 属性确认某个对象能否为数组(包含单词 "Array"):

示例代码

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


演示一下

你可运用 constructor 属性确认对象能否为日期 (包含字符串 "Date"):

示例代码

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


演示一下



四、JavaScript 类型转换

JavaScript 变量能够转换为新变量或其他另一种数据类型:

  • 通过使用 JavaScript 函数

  • 通过 JavaScript 本身自动转换


五、数字转换为字符串

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

此方法可用于随意类型的数字,字母,变量等表达式:

示例代码

String(x)         // x转换为字符串并返回
String(123)       // 转换为字符串并返回
String(100 + 23)  // 表达式转换为字符串并返回


演示一下

JavaScript 数字方法 toString() 也是一样的效果。

示例代码

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


演示一下

在 数字(Number) 方法这篇中,你能够找到更多数字转换字符串的方法:

方法描述
toExponential()对象的值,转变为指数计数法。
toFixed()使用指定位数的小数。
toPrecision()数字指定的长度。



六、布尔值转换为字符串

全局方法 String()  可把布尔值转换为字符串。

String(false)        // 返回 "false"
String(true)         // 返回 "true"

布尔(Boolean) 方法 toString() 也是相同。

false.toString()     // 返回 "false"
true.toString()      // 返回 "true"



七、日期转换为字符串

Date() 是返回字符串。

String(Date())      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (中国标准时间)

全局方法 String() 可把日期对象转换为字符串。

String(new Date())      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (中国标准时间)

Date 方法 toString() 也是一样。

示例代码

obj = new Date()
obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (中国标准时间)

在 Date 方法 这篇中,你可更多的日期转换为字符串的函数方法:

方法描述
getDate()获取一个月中的某一天 (1 ~ 31)。
getDay()获取一周中的某一天 (0 ~ 6)。
getFullYear()获取年月日。
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(不是数字)。

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

在 数字(Number) 方法这篇中,你能够找到更多关于字符串转为数字的方法:

方法描述
parseFloat()字符串解析返回浮点数。
parseInt()字符串解析并返回整数。



九、一元+运算符

一元 + 变量转换为数字:

示例代码

var y = "5";      // y 是一个字符串
var x = + y;      // x 是一个数字


演示一下

假如不能转换变量,它仍会成为数字,但值为 NaN (Not a number):

示例代码

var y = "csss5";   // y 是一个字符串
var x = + y;      // x 是一个数字 (NaN)


演示一下



十、布尔值转换为数字

全局方法 Number() 可能把布尔值转换为数字。

Number(false)     // 返回 0
Number(true)      // 返回 1



十一、日期转换为数字

全局方法 Number() 也可把日期转换为数字。

d = new Date();
Number(d)          // 返回 1404568027739

日期方法 getTime() 也是一样的。

d = new Date();
d.getTime()        // 返回 1404568027739



十二、自动转换类型

当 JavaScript 尝试操作某个 "错误" 的数据类型时,将自动转换为 "正确" 的数据类型。

下面是输出结果,但不是你想要的:

5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1"  
"5" - 1     // 返回 4         "5" 转换为 5



十三、自动转换为字符串

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 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

数字和布尔值也会被转换:

myVar = 123             // toString 转换为 "123"
myVar = true            // toString 转换为 "true"
myVar = false           // toString 转换为 "false"

不同数值转换为数字(Number), 字符串(String), 布尔值(Boolean):

原始值转换为数字转换为字符串转换为布尔值示例代码
false0"false"false演示一下
true1"true"true演示一下
00"0"false演示一下
11"1"true演示一下
"0"0"0"true演示一下
"000"0"000"true演示一下
"1"1"1"true演示一下
NaNNaN"NaN"false演示一下
InfinityInfinity"Infinity"true演示一下
-Infinity-Infinity"-Infinity"true演示一下
""0""false演示一下
"20"20"20"true演示一下
"Runoob"NaN"css5"true演示一下
[ ]0""true演示一下
[20]20"20"true演示一下
[10,20]NaN"10,20"true演示一下
["Runoob"]NaN"css5"true演示一下
["Runoob","Google"]NaN"css5,css5.net"true演示一下
function(){}NaN"function(){}"true演示一下
{ }NaN"[object Object]"true演示一下
null0"null"false演示一下
undefinedNaN"undefined"false演示一下



相关参考文章

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved