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

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

news 2025/12/11 20:40:34

数据类型

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

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

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

基本数据类型

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

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/11/16 19:06:23

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/12/11 16:25:28

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2025/12/11 16:25:47

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/11/25 10:36:53

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/12/9 0:57:03

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2025/12/9 2:22:05

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/9/24 23:08:17

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/12/9 4:53:19

Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

编程新知 2025/12/4 15:40:11