JavaScript 基础教程JavaScript 简介JavaScript 用法JavaScript 输出JavaScript 语法JavaScript 语句JavaScript 注释JavaScript 变量JavaScript 数据类型JavaScript 对象JavaScript 函数JavaScript 作用域JavaScript 事件JavaScript 字符串JavaScript 运算符JavaScript 比较和逻辑运算符JavaScript if...else 语句JavaScript switch 语句JavaScript for 循环JavaScript while 循环JavaScript break 和 continue 语句JavaScript typeof, null, undefinedJavaScript 类型转换JavaScript 正则表达式JavaScript 错误throw try catchJavaScript 调试JavaScript 变量提升JavaScript 严格模式 (use strict)JavaScript 使用误区JavaScript 表单JavaScript 表单验证JavaScript 验证 APIJavaScript 保留关键字JavaScript JSONjavascript :void(0) 含义JavaScript 代码规范JavaScript 函数定义JavaScript 函数参数JavaScript 函数调用JavaScript 闭包JavaScript HTML DOMJavaScript DOM- 改变 HTMLJavaScript DOM - 改变 CSSJavaScript HTML DOM 事件JavaScript DOM EventListenerJavaScript DOM 元素(节点)JavaScript 对象类型JavaScript Number 对象JavaScript 字符串(String)对象JavaScript Date 对象JavaScript Array 对象JavaScript Boolean 对象JavaScript Math 对象JavaScript RegExp 对象JavaScript window 对象JavaScript window.screen 对象JavaScript window.location 对象JavaScript window.history 对象JavaScript window.navigator 对象JavaScript 弹窗JavaScript 计时事件JavaScript CookieJS中的if和switch该如何选择?JS优化多分支结构JS中的while和for循环该如何选择?JS优化循环结构JS输出杨辉三角JS定义字符串(3种方式)JS获取字符串长度JS字符串拼接/连接(3种方式)JS字符串查找(6种方法)JS截取字符串JS字符串替换replace()JS字符串大写小写转换JS字符串比较大小JS字符串和数组之间的转换JS给字符串添加HTML标签JS去除字符串前后空格JS Unicode编码和解码JS Base64编码和解码JS在接收表单数据时过滤特殊字符JS自定义编码和解码方案

JavaScript 类型转换

JavaScript 方法 Number() 转换为数字, String() 转换为字符串, Boolean() 转化为布尔值


JavaScript 数据类型

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

  1. string
  2. number
  3. boolean
  4. object
  5. function

3 种对象类型

  1. Object
  2. Date
  3. Array

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

  1. null
  2. 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 null                  // 返回 object

typeof myCar  // 返回 undefined (如果 myCar 没有声明)

需要注意的是

  1. NaN 的数据类型是 number
  2. 数组(Array) 的数据类型是 object
  3. 日期(Date) 的数据类型为 object
  4. null 的数据类型是 object
  5. 未定义变量的数据类型为 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 变量可以转换为新变量或其它数据类型

  1. 通过使用 JavaScript 函数
  2. 通过 JavaScript 自身自动转换


将数字转换为字符串

全局方法 String() 可以将数字转换为字符串

该方法可用于任何类型的数字,字母,变量,表达式

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

Number 方法 toString() 也是有同样的效果

x.toString()(123).toString()(100 + 23).toString()
方法描述
toExponential()把对象的值转换为指数计数法
toFixed()把数字转换为字符串,结果的小数点后有指定位数的数字
toPrecision()把数字格式化为指定的长度

将布尔值转换为字符串

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

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

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

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


将日期转换为字符串

Date() 用于返回字符串

Date() // 返回 Sat Jan 06 2018 11:41:12 GMT+0800 (CST)

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

String(new Date()) // 返回 Sat Jan 06 2018 11:41:12 GMT+0800 (CST)

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

var obj = new Date()
obj.toString() // 返回 Sat Jan 06 2018 11:41:12 GMT+0800 (CST)
方法描述
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
方法描述
parseFloat()解析一个字符串,并返回一个浮点数
parseInt()解析一个字符串,并返回一个整数

一元运算符 +

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

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)          // 返回 1515210393662

日期方法 getTime() 也有相同的效果

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

一元运算符 + 也具有相同的效果

d = new Date();
+d; // 返回 1515210393662

自动转换类型

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

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

数字和布尔值也经常相互转换

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

链接: https://fly63.com/course/7_489