当前位置： 首页 > news >正文

JavaScript——数据类型、类型转换

news 2025/10/25 5:33:00

数据类型

计算机世界中的万事万物都是数据。

计算机程序可以处理大量的数据，为什么要给数据分类?

  • 更加充分和高效的利用内存
  • 也更加方便程序员的使用数据

基本数据类型

number 数字型

  • JavaScript中正数、负数、小数等统一称为number
    • JS是弱数据类型，变量到底属于哪种类型，只有赋值之后，才能确定
    • Java是强数据类型，例如： int a = 3，必须是整数
    • 可以进行+、-、*、/、%的运算
      • *、/、%的优先级相同

NaN

代表一个计算错误。它是一个不正确的或者一个未定义的数字操作所得到的结果

console.log("good" - 2) //输出：NaN

NaN是粘性的。任何对NaN的操作都会返回NaN

console.log(NaN+2) // 输出：NaN

甚至两个NaN都不相等

console.log(NaN === NaN) // 输出：false

string 字符串型

通过单引号(")、双引号（"")或反引号(`)包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

string 字符串型

通过单引号(")、双引号（"")或反引号(`)包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

模板字符串

使用场景

  • 拼接字符串和变量
  • 在没有它之前，要拼接变量比较麻烦

语法

  • ··（反引号）
  • 内容拼接变量时，用${}包住变量

boolean 布尔型

只有两个值：true和false

undefined 未定义型

未定义是比较特殊的类型，只有一个值undefined。

什么情况出现未定义类型?

只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少【直接】为某个变量赋值为undefined。

let num
console.log(num)

开发场景

我们开发中经常声明一个变量，等待传送过来的数据。

如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。

null 空类型

    let obj = nullconfirm.log(obj)

引用数字类型

object 对象

检测数据类型

通过typeof关键字检测数据类型

typeof运算符可以返回被检测的数据类型。它支持两种语法形式:

1.作为运算符: typeof x（常用的写法)

2.函数形式: typeof(x)

换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法。

let obj = null
console.log(typeof obj) // object  
// 这是一个比较特殊的结果

类型转换

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

规则:

  • ＋号两边只要有一个是字符串，都会把另外一个转成字符串
  • 除了+以外的算术运算符，比如–、*、/等都会把数据转成数字类型

缺点:

  • 转换类型不明确，靠经验才能总结

小技巧:

  • +号作为正号解析可以转换成数字型
  • 任何数据和字符串相加结果都是字符串
    console.log(2 + '2') // 22 stringconsole.log(2 - '2') // 0  numberconsole.log(+ '2')  // 把字符串类型转化为了数字型console.log(typeof + '2')  // 类型为数字型

显示转换

  • Number()
    • 把对象的值转换为数字，如果无法转换为数字，那么Number()函数返回NaN
  • parseInt()
    • 分析一个字符串，并且返回一个整数
  • parseFloat
    • 分析一个字符串，并且返回一个浮点数
    console.log(Number(str))// 1   显示转化// let age = Number(prompt('请输入你的年龄')) // 转化为数字型// 2   隐式转换let age = + prompt('请输入你的年龄')console.log(typeof age)console.log(parseInt('12ps')) // 只能取数字开头的字符串中的整数  12console.log(parseInt('13.12ps')) // 只能取数字开头的字符串中的整数  13console.log(parseInt('asd123dfa'))   // 结果为NaN//.................  console.log(parseFloat('12ps'))   // 12console.log(parseFloat('13.12ps'))  // 13.12console.log(parseFloat('asd123dfa'))   // 结果为NaN

操作实例

    let num1 = +prompt('请输入第一个数字:')let num2 = +prompt('请输入第二个数字:')alert(`两个数之和为:${num1 + num2}`)

综合案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h2 {text-align: center;/*给字体为h2的设为中心对齐*/}table {/*合并边框*/border-collapse: collapse;/* 设置每个表格的高度为80px */height: 80px;/* 设置表格中的数据都居中对齐 */text-align: center;/* 让块元素水平剧中 */margin: 0 auto;}th {/* 设置表头单元格的左右边宽距 */padding: 5px 30px;/* padding: 10px 5px 15px 20px;上填充是 10px 右填充是 5px 下填充是 15px 左填充是 20px 顺时针的 padding: 10px 5px 15px;上填充是 10px 右填充和左填充是 5px 下填充是 15px padding: 10px 5px;上填充和下填充是 10px 右填充和左填充是 5px padding: 10px;所有四个填充都是 10px */}table,th,td {border: 1px solid #000/*solid定义实现边框*/}</style>
</head><body><h2>订单付款确认</h2><!-- 下面这个表达式的快捷键为:table>tr>th*5  --><!--tr  table row 表示表格的一行td table data 表示表格的数据单元格th table header 表示表格的表头单元格--><script>// 1 用户输入let price = +prompt('请输入商品价格：')let num = +prompt('请输入商品数量：')let address = prompt('请输入收货地址：')// 2 计算总额let total = price * num// 3 页面打印document.write(`<table><tr><th>商品名称</th><th>商品价格</th><th>商品数量</th><th>总价</th><th>收货地址</th></tr><tr><td>HUAWEI Mate 60 Pro</td><td>${price}元</td><td>${num}</td><td>${total}元</td><td>${address}</td></tr></table>`)</script>
</body></html>

相关文章：

JavaScript——数据类型、类型转换

数据类型 计算机世界中的万事万物都是数据。 计算机程序可以处理大量的数据&#xff0c;为什么要给数据分类? 更加充分和高效的利用内存也更加方便程序员的使用数据 基本数据类型 number 数字型 JavaScript中正数、负数、小数等统一称为number JS是弱数据类型&#xff0…...

编程日记 2023/10/9 12:18:50

C位操作符

目录 一、位操作符 1.位与& 2.位或| 3.位取反~ 4.位异或^ 5.位与&#xff0c;位或&#xff0c;位异或的特点总结 6.左移位《《 右移位 》》 二、位与&#xff0c;位或&#xff0c;位异或在操作寄存器时的特殊作用 1.寄存器操作的要求&#xff08;特定位改变而不…...

编程日记 2023/10/9 12:17:49

【linux进程(三)】进程有哪些状态?--Linux下常见的三种进程状态

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Linux从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学更多操作系统知识   &#x1f51d;&#x1f51d; Linux进程 1. 前言2. 操作系统…...

编程日记 2023/10/9 12:16:48

numString.charAt(i) - ‘0‘

numString.charAt(i) 表示获取字符串 numString 中第 i 个字符&#xff0c;这里假设该字符是数字 0 到 9 之间的一个字符。 0 是字符常量&#xff0c;表示数字 0 对应的字符。例如&#xff0c;字符 0 转换成数字就是 0&#xff0c;字符 1 转换成数字就是 1&#xff0c;以此类推…...

编程日记 2023/10/9 12:15:47

《Python 自动化办公应用大全》书籍推荐（包邮送书五本）

前言 随着科技的快速发展和智能化办公的需求增加&#xff0c;Python自动化办公成为了一种趋势。Python作为一种高级编程语言&#xff0c;具有简单易学、功能强大和开放源代码等优势&#xff0c;可以帮助我们更高效地完成日常办公任务。 Python自动化办公还可以帮助我们实现更…...

编程日记 2023/10/9 12:13:45

day57:ARMday4，程序状态寄存器读写指令、软中断指令、C和汇编的混合编程、开发板介绍

思维导图&#xff1a;有道云笔记...

编程日记 2023/10/9 12:12:44

el-cascader

场景&#xff1a; el-cascader lazy multiple 反显数据 非lazy的场景 selecetedOptions2: [[1, 2, 3],[1, 2, 4], ],可以正常回显&#xff1b;> ok lazy场景下&#xff1a; 是不可以回显的… 如果el-cascader是异步的单选 cascader默认会加载下个层级的&#xff08;子…...

编程日记 2023/10/9 12:11:43

图论第3天----第841题、第463题

# 图论第3天----第841题、第463题 文章目录 一、第841题--钥匙和房间二、第463题--岛屿的周长 ​ 又继续开始修行&#xff0c;把图论这块补上&#xff0c;估计要个5-6天时间。 一、第841题–钥匙和房间 ​ 有向图的遍历。dfs遍历3部曲做&#xff0c;思路也较顺----访问过的&a…...

编程日记 2023/10/9 12:08:40

软件测试/测试开发丨利用ChatGPT 生成自动化测试脚本

点此获取更多相关资料 简介 自动化测试脚本可以模拟用户与应用程序的交互&#xff0c;例如点击按钮、输入数据、导航到不同的页面等等&#xff0c;以验证应用程序的正确性、性能和稳定性。 自动化测试在回归测试、冒烟测试等测试流程中都可以极大地起到节省时间、节省人力的作…...

编程日记 2023/10/9 12:07:39

3.3.OpenCV技能树--二值图像处理--图像形态学操作

文章目录 1.图像形态学运算简介2.图像开运算处理2.1.图像开运算处理简介2.2.图像开运算处理代码2.3.图像开运算处理效果 3.图像闭运算处理3.1.图像闭运算处理简介3.2.图像闭运算处理代码3.3.图像闭运算处理效果 4.图像形态学梯度处理4.1.图像形态学梯度处理简介4.2.图像形态学梯…...

编程日记 2023/10/9 12:06:38

这15个海运提单的雷区 你知道吗？

海运提单中英文对照 海运提单主要项目填制说明 1、托运人(Shipper)&#xff1a;即与承运人签订运输契约&#xff0c;委托运输的货主&#xff0c;即发货人。在信用证支付方式下&#xff0c;一般以受益人为托运人;托收方式以托收的委托人为托运人。另外&#xff0c;根据《UCP500》…...

编程日记 2023/10/9 12:05:37

几道web题目

总结几道国庆写的web题目 [ACTF2020 新生赛]Include1 点进去发现就一个flag.php,源代码和抓包都没拿到好东西 结合题目猜是文件包含&#xff0c;构建payload ?filephp://filter/readconvert.base64-encode/resourceflag.php 得到base64编码过的flag&#xff0c;解码即可 此题…...

编程日记 2023/10/9 12:04:36

API接口大全分享，含短信API、IP查询API。。。

免费API接口大全分享&#xff0c;含短信API、IP查询API等。。。 语音验证码短信&#xff1a;拨打电话告知用户验证码&#xff0c;实现信息验证。短信验证码&#xff1a;可用于登录、注册、找回密码、支付认证等等应用场景。支持三大运营商&#xff0c;3秒可达&#xff0c;99.9…...

编程日记 2023/10/9 12:03:35

记录一次springboot使用定时任务中@Async没有生效的场景

环境说明 jdk21springboot 3.0.11 springcloud 2022.0.0 spring-cloud-alibaba 2022.0.0.0 在开发一个定时触发的任务的时候&#xff0c;由于开发执行任务的函数比较耗费时间&#xff0c;所以采用异步解决问题。 发现并没有按照预期的触发 经询问后&#xff0c;发现当前类的…...

编程日记 2023/10/9 12:02:34

腾讯云/阿里云国际站免费账号：腾讯云国际站如何对象存储cos设置防盗链

简介 为了避免恶意程序使用资源 URL 盗刷公网流量或使用恶意手法盗用资源&#xff0c;腾讯云国际站给用户带来不必要的损失。腾讯云对象存储支持防盗链配置&#xff0c;建议您通过控制台的防盗链设置配置黑/白名单&#xff0c;来进行安全防护。 注意&#xff1a; 如果您访问对…...

编程日记 2023/10/9 12:01:33

python编程：使用 Pillow 将照片转换为1寸报名照片

引言&#xff1a; 在现代科技时代&#xff0c;我们经常需要调整和处理照片以适应特定的需求和用途。本文将介绍如何使用 wxPython 和 Pillow 库&#xff0c;通过一个简单的图形界面程序&#xff0c;将选择的照片转换为指定尺寸的 JPG 格式&#xff0c;并保存在桌面上。 C:\pyt…...

编程日记 2023/10/9 12:00:33

Aria2 for Mac (免HomeBrew)

Aria2 for Mac (免HomeBrew)-CSDN博客 之前搜索Aria2的安装方法&#xff0c;推荐的方法是使用HomeBrew安装。是&#xff0c;这个插件很省事&#xff0c;但启用条件是你安装了HomeBrew且运行起来需要再下十来个G的Xcode…… 这对急用的我非常不友好&#xff0c;当然&#xff0c…...

编程日记 2023/10/9 11:59:32

【Java】微服务——Gateway网关

目录 1.为什么需要网关2.gateway快速入门1&#xff09;创建gateway服务&#xff0c;引入依赖2&#xff09;编写启动类3&#xff09;编写基础配置和路由规则4&#xff09;重启测试5&#xff09;网关路由的流程图 3.3.断言工厂3.4.过滤器工厂3.4.1.路由过滤器的种类3.4.2.请求头过…...

编程日记 2023/10/9 11:58:31

大厂笔试汇总

大厂笔试 华为笔试汇总1.交易系统的降级策略（二分法）2.获取最多食物（树形DP）3.小王的密码本（哈希）4.每日股票价格（单调栈）5.中庸行者（回溯）输入描述输出描述6.数字序列比大小（贪心）输入描述输出描述7、快递中转站8、互通设备集字节跳动中兴笔试华为笔试汇总 1.交易…...

编程日记 2023/10/9 11:57:30

【数据结构】快排的详细讲解

目录&#xff1a; 介绍 一&#xff0c;递归快排确定基准值 二&#xff0c;递归遍历 三&#xff0c;非递归的快排 四&#xff0c;快排的效率 介绍 快排是排序算法中效率是比较高的&#xff0c;快排的基本思想是运用二分思想&#xff0c;与二叉树的前序遍历类似&#xff0c;…...

编程日记 2023/10/9 11:56:29

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2025/10/24 10:25:34

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/10/21 19:56:14

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/8/24 3:48:04

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/9/17 19:16:20

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/10/23 7:42:24

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/10/21 19:54:04

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/10/6 22:42:00

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2025/10/22 17:24:09