当前位置：首页 > 全部内容 > 正文

JavaScript数据类型转换详解：内置函数与强制转换

作者：小括号

时间：2026-10-25

浏览：339

本文详细介绍JavaScript中数据类型的转换方法，涵盖parseInt、parseFloat、toString等内置转换函数，以及Boolean、Number、String等强制类型转换函数的使用。通过具体示例解析各函数的行为特征与注意事项，帮助开发者准确掌握类型转换规则。

文章目录

一、转换函数

1、parseInt()

parseInt()函数能够将任意类型的值转换为整数类型。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>转换函数</title>
    <script>
       // parseInt()
       var box="34";
       alert(typeof parseInt(box)); // number
    </script>
</head>
<body>   
</body>
</html>

结果：

一、转换函数

从上述运行结果可以看出，调用parseInt()函数后，变量box的值被成功转换为整数类型。

注意：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>转换函数</title>
    <script>
       // parseInt()
       /* var box="34";
       alert(typeof parseInt(box)); // number */

       var box="34sf3435"; //parseInt(box)=34
       var box1="987.67";//parseInt(box1)=987
       var box2="rr567";//parseInt(box2)=NaN
       alert("box的值："+parseInt(box)+",box1的值:"+parseInt(box1)+",box2的值:"+parseInt(box2));
    </script>
</head>
<body>
    
</body>
</html>

结果：

一、转换函数

2、parseFloat()

parseFloat()函数用于将字符串转换为浮点数类型。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>转换函数</title>
    <script>
       // parseInt()
       /* var box="34";
       alert(typeof parseInt(box)); // number */

      /*  var box="34sf3435"; //parseInt(box)=34
       var box1="987.67";//parseInt(box1)=987
       var box2="rr567";//parseInt(box2)=NaN
       alert("box的值："+parseInt(box)+",box1的值:"+parseInt(box1)+",box2的值:"+parseInt(box2)); */

       // parseFloat()
       var box="12.345";
       var box1=parseFloat(box);
       alert(typeof box1);//number
    </script>
</head>
<body>
    
</body>
</html>

结果：

一、转换函数

注意：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>转换函数</title>
    <script>
       // parseInt()
       /* var box="34";
       alert(typeof parseInt(box)); // number */

      /*  var box="34sf3435"; //parseInt(box)=34
       var box1="987.67";//parseInt(box1)=987
       var box2="rr567";//parseInt(box2)=NaN
       alert("box的值："+parseInt(box)+",box1的值:"+parseInt(box1)+",box2的值:"+parseInt(box2)); */

       // parseFloat()
      /*  var box="12.345";
       var box1=parseFloat(box);
       alert(typeof box1);//number */

       var box="34.435"; //parseFloat(box)=34
       var box1="987.67ererw";//parseFloat(box1)=987.67
       var box2="rr567.12";//parseFloat(box2)=NaN
       var box3="567wew.12";//parseFloat(box2)=NaN
       alert("box的值："+parseFloat(box)+",box1的值:"+parseFloat(box1)+",box2的值:"+parseFloat(box2)+",box3的值:"+parseFloat(box3)); 
    </script>
</head>
<body>
</body>
</html>

结果：

一、转换函数

3、toString()

toString()函数用于将指定值转换为字符串类型并返回。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>转换函数</title>
    <script>
       // parseInt()
       /* var box="34";
       alert(typeof parseInt(box)); // number */

      /*  var box="34sf3435"; //parseInt(box)=34
       var box1="987.67";//parseInt(box1)=987
       var box2="rr567";//parseInt(box2)=NaN
       alert("box的值："+parseInt(box)+",box1的值:"+parseInt(box1)+",box2的值:"+parseInt(box2)); */

       // parseFloat()
      /*  var box="12.345";
       var box1=parseFloat(box);
       alert(typeof box1);//number */

      /*  var box="34.435"; //parseFloat(box)=34
       var box1="987.67ererw";//parseFloat(box1)=987.67
       var box2="rr567.12";//parseFloat(box2)=NaN
       var box3="567wew.12";//parseFloat(box2)=NaN
       alert("box的值："+parseFloat(box)+",box1的值:"+parseFloat(box1)+",box2的值:"+parseFloat(box2)+",box3的值:"+parseFloat(box3));  */

       // toString()
       var a=4;
       var b=7;
       alert(a.toString()+b.toString());// 输出47，不是11
    </script>
</head>
<body>
    
</body>
</html>

结果：

一、转换函数

二、强制类型转换函数

1、Boolean()

Boolean()函数用于将指定值转换为布尔类型。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>转换函数</title>
    <script>
       // parseInt()
       /* var box="34";
       alert(typeof parseInt(box)); // number */

      /*  var box="34sf3435"; //parseInt(box)=34
       var box1="987.67";//parseInt(box1)=987
       var box2="rr567";//parseInt(box2)=NaN
       alert("box的值："+parseInt(box)+",box1的值:"+parseInt(box1)+",box2的值:"+parseInt(box2)); */

       // parseFloat()
      /*  var box="12.345";
       var box1=parseFloat(box);
       alert(typeof box1);//number */

      /*  var box="34.435"; //parseFloat(box)=34
       var box1="987.67ererw";//parseFloat(box1)=987.67
       var box2="rr567.12";//parseFloat(box2)=NaN
       var box3="567wew.12";//parseFloat(box2)=NaN
       alert("box的值："+parseFloat(box)+",box1的值:"+parseFloat(box1)+",box2的值:"+parseFloat(box2)+",box3的值:"+parseFloat(box3));  */

       // toString()
/*        var a=4;
       var b=7;
       alert(a.toString()+b.toString());// 输出47，不是11 */

       // Boolean()
       var a=8; //Boolean(a)：true 任何非0的数字都是true
       var b=0; //Boolean(b)：false
       var c="232"; // Boolean(c)：true 任何非空的字符串都是true
       var d="";// Boolean(d)：false
       var e; // Boolean(e)：false
       var f=null; //Boolean(f)：false
       document.write("a:"+Boolean(a)+"<br />");
       document.write("b:"+Boolean(b)+"<br />");
       document.write("c:"+Boolean(c)+"<br />");
       document.write("d:"+Boolean(d)+"<br />");
       document.write("e:"+Boolean(e)+"<br />");
       document.write("f:"+Boolean(f)+"<br />");
    </script>
</head>
<body>
    
</body>
</html>

结果：

一、转换函数

2、Number()

Number()函数用于将指定值转换为数字类型。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>转换函数</title>
    <script>
       // parseInt()
       /* var box="34";
       alert(typeof parseInt(box)); // number */

      /*  var box="34sf3435"; //parseInt(box)=34
       var box1="987.67";//parseInt(box1)=987
       var box2="rr567";//parseInt(box2)=NaN
       alert("box的值："+parseInt(box)+",box1的值:"+parseInt(box1)+",box2的值:"+parseInt(box2)); */

       // parseFloat()
      /*  var box="12.345";
       var box1=parseFloat(box);
       alert(typeof box1);//number */

      /*  var box="34.435"; //parseFloat(box)=34
       var box1="987.67ererw";//parseFloat(box1)=987.67
       var box2="rr567.12";//parseFloat(box2)=NaN
       var box3="567wew.12";//parseFloat(box2)=NaN
       alert("box的值："+parseFloat(box)+",box1的值:"+parseFloat(box1)+",box2的值:"+parseFloat(box2)+",box3的值:"+parseFloat(box3));  */

       // toString()
/*        var a=4;
       var b=7;
       alert(a.toString()+b.toString());// 输出47，不是11 */

       // Boolean()
/*        var a=8; //Boolean(a)：true 任何非0的数字都是true
       var b=0; //Boolean(b)：false
       var c="232"; // Boolean(c)：true 任何非空的字符串都是true
       var d="";// Boolean(d)：false
       var e; // Boolean(e)：false
       var f=null; //Boolean(f)：false
       document.write("a:"+Boolean(a)+"<br />");
       document.write("b:"+Boolean(b)+"<br />");
       document.write("c:"+Boolean(c)+"<br />");
       document.write("d:"+Boolean(d)+"<br />");
       document.write("e:"+Boolean(e)+"<br />");
       document.write("f:"+Boolean(f)+"<br />"); */

       // Number()
       var a="34"; //Number(a)：34
       var b="67.34";//Number(b)：67.34
       var c="45ttt";//Number(c)：NaN
       var d="";//Number(d)：0
       var e=true;//Number(a)：1
       var f=false;//Number(a)：0
       var g;//Number(a)：NaN
       var h=null;//Number(a)：0
       document.write("a:"+Number(a)+"<br />");
       document.write("b:"+Number(b)+"<br />");
       document.write("c:"+Number(c)+"<br />");
       document.write("d:"+Number(d)+"<br />");
       document.write("e:"+Number(e)+"<br />");
       document.write("f:"+Number(f)+"<br />");
       document.write("g:"+Number(g)+"<br />");
       document.write("h:"+Number(h)+"<br />");
    </script>
</head>
<body>
    
</body>
</html>

结果：

一、转换函数

3、String()

String()函数用于将指定值转换为字符串类型。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>转换函数</title>
    <script>
       // parseInt()
       /* var box="34";
       alert(typeof parseInt(box)); // number */

      /*  var box="34sf3435"; //parseInt(box)=34
       var box1="987.67";//parseInt(box1)=987
       var box2="rr567";//parseInt(box2)=NaN
       alert("box的值："+parseInt(box)+",box1的值:"+parseInt(box1)+",box2的值:"+parseInt(box2)); */

       // parseFloat()
      /*  var box="12.345";
       var box1=parseFloat(box);
       alert(typeof box1);//number */

      /*  var box="34.435"; //parseFloat(box)=34
       var box1="987.67ererw";//parseFloat(box1)=987.67
       var box2="rr567.12";//parseFloat(box2)=NaN
       var box3="567wew.12";//parseFloat(box2)=NaN
       alert("box的值："+parseFloat(box)+",box1的值:"+parseFloat(box1)+",box2的值:"+parseFloat(box2)+",box3的值:"+parseFloat(box3));  */

       // toString()
/*        var a=4;
       var b=7;
       alert(a.toString()+b.toString());// 输出47，不是11 */

       // Boolean()
/*        var a=8; //Boolean(a)：true 任何非0的数字都是true
       var b=0; //Boolean(b)：false
       var c="232"; // Boolean(c)：true 任何非空的字符串都是true
       var d="";// Boolean(d)：false
       var e; // Boolean(e)：false
       var f=null; //Boolean(f)：false
       document.write("a:"+Boolean(a)+"<br />");
       document.write("b:"+Boolean(b)+"<br />");
       document.write("c:"+Boolean(c)+"<br />");
       document.write("d:"+Boolean(d)+"<br />");
       document.write("e:"+Boolean(e)+"<br />");
       document.write("f:"+Boolean(f)+"<br />"); */

       // Number()
 /*       var a="34"; //Number(a)：34
       var b="67.34";//Number(b)：67.34
       var c="45ttt";//Number(c)：NaN
       var d="";//Number(d)：0
       var e=true;//Number(e)：1
       var f=false;//Number(f)：0
       var g;//Number(g)：NaN
       var h=null;//Number(h)：0
       document.write("a:"+Number(a)+"<br />");
       document.write("b:"+Number(b)+"<br />");
       document.write("c:"+Number(c)+"<br />");
       document.write("d:"+Number(d)+"<br />");
       document.write("e:"+Number(e)+"<br />");
       document.write("f:"+Number(f)+"<br />");
       document.write("g:"+Number(g)+"<br />");
       document.write("h:"+Number(h)+"<br />"); */

       // String()
       var a=34; //String(a)：34
       var b=67.34;//String(b)：67.34
       var c=true;//String(c)：true
       var d=false;//String(d)：false
       var e=null;//String(e)：null
       var f; //String(f):undefined
       document.write("a:"+String(a)+"<br />");
       document.write("b:"+String(b)+"<br />");
       document.write("c:"+String(c)+"<br />");
       document.write("d:"+String(d)+"<br />");
       document.write("e:"+String(e)+"<br />");
       document.write("f:"+String(f)+"<br />");
    </script>
</head>
<body>
    
</body>
</html>

结果：

一、转换函数

到此这篇关于JavaScript数据类型转换的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败

JavaScript常见SyntaxError语法错误排查与修复方法

JS中slice、substring和substr截取字符串的区别

JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型

为什么JS数组push后得到的是数字而不是数组？

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JavaScript常见SyntaxError语法错误排查与修复方法
JS 解压出现乱码或报错怎么解决？
JS动态构建复杂嵌套JSON对象的方法