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
}

 

相关文章
|
2月前
|
JavaScript 前端开发 开发者
如何在 JavaScript 中处理不同类型的错误?
【10月更文挑战第29天】通过对不同类型错误的准确识别和恰当处理,可以提高JavaScript程序的可靠性和稳定性,减少错误对程序运行的影响。
|
5天前
|
JavaScript 前端开发 Java
JS中的隐式类型转换规则
JavaScript 是一门弱类型语言,变量类型在运行时会进行隐式转换。本文总结了常见的隐式转换规则,包括运算符转换、等号比较和布尔值转换等。例如,`1 + {a: 1}` 会先调用对象的 `toString()` 方法,最终结果为 `&#39;1[object Object]&#39;`。此外,还详细解析了 `undefined` 和 `null` 的运算行为,以及 `![] == []` 等特殊情况。通过这些例子,帮助开发者更好地理解 JavaScript 中的类型转换机制。
JS中的隐式类型转换规则
|
3月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
67 0
|
5月前
|
前端开发 JavaScript 搜索推荐
Next.js 适合什么类型的项目开发?
【8月更文挑战第4天】Next.js 适合什么类型的项目开发?
276 3
|
2月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
44 2
|
2月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
57 4
|
2月前
|
JavaScript 前端开发 Java
除了 JavaScript,还有哪些编程语言支持 Set 类型
【10月更文挑战第30天】这些编程语言中的 `Set` 类型虽然在语法和具体实现细节上有所不同,但都提供了类似的集合操作功能,方便开发者在不同的编程场景中处理集合相关的数据和逻辑。
|
2月前
|
存储 JavaScript 前端开发
js的基础类型和引用类型
【10月更文挑战第29天】理解 JavaScript 中的基础类型和引用类型的区别对于正确地编写代码和理解程序的行为非常重要。在实际开发中,需要根据具体的需求合理地选择和使用不同的数据类型,以避免出现一些意想不到的错误和问题。同时,在处理引用类型数据时,要特别注意对象的引用关系,避免因共享引用而导致的数据不一致等问题。
|
3月前
|
JavaScript 前端开发 安全
如何处理 JavaScript 中的类型转换错误?
【10月更文挑战第9天】处理类型转换错误需要综合运用多种方法和策略,同时要保持对潜在问题的警惕性。通过合理的错误处理,可以提高程序的健壮性,减少因类型转换错误带来的负面影响。
42 0
|
3月前
|
JavaScript 前端开发
JS隐式类型转换规则
【10月更文挑战第9天】 不同的 JavaScript 引擎可能在隐式类型转换的具体实现上存在一些细微差别。理解这些隐式类型转换规则对于正确处理数据和避免错误非常重要。
22 0