JavaScript类型转换


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


JavaScript 数据类型

在 JavaScript 中有 6 种不同的数据类型:

  • string

  • number

  • boolean

  • object

  • function

  • symbol

3 种对象类型:

  • Object

  • Date

  • Array

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

  • null

  • undefined


typeof 操作符

你可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。

实例

typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', 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

如果对象是 JavaScript Array 或 JavaScript Date ,我们就无法通过 typeof 来判断他们的类型,因为都是 返回 object。


constructor 属性

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

实例

"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:'John', 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) // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回


尝试一下 »

Number 方法 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() 返回字符串。

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

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

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

Date 方法 toString() 也有相同的效果。

实例

obj = new Date()
obj.toString() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

在 Date 方法 章节中,你可以查看更多关于日期转换为字符串的函数:

方法

描述

getDate()

从 Date 对象返回一个月中的某一天 (1 ~ 31)。

getDay()

从 Date 对象返回一周中的某一天 (0 ~ 6)。

getFullYear()

从 Date 对象以四位数字返回年份。

getHours()

返回 Date 对象的小时 (0 ~ 23)。

getMilliseconds()

返回 Date 对象的毫秒(0 ~ 999)。

getMinutes()

返回 Date 对象的分钟 (0 ~ 59)。

getMonth()

从 Date 对象返回月份 (0 ~ 11)。

getSeconds()

返回 Date 对象的秒数 (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()

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



一元运算符 +

Operator + 可用于将变量转换为数字:

实例

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


尝试一下 »

如果变量不能转换,它仍然会是一个数字,但值为 NaN (不是一个数字):

实例

var y = "John"; // 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):

原始值

转换为数字

转换为字符串

转换为布尔值

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

"Runoob"

NaN

"Runoob"

true

[ ]

0

""

true

[20]

20

"20"

true

[10,20]

NaN

"10,20"

true

["Runoob"]

NaN

"Runoob"

true

["Runoob","Google"]

NaN

"Runoob,Google"

true

function(){}

NaN

"function(){}"

true

{ }

NaN

"[object Object]"

true

null

0

"null"

false

undefined

NaN

"undefined"

false


检测数据类型:typeof 与 instanceof

typeof

typeof 用以获取一个变量或者表达式的类型,typeof 一般只能返回如下几个结果:

number,boolean,string,function(函数),object(NULL,数组,对象),undefined。

实例:

document.getElementById("demo").innerHTML = 

typeof "john" + "<br>" + 

typeof 3.14 + "<br>" +

typeof false + "<br>" +

typeof [1,2,3,4] + "<br>" +

typeof {name:'john', age:34};

尝试一下 »

我们可以使用 typeof 来获取一个变量是否存在,如 if(typeof a!="undefined"){},而不要去使用 if(a) 因为如果 a 不存在(未声明)则会出错。

正因为 typeof 遇到 null,数组,对象时都会返回 object 类型,所以当我们要判断一个对象是否是数组时。

或者判断某个变量是否是某个对象的实例则要选择使用另一个关键语法 instanceof

instanceof

可通过 instanceof 操作符来判断对象的具体类型,语法格式:

var result = objectName instanceof objectType

返回布尔值,如果是指定类型返回 true,否则返回 false:

例:

arr = [1,2,3];

if(arr instanceof Array){

    document.write("arr 是一个数组");

} else {

    document.write("arr 不是一个数组");

}

尝试一下 »

夜尽

   夜尽

  972***483@qq.com

4年前 (2017-11-16)

   Endl

  313***2538@qq.com

24

undefined 与 null 的区别:

表面上 undefined 与 null 都是什么都没有的意思,但是实际上 undefined 是未定义(就是变量没有初始化),null 是一个变量初始化了,但是什么值都没给,只给了一个空对象;进一步说,undefined 与 null是值相等,类型不相等。

Endl

   Endl

  313***2538@qq.com

3年前 (2018-08-14)

   Arcy

  hen***55@163.com

30

NaN 是一个特殊的数值,NaN 即非数值(Not a Number),这个数值用于本来要返回数值的操作数未返回数值的情况。

NaN 与任何值都不相等,包括 NaN 本身。

可以通过 isNaN() 方法来判断某个数值是否是NaN这个特殊的数,使用 isNaN() 方法会将传入的数值如果是非数值的会将其自动转换成数值类型,若能转换成数值类型,那么这个函数返回 false,若不能转换成数值类型,则这个数就是 NaN,即返回 true。

Arcy

   Arcy

  hen***55@163.com

3年前 (2019-01-31)

   渐漠

  763***666@qq.com

   参考地址

74

判断是否为数组。

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

return myArray.constructor.toString().indexOf("Array") > -1;这句话怎么解释?

1、myArray 是函数 isArray 的参数,这里调用函数的时候,会传来数组 fruits。

2、constructor 是一个属性,构造函数属性,不同类型的数据,会得到相应不同的值。因为 myArray 是个数组,这里的 myArray.constructor 的值就是 function Array() { [native code] }。(如果 myArray 是个字符串,myArray.constructor 的值就是function String() { [native code] }。还有 number,boolean,object,等等。)

3、toString() 是个方法,变字符串的方法,这里把 function Array() { [native code] } 变成字符串,为了后面好检索。

4、indexOf("Array") 是个方法,检索字符串,这里看字符串 function Array() { [native code] } 里有没有Array,有就返回首次出现的位置,是一个数值,这里是 9。如果出现在第一个字符,会返回 0。空格参与计数。如果没有找到,就返回 -1。只要 >-1,就说明有 Array,就能判断原来那个函数调用传来的 fruits 是一个数组。如果 myArray.constructor.toString().indexOf("Object")>-1,那么 myArray 就是一个 Object 对象。不过那样地话,这个参数的名字就没取好了,应该叫做 myObject。

渐漠

   渐漠

  763***666@qq.com

   参考地址

2年前 (2019-12-09)

   Kotori、Waifu

  747***886@qq.com

   参考地址

23

字符串转日期:

var str = "2019-12-25";

// 转换日期格式

str = str.replace(/-/g, '/'); // "2010/08/01";

// 创建日期对象

var date = new Date(str);

反之,日期类型转化为格式化的字符串:

//完整的格式化  

var time2 = new Date().format("yyyy-MM-dd hh:mm:ss");

Date.prototype.format = function (fmt) {

    var o = {

        "M+": this.getMonth() + 1,                 //月份 

        "d+": this.getDate(),                    //日 

        "h+": this.getHours(),                   //小时 

        "m+": this.getMinutes(),                 //分 

        "s+": this.getSeconds(),                 //秒 

        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 

        "S": this.getMilliseconds()             //毫秒 

    };

    //处理年份

    var reYear = /(y+)/; 

    var resultYear = reYear.exec(fmt);

    if (resultYear) 

    {

        var yearformatPart = resultYear[0];//匹配到的格式化字符

        var yearVal = (this.getFullYear() + "").substr(4 - yearformatPart.length);

        fmt = fmt.replace(yearformatPart, yearVal);

    }

    for (var k in o) {

        var re = new RegExp("(" + k + ")");

        var re = re.exec(fmt);

        if (re) {

            var Val = "" + o[k];//本次需要替换的数据 

            var formatPart = re[0];//匹配到的格式化字符

            var replaceVal = (formatPart.length == 1) ? (Val) : (("00" + Val).substr(Val.length));

            fmt = fmt.replace(formatPart, replaceVal);

        }

    }

    return fmt;

}


点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

卓越综合高中|卓越综合高中
卓越综合高中
安徽中源管业|安徽中源管业,安徽中源管业mpp电力管,安徽中源管业cpvc电力管,安徽中源管业pe穿线管,安徽中源管业电力管,安徽中源管业排水管,安徽中源管业通信管,安徽中源管业管材
安徽中源管业
易捷尔高职单招|易捷尔高职单招,易捷尔高职单招培训,单招分数线,单招录取分数线,高职单招学校分数线
易捷尔高职单招
开放大学|开放大学报名,开放大学报考,开放大学,什么是开放大学,开放大学学历,开放大学学费,开放大学报名条件,开放大学报名时间,开放大学学历,开放大学专业
开放大学
一年制中专|中专学历,中专是什么学历,中专是什么,中专有什么专业,中专升大专,一年制中专
一年制中专
自考本科|自考本科有用吗,自考文凭,自考本科文凭,自考文凭有用吗,自考本科文凭有用吗,自考文凭承认吗
自考本科
大理科技管理学校|大理科技管理中等职业技术学校,大理市科技管理中等职业技术学校
大理科技管理学校
中源管业|中源管业,中源管业公司,中源管业有限公司,中源管业电话,中源管业地址,中源管业电力管,中源管业mpp电力管,中源管业cpvc电力管,中源管业pe穿线管
中源管业

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部