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

JavaScript （十四）——JavaScript typeof和类型转换

news 2025/7/7 13:10:50

目录

JavaScript typeof, null, 和 undefined

typeof 操作符

null

undefined

undefined 和 null 的区别

JavaScript 类型转换

JavaScript 数据类型

JavaScript 类型转换

将数字转换为字符串

将布尔值转换为字符串

将日期转换为字符串

将字符串转换为数字

一元运算符 +

将布尔值转换为数字

将日期转换为数字

自动转换类型

自动转换为字符串

JavaScript typeof, null, 和 undefined

typeof 操作符

可以使用 typeof 操作符来检测变量的数据类型。

示例：

typeof "John"                // 返回 string 
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object
 在JavaScript中，数组是一种特殊的对象类型

null

在 JavaScript 中 null 表示 "什么都没有"。

null是一个只有一个值的特殊类型。表示一个空对象引用。

用 typeof 检测 null 返回是object。

可以设置为 null 来清空对象

示例：

<body><p id="demo"></p><p id="demo2"></p><script>var x = 10;var x=null;document.getElementById("demo2").innerHTML = x ;document.getElementById("demo").innerHTML = typeof x;</script>
</body>

运行结果：

undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。

typeof 一个没有值的变量会返回 undefined。

var person;                  // 值为 undefined(空), 类型是undefined

任何变量都可以通过设置值为 undefined 来清空。 类型为 undefined.

person = undefined;          // 值为 undefined,  类型是undefined

undefined 和 null 的区别

null 和 undefined 的值相等，但类型不等

  • undefined：表示未定义，即变量已经声明了，但是还没有被赋予任何值。这通常发生在变量被声明了但没有显式地给其赋值，或者函数没有返回值时默认返回的情况。在内存中，这个变量可能并不存在一个具体的值或地址。
  • null：表示空值或空引用。它用于表示某个变量或对象是“无”或“空”的状态。与undefined不同，null是明确地被赋予了这样一个特殊的空值。
  • 使用typeof操作符检测时，undefined的类型是"undefined"。
  • 尽管直觉上null应该表示没有值，但typeof null的结果却是"object"。这是因为JavaScript最初的设计缺陷，历史上null被认为是一个空的对象引用。
  • 当尝试将undefined转换为数值时，结果是NaN（Not-a-Number）。
  • 而将null转换为数值时，结果是0。
  • undefined 主要用于以下几种情况：
    • 变量被声明了但没有被赋值。
    • 调用函数时，如果应该传入参数但没有传入，该参数在函数内部就是undefined。
    • 函数没有明确返回值时，默认返回undefined。
  • null 则常用于以下几种情况：
    • 表示某个变量或对象当前是“空”的或“没有值”的。
    • 作为函数的参数，明确表示该参数不是对象或不需要传入对象。
    • 在对象原型链的末端，表示没有更进一步的原型。
  • null 是JavaScript的一个关键字，不能用作变量名或函数名。
  • undefined 虽然不是关键字，但它在全局作用域中默认是undefined，且在某些环境中（如浏览器）其值是不可变的。然而，在ECMAScript 5（ES5）及以后的版本中，可以通过某些方式（如使用严格模式）来避免全局undefined被覆盖。

JavaScript 类型转换

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

JavaScript 数据类型

NaN 的数据类型是 number

数组(Array)的数据类型是 object

日期(Date)的数据类型为 object

null 的数据类型是 object

未定义变量的数据类型为 undefined

如果对象是 JavaScript Array 或 JavaScript Date ，我们就无法通过 typeof 来判断他们的类型，因为都是 返回 object。

JavaScript 类型转换

JavaScript 变量可以转换为新变量或其他数据类型：

通过使用 JavaScript 函数

将数字转换为字符串

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

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

String(x)         // 将变量 x 转换为字符串并返回String(123)       // 将数字 123 转换为字符串并返回String(100 + 23)  // 将数字表达式转换为字符串并返回

Number 方法 toString() 也是有同样的效果。

x.toString()(123).toString()(100 + 23).toString()
方法描述
toExponential()把对象的值转换为指数计数法。
toFixed()把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision()把数字格式化为指定的长度。

将布尔值转换为字符串

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

String(false)        // 返回 "false"
String(true)         // 返回 "true"

Boolean 方法 toString() 也有相同的效果。

false.toString()     // 返回 "false"
true.toString()      // 返回 "true"

将日期转换为字符串

Date() 返回字符串

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

Date 方法 toString() 也有相同的效果。

方法描述
getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()从 Date 对象以四位数字返回年份。
getHours()返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()返回 Date 对象的分钟 (0 ~ 59)。
getMonth()从 Date 对象返回月份 (0 ~ 11)。
getSeconds()返回 Date 对象的秒数 (0 ~ 59)。
getTime()返回 1970 年 1 月 1 日至今的毫秒数。

将字符串转换为数字

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

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

空字符串转换为 0。

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

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0 
Number("")        	// 返回 0
Number("99 88")   // 返回 NaN
方法描述
parseFloat()解析一个字符串，并返回一个浮点数。
parseInt()

解析一个字符串，并返回一个整数。

一元运算符 +

Operator + 可用于将变量转换为数字：

var y = "5";     
// y 是一个字符串
var x = + y;      
// x 是一个数字

如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字)

var y = "John";  
// y 是一个字符串
var x = + y;      // x 是一个数字 (NaN)

将布尔值转换为数字

全局方法 Number() 可将布尔值转换为数字。

Number(false)     // 返回 0
Number(true)      // 返回 1

将日期转换为数字

全局方法 Number() 可将日期转换为数字。

d = new Date();Number(d)          // 返回 1404568027739

日期方法 getTime() 也有相同的效果。

d = new Date();d.getTime()        // 返回 1404568027739

自动转换类型

当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。

5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1"  
"5" - 1     // 返回 4         "5" 转换为 5

自动转换为字符串

当尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法

document.getElementById("demo").innerHTML = myVar;
myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"

相关文章：

JavaScript （十四）——JavaScript typeof和类型转换

目录 JavaScript typeof, null, 和 undefined typeof 操作符 null undefined undefined 和 null 的区别 JavaScript 类型转换 JavaScript 数据类型 JavaScript 类型转换 将数字转换为字符串 将布尔值转换为字符串 将日期转换为字符串 将字符串转换为数字 一元运算符…...

编程日记 2024/8/3 6:39:21

CTF-web 基础

网络协议 OSI七层参考模型&#xff1a;一个标准的参考模型 物理层 网线&#xff0c;网线接口等。 数据链路层 可以处理物理层传入的信息。 网络层 比如IP地址 传输层 控制传输的内容的传输&#xff0c;在传输的过程中将要传输的信息分块传输完成之后再进行合并。 应用…...

编程日记 2024/8/3 6:36:18

CP AUTOSAR标准之ChineseV2XNetwork(AUTOSAR_SWS_ChineseV2XNetwork)（更新中……）

1 简介和功能概述 本文档指定了AUTOSAR基础软件模块中国车辆对接网络(CnV2xNet)的功能、API和配置。   中国车联网网络(CnV2xNet)与中国车联网消息(CnV2xMsg)、中国车联网管理(CnV2xMgt)、中国车联网安全(CnV2xSec)以及AUTOSAR BSW模块以太网接口(EthIf)共同构成了AUTOSAR架构…...

编程日记 2024/8/3 6:35:15

【hloc】 项目流程

hloc 项目流程 1. 数据集准备2. 特征提取3. 匹配特征4. 三维重建5. 定位6. 结果评估7. 示例脚本 这个项目涉及到了视觉定位和三维重建的一系列步骤&#xff0c;从特征提取、匹配、三维重建到定位和结果评估。通过提供的脚本文件&#xff0c;用户可以方便地运行整个流程。 1. 数…...

编程日记 2024/8/3 6:33:13

鸿蒙系统开发【应用接续】基本功能

应用接续 介绍 基于ArkTS扩展的声明式开发范式编程语言编写的一个分布式视频播放器&#xff0c;主要包括一个直播视频播放界面&#xff0c;实现视频播放时可以从一台设备迁移到另一台设备继续运行&#xff0c;来选择更合适的设备继续执行播放功能以及PAD视频播放时协同调用手…...

编程日记 2024/8/3 6:29:10

nextTick方法的作用是什么？什么时候会用到

nextTick 方法在 Vue.js 中扮演着重要的角色&#xff0c;它用于在下次 DOM 更新循环结束之后执行延迟回调。这主要用于确保在 Vue 完成 DOM 更新后执行依赖于 DOM 的操作。 作用 确保 DOM 更新完成&#xff1a;Vue 的 DOM 更新是异步的&#xff0c;当你修改了数据后&#xff0…...

编程日记 2024/8/3 6:27:08

多 NodeJS 环境管理

前言 对于某个项目依赖特定版本的 NodeJS&#xff0c;或几个项目的 NodeJS 版本冲突时&#xff0c;需要在系统中安装多个版本的 NodeJS&#xff0c;这时可以使用一些工具来进行多个 NodeJS 的管理。 有很多类似的 NodeJS 管理工具&#xff0c;如 nvm, nvs, n 等&#xff0c;接…...

编程日记 2024/8/3 6:26:04

解决网站被植入跳转木马病毒

概述 网站被植入跳转木马病毒是一种常见的安全威胁&#xff0c;它可能导致网站用户被重定向到恶意站点。本文将指导您如何检测、清除这类木马病毒以及采取预防措施。 步骤1&#xff1a;确认感染 首先&#xff0c;需要确认您的网站确实受到了跳转木马的影响。 示例&#xff…...

编程日记 2024/8/3 6:25:03

Node.js(6)——npm软件包管理

npm npm是Node.js标准的软件包管理器。 使用&#xff1a; 初始化清单文件&#xff1a;npm init-y(得到package.json文件&#xff0c;有则略过此命令)下载软件包&#xff1a;npm i 软件包名称使用软件包 示例&#xff1a; 初始状态下npm文件夹下只有server.js,下载软件包前看…...

编程日记 2024/8/3 6:24:02

区块链核心概念与技术架构简介

引言 区块链&#xff0c;一种分布式账本技术&#xff0c;不仅为数字货币提供了基础设施&#xff0c;更在金融、供应链、物联网等多个领域展现出广泛的应用前景。区块链技术被认为是继蒸汽机、电力、互联网之后&#xff0c;下一代颠覆性的核心技术。 如果说蒸汽机释放了人们的…...

编程日记 2024/8/3 6:22:59

≌图概念凸显包含射线V的直线W是比V长的线

黄小宁 x轴中&#xff1a;各非负数点xh≥0都变回自己即都作恒等变换&#xff0c;其余点x-h都变号为xh就使x轴失去负数点而变为射线V{xh≥0}。这x轴变为射线V⊂x轴是不保距变换即不是x轴的刚体运动使x轴不≌V⊂x轴&#xff08;小学生都知道x轴不≌射线V&#xff09;。据≌图概念…...

编程日记 2024/8/3 6:21:57

子路由的配置方法？

子路由的配置方法主要涉及到在Vue-router中定义嵌套路由&#xff0c;即一个路由内部包含多个子路由。以下是配置子路由的基本步骤&#xff1a; 1. 定义父路由 首先&#xff0c;在Vue Router中定义父路由。父路由可以像其他普通路由一样定义&#xff0c;但通常会有一个组件与之…...

编程日记 2024/8/3 6:20:54

【大模型从入门到精通2】openAI api的入门介绍2

互动对话界面的搭建 让我们来看看如何建立一个互动对话界面&#xff0c;用户可以在此输入查询&#xff0c;系统实时处理并显示响应。 import panel as pn # 用于构建图形用户界面# 初始化对话历史记录和GUI组件 conversation_history [] input_widget pn.widgets.TextInpu…...

编程日记 2024/8/3 6:18:47

【前端编程小白】的HTML从零入门到实战

之前有高中毕业生读了博客&#xff0c;想让我帮他找一些前端入门的内容&#xff0c;他们报的计算机专业&#xff0c;想利用开学前夕学习一下&#xff0c;我给他推荐了一些菜鸟教程呀什么的。后来想&#xff0c;看来还是很多人需要一些更加入门的可成的&#xff0c;而且很多教程…...

编程日记 2024/8/3 6:17:45

easyexcel读文件入批量入es

1. 封装实体类&#xff0c;并对应excel表中的列 Data public class User {private String md5;private String id; ExcelProperty(value "age")private String age;ExcelProperty(value "username")private String name;} 2. 批量入库 private void in…...

编程日记 2024/8/3 6:15:42

JS+H5打字练习器

实现功能 1.导入.TXT文件到打字练习内容&#xff08;部分浏览器可能出于安全问题限制了这一步操作&#xff09; 2.输入文本到打字练习内&#xff08;弹出输入框&#xff0c;将要练习的内容输入至输入框&#xff09; 3. 开始练习&#xff0c;并根据正误在打字练习内容文本上修…...

编程日记 2024/8/3 6:14:41

windows系统关闭开机自检硬盘

效果&#xff1a; 注册表关闭开机硬盘自检&#xff0c;你可以按照以下步骤操作&#xff1a; 打开注册表编辑器&#xff1a; 按 Win R 键打开“运行”对话框。输入 regedit 并按回车&#xff0c;打开注册表编辑器。 定位到自检相关的键&#xff1a; 依次展开以下路径&#x…...

编程日记 2024/8/3 6:13:39

【多线程开发 5】实践使用Lock和Condition

Lock和Condition Lock 线程之间同步或者竞争都需要锁这类结构&#xff0c;一般我们都会用Object的wait和signal搭配synchronized关键字进行多线程开发&#xff0c;但是很多时候会造成死锁的现象&#xff0c;这是因为synchroniezd无法破坏死锁的产生条件&#xff0c;但是Lock接…...

编程日记 2024/8/3 6:12:38

2.4-结构化并发：协程的结构化异常管理

文章目录 协程结构化异常流程协程结构化异常流程和取消流程的区别子协程异常为什么要连带取消父协程&#xff1f; CoroutineExceptionHandler异常协程异常的最后一道拦截&#xff1a;CoroutineExceptionHandlerCoroutineExceptionHandler 为什么只能设置给最外层协程才有效&…...

编程日记 2024/8/3 6:11:37

Android 12.0 debug版本打开OEM解锁开关功能实现

通常为了方便push在debug版本会采用如下命令 adb root adb disable-verity 提示&#xff1a; Device is locked. Please unlock the device first. 查找日志可以发现system/core/set-verity-state/set-verity-state.cpp文件中is_avb_device_locked方法里 这个获取ro.boot…...

编程日记 2024/8/3 6:10:36

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/6/21 5:42:11

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2025/7/6 10:43:18

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/7/7 12:57:13

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/6/15 21:47:30

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/7/5 2:52:28

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/7/7 7:48:59

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/6/19 6:02:19

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/7/6 16:59:34

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2025/7/4 4:47:37

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20