尧图网络科技YAOTU DIGITAL 获取报价
获取报价
首页 / 资讯中心 / 文章详情

Modern JavaScript Tutorial 精读:JavaScript 的 8 种数据类型与 typeof 运算符全解析

发布时间:2026/9/30 1:53:13

资讯中心
01
ARTICLE

Modern JavaScript Tutorial 精读:JavaScript 的 8 种数据类型与 typeof 运算符全解析

Modern JavaScript Tutorial 精读:JavaScript 的 8 种数据类型与 typeof 运算符全解析
文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载JavaScript 中的每一个值都属于某一种数据类型例如字符串或数字。本篇基于《Modern JavaScript Tutorial》本仓库即其英文源文档核心内容见 1-js/02-first-steps/05-types/article.md系统讲解 JavaScript 的 8 种基本数据类型——number、bigint、string、boolean、null、undefined、symbol 与 object以及用于判断变量类型的typeof运算符。读完本篇你将掌握每种数据类型的取值边界、特殊值如NaN、Infinity、字符串的三种引号差异并能用typeof准确识别任意值的运行时类型。动态类型变量本身不绑定类型JavaScript 是一门**动态类型dynamically typed**语言语言中确实存在数据类型但变量并不会被绑定到某一种类型上。同一个变量某一时刻可以存放字符串下一秒又可以存放数字// 不会报错 let message hello; message 123456;这正是与 C、Java 等静态类型语言的核心差异类型属于值而不属于变量。在后面的章节中我们将看到类型转换1-js/02-first-steps/07-type-conversions/article.md正是基于这一特性运作的。JavaScript 共有 8 种基本数据类型其中 7 种为原始类型primitive1 种为非原始类型object。下面逐一展开。number整数与浮点数以及三个特殊数值number类型同时表示整数和浮点数let n 123; n 12.345;针对数字的运算非常丰富乘法*、除法/、加法、减法-等等。除了常规数字number类型还包含三个特殊数值Infinity、-Infinity和NaN。Infinity大于一切数的无穷大Infinity表示数学上的无穷大 ∞它是一个大于任何数字的特殊值。可以通过除以零得到也可以直接引用alert( 1 / 0 ); // Infinity alert( Infinity ); // InfinityNaN计算错误的结果NaNNot a Number代表一次计算错误通常是不正确或未定义的数学运算的结果alert( not a number / 2 ); // NaN这样的除法是错误的NaN具有粘性任何对NaN的后续数学运算都会返回NaNalert( NaN 1 ); // NaN alert( 3 * NaN ); // NaN alert( not a number / 2 - 1 ); // NaN也就是说只要数学表达式中出现一个NaN它就会传播到整个结果唯一的例外是NaN ** 0结果为1。数学运算是安全的在 JavaScript 中做数学运算是安全的除以零、把非数字字符串当数字处理都不会导致脚本以致命错误终止。最坏的结果不过是得到一个NaN。这一点与许多会抛出运行时异常的语言截然不同。需要说明的是Infinity、NaN虽然在形式上属于number类型但它们并非通常意义上的数字。有关数字的深入操作参见 1-js/02-first-steps/05-types/../..//05-data-types/02-number/article.md仓库中的 Number 章节。bigint任意长度的整数number类型无法安全表示绝对值大于(253-1)即9007199254740991的整数。严格来说number可以存储更大的整数最大到1.7976931348623157 × 10308但在安全整数范围±(253-1)之外会出现精度误差因为并非所有数字都能放进固定的 64 位存储此时可能存储的是一个近似值。例如下面两个数字刚好超出安全范围是相同的console.log(9007199254740991 1); // 9007199254740991 1 的结果 console.log(9007199254740991 2); // 也是 9007199254740992换言之所有大于253-1的奇数根本无法在number类型中精确存储。对大多数场景来说±(253-1)已经足够但加密、微秒级时间戳等场景需要真正的超大整数——这就引入了bigint类型。bigint是较新加入语言的类型用于表示任意长度的整数。在整数末尾追加字母n即可创建一个 BigInt 值// 末尾的 n 表示这是一个 BigInt const bigInt 1234567890123456789012345678901234567890n;BigInt 并不常用因此本文不再展开仓库中有独立的 BigInt 专题章节其中包含与普通数字的混合运算规则、BigInt()/Number()显式转换、比较运算等细节需要处理超大整数时可以直接阅读。string字符串与三种引号JavaScript 中的字符串必须被引号包围let str Hello; let str2 Single quotes are ok too; let phrase can embed another ${str};JavaScript 共有 3 种引号双引号Hello单引号Hello反引号Hello双引号和单引号是简单引号两者在 JavaScript 中几乎没有任何区别。反引号则是扩展功能引号它允许通过${…}把变量和表达式嵌入到字符串中let name John; // 嵌入一个变量 alert( Hello, ${name}! ); // Hello, John! // 嵌入一个表达式 alert( the result is ${1 2} ); // the result is 3${…}内部的表达式会被求值结果成为字符串的一部分——可以放变量如name、算术表达式如1 2或更复杂的任意表达式。但请注意这种嵌入功能只能在反引号中生效其他引号不具备alert( the result is ${1 2} ); // the result is ${1 2}双引号不生效没有独立的字符类型一些语言如 C、Java有单独的char字符类型。JavaScript 没有这种类型只有唯一的string类型。字符串可以由零个字符空字符串、一个字符或多个字符组成。关于反引号嵌入的实战练习可参考本目录下的 1-string-quotes 练习题及其官方解答——题目用hello ${1}、hello ${name}、hello ${name}三种写法考察表达式、字符串字面量与变量在模板字符串中的求值差异。字符串的更多细节参见仓库中的 String 章节。boolean逻辑类型布尔类型只有两个值true和false。它通常用来存储是/否类信息true表示是正确false表示否不正确。let nameFieldChecked true; // 是姓名字段已被勾选 let ageFieldChecked false; // 否年龄字段未被勾选布尔值也常作为比较运算的结果let isGreater 4 1; alert( isGreater ); // true比较结果是是布尔值的深入用法参见 Logical operators 章节。null表示空或未知的独立类型特殊的null值不属于前面描述的任一类型它自成一体是一个只包含null一个值的独立类型let age null;需要特别强调的是在 JavaScript 中null不是指向不存在对象的引用也不是其他语言里的空指针。它只是一个特殊值表示无、空或值未知。上面的代码就是在声明age的值是未知的。undefined表示未被赋值特殊值undefined同样独立成类与null一样是独立类型。它的含义是值未被赋值。如果变量已声明但未赋值其值就是undefinedlet age; alert(age); // 显示 undefined技术上你也可以显式地把undefined赋给变量let age 100; // 把值改为 undefined age undefined; alert(age); // undefined但不推荐这样做。惯例是用null给变量赋空或未知值而undefined保留为未赋值变量的默认初始值。object 与 symbol非原始类型与唯一标识符object类型是特殊的除它之外的所有类型都被称为原始类型primitive因为它们的值只能包含单一内容字符串、数字等。相比之下对象用于存储数据集合和更复杂的实体。对象非常重要仓库将在后续的 Object 章节中专门展开本篇先提到这里。symbol类型用于为对象创建唯一标识符。此处出于完整性提及其细节同样推迟到学习对象之后再讲参见 Symbol 章节。typeof 运算符查看变量的类型typeof运算符返回操作数的类型。当我们需要对不同类型做不同处理或只想快速检查类型时它非常有用。调用typeof x会返回一个包含类型名称的字符串typeof undefined // undefined typeof 0 // number typeof 10n // bigint typeof true // boolean typeof foo // string typeof Symbol(id) // symbol typeof Math // object (1) typeof null // object (2) typeof alert // function (3)最后三行需要额外解释typeof Math返回objectMath是提供数学运算的内置对象详见 Number 章节这里仅作为对象示例。typeof null返回object这是typeof中一个官方承认的历史性错误源于 JavaScript 诞生早期为保持兼容而被保留至今。null绝不是对象它是有独立类型的特殊值这里的typeof行为是错误的。typeof alert返回function因为alert是一个函数。后续章节会说明 JavaScript 中并没有独立的 function 类型——函数属于 object 类型但typeof对函数特殊处理、返回function。这也源自 JavaScript 早期技术上并不正确但实践中很方便。typeof(x) 写法你可能还会见到另一种写法typeof(x)。它与typeof x完全等价。需要澄清的是typeof是运算符而非函数这里的括号不属于typeof只是数学分组意义上的括号。通常括号内放的是表达式如(2 2)这里只包含一个参数(x)。从语法上讲这种写法允许在运算符和参数之间省略空格有人喜欢这样写但typeof x这种写法更常见。typeof的实际应用贯穿全仓库例如在 01-object 的 multiply-numeric 练习解答中就用typeof value number来筛选数字属性与浏览器交互章节 alert、prompt、confirm 配合可以快速验证各类输入值的类型。总结JavaScript 共有 8 种基本数据类型7 种原始类型number任意整数或浮点数整数受±(253-1)限制bigint任意长度的整数string字符串可有零个或多个字符没有独立的单字符类型booleantrue/falsenull表示未知值——只含单一值null的独立类型undefined表示未赋值——只含单一值undefined的独立类型symbol用于唯一标识符。1 种非原始类型object用于更复杂的数据结构。typeof运算符可以查看变量中存储的是哪种类型通常写作typeof xtypeof(x)也可返回类型名称字符串如string对null返回object——这是语言本身的错误null实际上不是对象。掌握了这 8 种类型的边界与typeof的判定规则后就可以顺畅地进入下一章类型转换学习值在不同类型间的自动与显式转换。后续章节将集中讲解原始值熟悉之后再转向对象。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐Ventoy终极指南3步创建万能启动盘一U盘装下所有系统Ventoy终极指南3步创建万能启动盘一U盘装下所有系统 还在为每次重装系统都要重新制作启动盘而烦恼吗Ventoy多系统启动盘工具彻底改变了传统启动盘的制操作系统固件开发工具30-seconds-of-interviews 系列精讲JavaScript 数据类型全解析七种内置类型、原始值 vs 对象与 typeof 陷阱30 seconds of interviews 系列精讲JavaScript 数据类型全解析七种内置类型、原始值 vs 对象与 typeof 陷阱 本文教程前端如何为hoverboard-firmware-hack-FOC添加GPS定位功能位置追踪与地理围栏实现如何为hoverboard firmware hack FOC添加GPS定位功能位置追踪与地理围栏实现 hoverboard firmware hack FO嵌入式硬件开发智能硬件物联网上一篇Websoft9故障排除手册常见问题及解决方案大全下一篇Claude Code Router 如何从零创建并安装第一个 Wrapper 插件创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
02
RELATED NEWS

相关资讯

更多网站建设与数字化升级内容

03
WHY YAOTU

想打造同款高转化官网?

懂行业、懂生意,从建站到增长一站式陪跑

◈

场景化定制

不做模板站,围绕你的业务场景量身设计,小众不撞款。

◐

营销型架构

以转化目标组织内容与路径,让官网真正带来询盘。

▲

全周期服务

设计、开发、运营、运维一体,上线只是开始。

免费获取你的建站方案

留下需求,专属顾问 24 小时内为你输出方案建议。