程序员scholar 程序员scholar
首页
  • Java 基础

    • JavaSE
    • JavaIO
    • JavaAPI速查
  • Java 高级

    • JUC
    • JVM
    • Java新特性
    • 设计模式
  • Web 开发

    • Servlet
    • Java网络编程
  • Web 标准

    • HTML
    • CSS
    • JavaScript
  • 前端框架

    • Vue2
    • Vue3
    • Vue3 + TS
    • 微信小程序
    • uni-app
  • 工具与库

    • jQuery
    • Ajax
    • Axios
    • Webpack
    • Vuex
    • WebSocket
    • 第三方登录
  • 后端与语言扩展

    • ES6
    • Typescript
    • node.js
  • Element-UI
  • Apache ECharts
  • 数据结构
  • HTTP协议
  • HTTPS协议
  • 计算机网络
  • Linux常用命令
  • Windows常用命令
  • SQL数据库

    • MySQL
    • MySQL速查
  • NoSQL数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • RabbitMQ
  • 服务器

    • Nginx
  • Spring框架

    • Spring6
    • SpringMVC
    • SpringBoot
    • SpringSecurity
  • SpringCould微服务

    • SpringCloud基础
    • 微服务之DDD架构思想
  • 日常必备

    • 开发常用工具包
    • Hutoll工具包
    • IDEA常用配置
    • 开发笔记
    • 日常记录
    • 项目部署
    • 网站导航
    • 产品学习
    • 英语学习
  • 代码管理

    • Maven
    • Git教程
    • Git小乌龟教程
  • 运维工具

    • Docker
    • Jenkins
    • Kubernetes
  • 算法笔记

    • 算法思想
    • 刷题笔记
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
首页
  • Java 基础

    • JavaSE
    • JavaIO
    • JavaAPI速查
  • Java 高级

    • JUC
    • JVM
    • Java新特性
    • 设计模式
  • Web 开发

    • Servlet
    • Java网络编程
  • Web 标准

    • HTML
    • CSS
    • JavaScript
  • 前端框架

    • Vue2
    • Vue3
    • Vue3 + TS
    • 微信小程序
    • uni-app
  • 工具与库

    • jQuery
    • Ajax
    • Axios
    • Webpack
    • Vuex
    • WebSocket
    • 第三方登录
  • 后端与语言扩展

    • ES6
    • Typescript
    • node.js
  • Element-UI
  • Apache ECharts
  • 数据结构
  • HTTP协议
  • HTTPS协议
  • 计算机网络
  • Linux常用命令
  • Windows常用命令
  • SQL数据库

    • MySQL
    • MySQL速查
  • NoSQL数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • RabbitMQ
  • 服务器

    • Nginx
  • Spring框架

    • Spring6
    • SpringMVC
    • SpringBoot
    • SpringSecurity
  • SpringCould微服务

    • SpringCloud基础
    • 微服务之DDD架构思想
  • 日常必备

    • 开发常用工具包
    • Hutoll工具包
    • IDEA常用配置
    • 开发笔记
    • 日常记录
    • 项目部署
    • 网站导航
    • 产品学习
    • 英语学习
  • 代码管理

    • Maven
    • Git教程
    • Git小乌龟教程
  • 运维工具

    • Docker
    • Jenkins
    • Kubernetes
  • 算法笔记

    • 算法思想
    • 刷题笔记
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
npm

(进入注册为作者充电)

  • HTML

  • CSS

  • JavaScript

    • 简介和用法
    • 变量和数据类型
    • 运算符
    • 数据类型转换
      • 1. 强制类型转换
        • 1.1 转换为 number
        • 1.2 转换为 string
        • 1.3 转换为 boolean
      • 2. 自动类型转换
      • 3. 综合示例
    • 选择结构
    • 循环结构
    • 数组
    • 数组遍历
    • 函数
    • Debug调试
    • DOM
    • 事件处理
    • BOM(浏览器对象模型)
    • 自定义对象
    • 原型 (Prototype)
    • 内置对象
    • 客户端存储
    • 模块加载方案
  • 前端三剑客
  • JavaScript
scholar
2024-07-19
目录

数据类型转换

# 数据类型转换

# 1. 强制类型转换

强制类型转换,也称为显式转换,是指通过使用特定的方法或运算符,将一种数据类型转换为另一种数据类型。以下是常用的强制类型转换方法:

# 1.1 转换为 number

有三种方式将数据转换为 number 类型:

  1. 使用 Number()

    • 如果内容可以转换成数字,则返回对应的数字(整数或小数)。
    • 如果内容不可以转换成数字,则返回 NaN。
    • 如果内容为空字符串或 null,则返回 0。
    • 如果内容为 boolean,则 true 返回 1,false 返回 0(因为 boolean 值在内存中是以数字存储的,true 为 1,false 为 0)。
    console.log(Number("123")); // 输出 123
    console.log(Number("123.45")); // 输出 123.45
    console.log(Number("abc")); // 输出 NaN
    console.log(Number("")); // 输出 0
    console.log(Number(null)); // 输出 0
    console.log(Number(true)); // 输出 1
    console.log(Number(false)); // 输出 0
    
    1
    2
    3
    4
    5
    6
    7
  2. 使用 parseInt()

    • 将内容转换成整数(直接去掉小数)。
    • 会从第一个字符开始解析,直到遇到非数字符号停止,并返回已解析的部分数值。
    console.log(parseInt("123.45")); // 输出 123
    console.log(parseInt("123abc")); // 输出 123
    console.log(parseInt("abc123")); // 输出 NaN
    
    1
    2
    3
  3. 使用 parseFloat()

    • 将内容转换成小数。
    console.log(parseFloat("123.45")); // 输出 123.45
    console.log(parseFloat("123abc")); // 输出 123
    console.log(parseFloat("abc123")); // 输出 NaN
    
    1
    2
    3

# 1.2 转换为 string

有三种方式将数据转换为 string 类型:

  1. 拼接空字符串

    • 直接使用 "" + 要转换的内容。
    console.log("" + 123); // 输出 "123"
    console.log("" + true); // 输出 "true"
    
    1
    2
  2. 使用 String()

    • 将要转换的内容放在 String 后的小括号中。
    console.log(String(123)); // 输出 "123"
    console.log(String(true)); // 输出 "true"
    
    1
    2
  3. 使用 toString()

    • 直接调用变量的 toString() 方法。
    var num = 123;
    console.log(num.toString()); // 输出 "123"
    var bool = true;
    console.log(bool.toString()); // 输出 "true"
    
    1
    2
    3
    4

# 1.3 转换为 boolean

有两种方式将数据转换为 boolean 类型:

  1. 使用 Boolean()

    • false、0、空字符串、undefined、null、NaN 会被转换成 false。
    • 其他的都会被转成 true。
    console.log(Boolean(0)); // 输出 false
    console.log(Boolean("")); // 输出 false
    console.log(Boolean(null)); // 输出 false
    console.log(Boolean(NaN)); // 输出 false
    console.log(Boolean(123)); // 输出 true
    console.log(Boolean("Hello")); // 输出 true
    
    1
    2
    3
    4
    5
    6
  2. 使用 !! 转换

    • 双重否定,强制将值转换为 boolean 类型。
    console.log(!!0); // 输出 false
    console.log(!!123); // 输出 true
    console.log(!!""); // 输出 false
    console.log(!!"Hello"); // 输出 true
    
    1
    2
    3
    4

# 2. 自动类型转换

自动类型转换,也称为隐式转换,是指 JavaScript 会在需要的时候自动将一种数据类型转换为另一种数据类型。以下是自动类型转换的常见情况:

  1. 在参与 -、*、/、% 等运算时会自动转换为 number

    console.log("123" - 0); // 输出 123
    console.log("123.45" * 1); // 输出 123.45
    console.log("123" / "3"); // 输出 41
    console.log("123" % 2); // 输出 1
    
    1
    2
    3
    4
  2. 直接在要转换的内容前添加 +

    • 这个方法常用于将字符串转换为数字。
    console.log(+"123"); // 输出 123
    console.log(+"123.45"); // 输出 123.45
    console.log(+"abc"); // 输出 NaN
    
    1
    2
    3

# 3. 综合示例

以下是一个综合示例,演示了强制类型转换和自动类型转换:

var str = "123";
var num = 456;
var bool = true;
var nullValue = null;
var undefinedValue;
var nanValue = NaN;

// 强制类型转换
console.log(Number(str)); // 123
console.log(parseInt(str)); // 123
console.log(parseFloat("123.45")); // 123.45
console.log(String(num)); // "456"
console.log(bool.toString()); // "true"
console.log(Boolean(str)); // true
console.log(!!num); // true

// 自动类型转换
console.log(str - 0); // 123
console.log(str * 1); // 123
console.log(str / "3"); // 41
console.log("123" % 2); // 1
console.log(+str); // 123

// 检查类型转换的结果
console.log(Number("abc")); // NaN
console.log(String(nullValue)); // "null"
console.log(Boolean(undefinedValue)); // false
console.log(parseInt(nanValue)); // NaN
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

#

编辑此页 (opens new window)
上次更新: 2025/01/25, 22:32:05
运算符
选择结构

← 运算符 选择结构→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式