JavaScript数据类型转换简单方法举例

更新时间：2023年12月14日 11:54:07 作者：杨得江-君临天下wyj

JavaScript是一种无类型语言，但同时JavaScript提供了一种灵活的自动类型转换的处理方式,下面这篇文章主要给大家介绍了关于JavaScript数据类型转换的相关资料,需要的朋友可以参考下

一、类型转换简介

所谓的类型转换，就是将一种数据类型转换为另外一种数据类型，例如上一节课说到的，如果一个数字与一个字符串相加，JavaScript会自动将数字转换为字符串，然后再与另外一个字符串相加（隐式类型转换）。

我们都知道，JavaScript是一种弱类型的语言，这一点区别于传统编程语言（如C和Java）。虽然在运算时，JavaScript会自动进行类型转换，但是为了避免自动转换或不转换产生的不良后果，有时候我们需要进行显式的类型转换。

隐式类型转换指的是JavaScript自动进行的类型转换，显式类型转换指的是我们手动用代码强制进行的类型转换。

1、字符串型转换为数值型

在JavaScript中，将字符串型数据转换为数值型数据有parseInt()和parseFloat()这2种方法。其中，parseInt()可以将字符串转换为整型数据；parseFloat()可以将字符串转换为浮点型数据。

语法：

parseInt()  //将字符串型转换为整型
parseFloat()  //将字符串型转换为浮点型

说明：将字符串型转换为整型，前提是字符串一定要是数值字符串。那什么叫数值字符串呢？“123”、“3.1415”这些只有数字的字符串就是数值字符串，而“hao123”、“360cn”等就不是数值字符串。

举例：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var m=parseInt("3.14")+10;
        var n=parseFloat("3.14")+10;
        document.write(m+"<br/>");
        document.write(n);
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：

分析：parseInt("3.14")的结果是3，而parseFloat("3.14")的结果是3.14。大家好好理解一下。

2、数值型转换为字符串型

在JavaScript中，将数值型数据（整型或浮点型）转换为字符串，都是使用toString()方法。

语法：

.toString()

举例：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var n=3.1415;
        var str=n.toString()+926;
        var num=n+926;
        document.write(str+"<br/>");
        document.write(num);
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果如下：

分析：这个例子虽然简单，不过涉及知识也不少。大家好好琢磨一下，也是非常值得思考的一个例子。

记住，算术运算符的两边必须都是数值，若在“+”运算中存在字符或字符串，则该表达式将是字符串表达式。因为JavaScript会自动将数值型数据转换成字符串型数据。

类型转换虽然内容比较少，但是在实际开发中，我们会经常要用到的。

二、JavaScript中数据类型转换函数总结

在JavaScript中，可以使用一些内置函数将一个数据类型转换为另一个数据类型。这些内置函数包括toString()、parseInt()、parseFloat()和Number()。

toString()

toString()方法可以将数字、字符串和布尔值转换为字符串类型。例如：

var num = 123;
var str = num.toString(); //将数字转换为字符串
console.log(typeof str); //输出: string

var bool = true;
var str = bool.toString(); //将布尔值转换为字符串
console.log(typeof str); //输出: string

parseInt()和parseFloat()

parseInt()和parseFloat()方法可以将字符串转换为数字类型。parseInt()方法将字符串转换为整数类型，而parseFloat()方法将字符串转换为浮点数类型。例如：

var str = "123";
var num = parseInt(str); //将字符串转换为整数
console.log(typeof num); //输出: number

var str = "3.14";
var num = parseFloat(str); //将字符串转换为浮点数
console.log(typeof num); //输出: number

注意：如果不能成功将字符串转换为数字类型，则会返回NaN（非数值）。例如：

var str = "abc";
var num = parseInt(str); //将字符串转换为整数，但是失败
console.log(num); //输出: NaN

Number()

Number()方法可以将任何数据类型都转换为数字类型。例如：

var str = "123";
var num = Number(str); //将字符串转换为数字
console.log(typeof num); //输出: number

var bool = true;
var num = Number(bool); //将布尔值转换为数字
console.log(typeof num); //输出: number

var obj = {a: 1};
var num = Number(obj); //将对象转换为数字，但是失败
console.log(num); //输出: NaN

需要注意的是，在将字符串转换为数字时，Number()方法会尝试将字符串转换为整数或浮点数。如果转换失败，则返回NaN。

在进行数据类型转换时，需要注意可能会导致意料之外的结果。例如，将字符串转换为数字时，如果字符串中包含非数字字符，则会返回NaN。因此，在进行类型转换之前，应该先进行数据类型的检查以避免错误。

总结

到此这篇关于JavaScript数据类型转换的文章就介绍到这了,更多相关JS数据类型转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript中的继承之类继承
在JS中继承是一个非常复杂的话题，比其他任何面向对象语言中的继承都复杂得多。接下来通过本文给大家介绍JavaScript中的继承之类继承，感兴趣的朋友一起看看吧
2016-05-05
微信小程序学习之wxs使用教程
这篇文章主要给大家介绍了关于微信小程序学习之wxs使用教程的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
element el-input 删除边框的实现
本文主要介绍了element el-input 删除边框的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
JavaScript BASE64算法实现(完美解决中文乱码)
这篇文章主要介绍了JavaScript BASE64算法实现(完美解决中文乱码),先用escape()对中文进行编码.然后再进行base64编码. 解码时,再加入()对中文进行解码,这样就可以避免中文乱码问题
2017-01-01
js截取小数点后几位的写法
截取小数点后几位的方法有很多，下面为大家介绍下使用js是如何实现的
2013-11-11
js禁止浏览器页面后退功能的实例(推荐)
下面小编就为大家带来一篇js禁止浏览器页面后退功能的实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
layui固定下拉框的显示条数(有滚动条)的方法
今天小编就为大家分享一篇layui固定下拉框的显示条数(有滚动条)的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
让innerHTML的脚本也可以运行起来
让innerHTML的脚本也可以运行起来...
2006-07-07
d3.js实现立体柱图的方法详解
这篇文章主要给大家介绍了利用d3.js实现立体柱图的方法，文中给出了详细的介绍和示例代码供大家参考学习，需要的朋友们下面来一起看看吧。
2017-04-04
webpack4 从零学习常用配置(小结)
这篇文章主要介绍了webpack4 从零学习常用配置(小结)，详细的介绍了几个核心部分，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05