JavaScript -- 类型转换

简介: Number() 转换为数字, String() 转换为字符串, Boolean() 转化为布尔值。JavaScript 数据类型在 JavaScript 中有 5 种不同的数据类型:stringnumberbooleanobjectfunction3 种对象类型:ObjectDateArray2 个不包含任何值的数据类型:nullundefinedtypeof 操作符你可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。

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

JavaScript 数据类型

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

  • string
  • number
  • boolean
  • object
  • function

3 种对象类型:

  • Object
  • Date
  • Array

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

  • null
  • undefined

typeof 操作符

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

  • NaN 的数据类型是 number
  • 数组(Array)的数据类型是 object
  • 日期(Date)的数据类型为 object
  • null 的数据类型是 object
  • 未定义变量的数据类型为 undefined

constructor 属性

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

将数字转换为字符串

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

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

将布尔值转换为字符串

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

将日期转换为字符串

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

将字符串转换为数字

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

字符串包含数字(如 "3.14") 转换为数字 (如 3.14).

空字符串转换为 0。

其他的字符串会转换为 NaN (不是个数字)

 

demo:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>JavaScript 类型转换</title>
    </head>

    <body>

        <p> JavaScript 类型转换</p>
        <button onclick="typeConversion()">类型转换示例</button>
        <p id="demo"></p>
        <p id="demo1"></p>
        <p id="demo2"></p>
        <p id="demo3"></p>
        <p id="demo4"></p>
        <p id="demo5"></p>
        <script type="text/javascript" src="test.js" ></script>

    </body>

</html>

Js代码:

function typeConversion(){
        document.getElementById("demo").innerHTML =
                typeof "john" + "<br>" +
                typeof 3.14 + "<br>" +
                typeof NaN + "<br>" +
                typeof false + "<br>" +
                typeof [1, 2, 3, 4] + "<br>" +
                typeof {
                    name: 'john',
                    age: 34
                } + "<br>" +
                typeof new Date() + "<br>" +
                typeof

            function() {} + "<br>" +
            typeof myCar + "<br>" +
                typeof null;
            //  constructor 属性
            document.getElementById("demo1").innerHTML =
                "john".constructor + "<br>" +
                3.14.constructor + "<br>" +
                NaN.constructor + "<br>" +
                false.constructor + "<br>" + [1, 2, 3, 4].constructor + "<br>" + {
                    name: 'john',
                    age: 34
                }.constructor + "<br>" +
                new Date().constructor + "<br>" +
                function() {}.constructor + "<br>";
            //JavaScript 类型转换
            //全局方法 String() 可以将数字转换为字符串。该方法可用于任何类型的数字,字母,变量,表达式。
            document.getElementById("demo2").innerHTML =
                String(123) + "<br>" +
                String(100 + 121) + "<br>" +
                String(true) + "<br>" +
                String(false) + "<br>" +
                String(Date()) + "<br>" +
                (145).toString() + "<br>" +
                (234 + 345).toString() + "<br>" +
                Date().toString();
            //字符串转换成数字
            document.getElementById("demo3").innerHTML =
                Number("3.14") + "<br>" + // 返回 3.14
                Number(" ") + "<br>" + // 返回 0 
                Number("") + "<br>" + // 返回 0
                Number(new Date()) + "<br>" + //日期转化为数字
                Number(true) + "<br>" + //布尔值转化成数字
                Number(false) + "<br>" +
                Number("99 88") + "<br>"; // 返回 NaN
            var y = "5";
            var x = +y;
            //一元运算符
            document.getElementById("demo4").innerHTML =
                typeof y + "<br>" + typeof x;
            //自动转换类型
            document.getElementById("demo5").innerHTML =
                (5 + null) + "<br>" + // 返回 5         null 转换为 0
                ("5" + null) + "<br>" + // 返回"5null"   null 转换为 "null"
                ("5" + 1) + "<br>" + // 返回 "51"      1 转换为 "1"  
                ("5" - 1) + "<br>"; // 返回 4         "5" 转换为 5
}

 

相关文章
|
1月前
|
JavaScript
常见函数的4种类型(js的问题)
常见函数的4种类型(js的问题)
12 0
|
1月前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
73 0
|
1月前
|
JavaScript 前端开发
JavaScript 中如何检测一个变量是一个 String 类型?
JavaScript 中如何检测一个变量是一个 String 类型?
26 2
|
23天前
|
JavaScript 前端开发 安全
使用TypeScript增强JavaScript应用的类型安全性
【5月更文挑战第23天】TypeScript是微软开发的JavaScript超集,引入静态类型检查和面向对象特性,提升代码可维护性和可靠性。它在编译阶段捕获类型错误,增强代码可读性,并通过接口、类、泛型和类型断言等工具确保类型安全。使用TypeScript能有效避免复杂项目中的调试难题,尤其适合大型项目。
|
4天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
21 2
|
21天前
|
JavaScript 前端开发 Java
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
24 0
|
25天前
|
JavaScript 前端开发
前端 JS 经典:JS 基础类型和 typeof
前端 JS 经典:JS 基础类型和 typeof
18 0
|
1月前
|
Web App开发 前端开发 JavaScript
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
16 0
|
1月前
|
存储 JavaScript 前端开发
JavaScript 中松散类型的理解
JavaScript 中松散类型的理解
13 1
|
1月前
|
JavaScript 前端开发
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
17 1