前端开发：转换数据类型

前言

在前端开发过程中，关于数据的处理是非常重要的技能，不管是从后台获取到的数据还是需要提交给后台的数据，都要根据实际业务需求来进行二次处理，然后再进行使用。前端实际开发总关于数据类型的转换使用也是必备技能，尤其是在不确定数据类型的情况下，如果盲目操作就会引起不必要的问题。作为前端开发者应该都知道JS是一门弱类型的语言，即动态类型的语言，也就是变量类型不确定，在实际使用的时候要进行数据类型判断或者是数据类型转换处理，那么本篇博文就来分享一下关于JS中数据类型转换相关的知识点，总结一下，方便后期查阅使用。

JS的数据类型

首先来了解一下JS的数据类型，分为基本数据类型和引用数据类型。

1、基本数据类型：

Number：数字类型,
Boolean：布尔类型,
String：字符串类型，
null,
undefined,
symbol（ES6新增的），

注意：null虽然是基本数据类型，但输出的结果是Object是因为null被认为是空的对象引用。

2、引用数据类型：

array：数组，
Math：对象，
function：函数,
Date。

注意：函数不是基本数据类型，但是调用typeof后会出现function类型，那是因为函数是对象。但是也有一些特殊属性，因此利用typeof来区分函数和对象是有必要的。

typeof 操作符

可以通过使用 typeof 操作符来查看 JavaScript 变量的数据类型。具体示例如下所示：

typeof "Jason"                // 返回 stringtypeof 3.1415                 // 返回 numbertypeof NaN                    // 返回 numbertypeof false                  // 返回 booleantypeof [1,2,3,4]              // 返回 objecttypeof {name:'Jason', age:31}  // 返回 objecttypeof new Date()             // 返回 objecttypeof function () {}         // 返回 functiontypeof myPen                  // 返回 undefined (当 myPen 没有声明的时候)typeof null                   // 返回 object

注意：若对象是 JS的Array 或 JS的Date 类型，就无法通过 typeof 来判断它们的类型，因为都是返回object。

constructor属性

1、使用constructor 属性，可以返回所有JS变量的构造函数。

具体示例如下所示：

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

2、小结

可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array”)，也可以使用 constructor 属性来查看对象是否为日期 (包含字符串 "Date”)。

3、使用示例

示例一：

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

示例二：

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

示例三：检查对象是否是日期函数

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

JS类型转换

JS的变量可以转换为新变量或其他数据类型，可以通过使用JS函数或者通过JS自身自动转换。

1、字符串转数字

1⃣️ 通过使用全局方法 Number() 可以将字符串转换为数字。具体示例如下所示：

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

2⃣️使用一元运算符“+”将字符串转换为数字。具体示例如下所示：

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

3⃣️使用parseInt方法，把字符串转整型。

4⃣️使用parstFloat方法，把字符串转小数。

示例二：把变量为a的字符串6556转换成数字

var a='6556'; //字符串a//直接使用这种写法 a-0  ，（此方法同样适用于字符串转小数）var b = a-0; //输出结果为数字 6556

2、数字转字符串

1⃣️通过使用全局方法 String() 可以将数字转换为字符串，该方法可用于任何类型的数字、字母、变量、表达式。具体示例如下所示：

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

示例二：把变量为a的数字656转换成字符串

var a=656; //数字a//直接使用这种写法： a+''var b = a+'' //输出结果为字符串 '656'

2⃣️Number中的 toString() 方法也可以将数字转换为字符串。具体示例如下所示：

number.toString()(12345).toString()(100 + 235).toString()

3、布尔转字符串

1⃣️通过使用全局方法 String() 可以将布尔值转换为字符串。具体示例如下所示：

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

2⃣️Boolean 中的 toString() 方法也将布尔值转换为字符串。具体示例如下所示：

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

4、日期转字符串

1⃣️直接使用Date() 返回字符串。具体示例如下所示：

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

2⃣️通过使用全局方法 String() 可以将日期对象转换为字符串。具体示例如下所示：

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

3⃣️Date 中的 toString() 方法也可以将日期对象转换为字符串。

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

5、布尔转数字

通过使用全局方法 Number() 可以将布尔值转换为数字。具体示例如下所示：

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

6、日期转数字

1⃣️通过使用全局方法 Number() 可将日期转换为数字。具体示例如下所示：

dt = new Date();Number(dt)          // 返回结果 1404668127739

2⃣️使用日期方法 getTime() 也可将日期转换为数字。具体示例如下所示：

dt = new Date();dt.getTime()        // 返回结果  1404668127739

7、自动转换类型

当JS尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。具体示例如下所示：

6 + null    // 返回 6         null 转换为 0"6" + null  // 返回"6null"   null 转换为 "null""6" + 1     // 返回 "61"      1 转换为 "1" "6" - 1     // 返回 5         "6" 转换为 6

8、自动转换为字符串

1⃣️当想要输出一个对象或一个变量时，JS会自动调用变量的 toString() 方法。具体示例如下所示：

document.getElementById("test").innerHTML = person;person = {name:"Jason"}   // toString 转换为 "[object Object]"person = [1,2,3,4,5,6,7]       // toString 转换为 "11,2,3,4,5,6,7"person = new Date()          // toString 转换为 "Fri Jul 19 2022 09:08:55 GMT+0200"

2⃣️数字和布尔相互转换。具体示例如下所示：

person = 123456             // toString 转换为 "123456"person = true            // toString 转换为 "true"person = false           // toString 转换为 "false"

9、下面列出了将不同JS的值转换为数字、字符串和布尔的结果

具体如下图所示：

最后

通过本文关于前端开发中转换数据类型的用法汇总的介绍，如果认真阅读并且实践示例，尤其是从事前端开发不久的开发者来说尤为重要，是一篇值得阅读的文章，且在实际开发中也是必用知识点，所以说这个知识点是必备的，重要性就不在赘述。欢迎关注，一起交流，共同进步。