IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript 系列二:数据类型 -> 正文阅读

[JavaScript知识库]JavaScript 系列二:数据类型

快来加入我们吧!

"小和山的菜鸟们",为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验,请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习,及时获取最新文章。

"Code tailor" ,如果您对我们文章感兴趣、或是想提一些建议,微信关注 “小和山的菜鸟们” 公众号,与我们取的联系,您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励!

前言

在开始学习之前,我们想要告诉您的是,本文章是对JavaScript语言知识中**“数据类型”**部分的总结,如果您已掌握下面知识事项,则可跳过此环节直接进入题目练习

  • Boolean 类型
  • null 类型
  • undefined 类型
  • Number 类型
  • String 类型
  • BigInt 类型
  • Symbol 类型
  • Object 类型
  • 数值类型转换

如果您对某些部分有些遗忘,👇🏻 已经为您准备好了!

汇总总结

Boolean 类型

Boolean(布尔值) 类型是 ECMAScript 中使用最频繁的类型之一,有两个字面值:truefalse 。这两个布尔值不同于数值,因此 true 不等于 1false 不等于 0

let xhsFound = true

let xhsLost = false

**注意:**布尔值字面量 truefalse 是区分大小写的(即不能使用 FalseTrue )。

Boolean() 转型函数

该函数可以将一个其他类型的值转换为布尔值。

let message = 'Hello world!'

let messageAsBoolean = Boolean(message) // true

Boolean() 转型函数可以在任意类型的数据上调用,而且始终返回一个布尔值。什么值能转换为 truefalse 的规则取决于数据类型和实际的值。

不同类型与布尔值之间的转换规则

数据类型转换为 true 的值转换为 false 的值
Booleantruefalse
String非空字符串“”(空字符串)
Number非零数值(包括无穷值)0、NaN(参见后面的相关内容)
Object任意对象null
UndefinedN/A(不存在)undefined

理解以上转换非常重要,因为像 if 等流控制语句会自动执行其他类型值到布尔值的转换,例如:

let message = 'Hello world!'

if (message) {
  console.log('Value is true')
}

在这个例子中,console.log 会输出字符串 "Value is true" ,因为字符串 message 会被自动转换为等价的布尔值 true。由于存在这种自动转换,理解控制语句中使用的是什么变量就非常重要。错误地使用对象而不是布尔值会明显改变应用程序的执行逻辑。

null 类型

null 类型同样只有一个值,即特殊值 null 。逻辑上讲,null 值表示一个空对象指针,这也是给 typeof 传一个 null 会返回 "object" 的原因。

let xhsObject = null

console.log(typeof xhsObject) // "object"

在定义将来要保存对象值的变量时,建议使用 null 来初始化,不要使用其他值。这样,只要检查这个变量的值是不是 null 就可以知道这个变量是否在后来被重新赋予了一个对象的引用。

if (xhsObject != null) {
  // xhsNull 是一个对象的引用
}

undefined 值是由 null 值派生而来的,因此 ECMA-262 将它们定义为表面上相等

console.log(null == undefined) // true

用等于操作符(==)比较 nullundefined 始终返回 true 。但要注意,这个操作符会为了比较而转换它的操作数。

即使 nullundefined 有关系,它们的用途也是完全不一样的。永远不必显式地将变量值设置为 undefined 。但 null 不是这样的。任何时候,只要变量要保存对象,而当时又没有那个对象可保存,就要用 null 来填充该变量。这样就可以保持 null 是空对象指针的语义,并进一步将其与 undefined 区分开来。

null 是一个假值。因此,如果需要,可以用更简洁的方式检测它。不过要记住,也有很多其他可能的值同样是假值。所以一定要明确自己想检测的就是 null 这个字面值,而不仅仅是假值。

let xhsMessage = null

let xhsAge

if (xhsMessage) {
  // 这个块不会执行
}
if (!xhsMessage) {
  // 这个块会执行
}
if (xhsAge) {
  // 这个块不会执行
}
if (!xhsAge) {
  // 这个块会执行
}

undefined 类型

undefined 类型只有一个值,就是特殊值 undefined 。当使用 varlet 声明了变量但没有初始化时,就相当于给变量赋予了 undefined 值。

let xhsMessage

console.log(xhsMessage == undefined) // true

在这个例子中,变量 xhsMessage 在声明的时候并未初始化。而在比较它和 undefined 的字面值时,两者是相等的。

let xhsMessage = undefined

console.log(xhsMessage == undefined) // true

这里,变量 message 显式地以 undefined 来初始化。但这是不必要的,因为默认情况下,任何未经初始化的变量都会取得 undefined 值。

注意 一般来说,永远不用显式地给某个变量设置 undefined 值。增加这个特殊值的目的就是为了正式明确空对象指针( null )和未初始化变量的区别。

注意,包含 undefined 值的变量跟未定义变量是有区别的。请看下面的例子:

let xhsMessage // 这个变量被声明了,只是值为 undefined

// 确保没有声明过这个变量

// let xhsAge

console.log(xhsMessage) // "undefined"

console.log(xhsAge) // 报错

在上面的例子中,第一个 console.log 会指出变量 message 的值,即 "undefined" 。而第二个 console.log 要输出一个未声明的变量 age 的值,因此会导致报错。对未声明的变量,只能执行一个有用的操作,就是对它调用 typeof 。(对未声明的变量调用 delete 也不会报错,但这个操作没什么用,实际上在严格模式下会抛出错误。)

在对未初始化的变量调用 typeof 时,返回的结果是 "undefined" ,但对未声明的变量调用它时,返回的结果还是 "undefined" ,这就有点让人看不懂了。

let xhsMessage // 这个变量被声明了,只是值为 undefined

// 确保没有声明过这个变量

// let xhsAge

console.log(typeof xhsMessage) // "undefined"

console.log(typeof xhsAge) // "undefined"

无论是声明还是未声明,typeof 返回的都是字符串 "undefined" 。逻辑上讲这是对的,因为虽然严格来讲这两个变量存在根本性差异,但它们都无法执行实际操作。

注意: 即使未初始化的变量会被自动赋予 undefined 值,但我们仍然建议在声明变量的同时进行初始化。这样,当 typeof 返回 "undefined" 时,你就会知道那是因为给定的变量尚未声明,而不是声明了但未初始化。

undefined 是一个假值。因此,如果需要,可以用更简洁的方式检测它。不过要记住,也有很多其他可能的值同样是假值。所以一定要明确自己想检测的就是 undefined 这个字面值,而不仅仅是假值。

let xhsMessage // 这个变量被声明了,只是值为 undefined

// xhsAge 没有声明

if (xhsMessage) {
  // 这个块不会执行
}

if (!xhsMessage) {
  // 这个块会执行
}

if (xhsAge) {
  // 这里会报错
}

Number 类型

Number 类型使用 IEEE 754 格式表示整数和浮点值(在某些语言中也叫双精度值)。

十进制整数
let xhsIntNum = 55 // 整数

整数也可以用八进制(以 8 为基数)或十六进制(以 16 为基数)字面量表示。

八进制整数

对于八进制字面量,第一个数字必须是零(0),然后是相应的八进制数字(数值 0~7)。如果字面量中包含的数字超出了应有的范围,就会忽略前缀的零,后面的数字序列会被当成十进制数。

let xhsOctalNum1 = 070 // 八进制的 56

let xhsOctalNum2 = 079 // 无效的八进制值,当成 79 处理

let xhsOctalNum3 = 08 // 无效的八进制值,当成 8 处理
十六进制整数

要创建十六进制字面量,必须让真正的数值前缀 0x(区分大小写),然后是十六进制数字(0~9 以 及 A~F)。十六进制数字中的字母大小写均可。

let xhsHexNum1 = 0xa // 十六进制 10

let xhsHexNum2 = 0x1f // 十六进制 31

注意

  • 使用八进制和十六进制格式创建的数值在所有数学操作中都被视为十进制数值。
  • 由于 JavaScript 保存数值的方式,实际中可能存在正零( +0 )和负零( -0 )。正零和负零在所有情况下都被认为是等同的,这里特地说明一下。

浮点值

要定义浮点值,数值中必须包含小数点,而且小数点后面必须至少有一个数字。虽然小数点前面不是必须有整数,但推荐加上。

let xhsFloatOne = 1.11111

let xhsFloatTwo = 0.11111

let xhsFloatThree = 0.11111 // 有效,不推荐

因为存储浮点值使用的内存空间是存储整数值的 两倍 ,所以 ECMAScript 总是想方设法把值转换为整数。在小数点后面没有数字的情况下,数值就会变成整数。

let xhsFloatOne = 1 // 小数点后面没有数字,当成整数 1 处理

let xhsFloatTwo = 2.0 // 小数点后面是零,当成整数 2 处理

对于非常大或非常小的数值,浮点值可以用科学记数法来表示。科学记数法用于表示一个应该乘以 10 的给定次幂的数值。ECMAScript 中科学记数法的格式要求是一个数值(整数或浮点数)后跟一个大写或小写的字母 e,再加上一个要乘的 10 的多少次幂。

let xhsFloat = 3.125e4 // 等于 31250

科学记数法也可以用于表示非常小的数值,例如 0.000 000 000 000 000 03。这个数值用科学记数法可以表示为 3e-17

浮点值的精确度最高可达 17 位小数,但在算术计算中远不如整数精确。例如, 0.10.2 得到的不是 0.3 。由于这种微小的舍入错误,导致很难测试特定的浮点值。

if (a + b == 0.3) {
  //这样判断是错误的
  // 0.1 + 0.2 = 0.300 000 000 000 000 04
  console.log('输出 0.3 .')
}

这里检测两个数值之和是否等于 0.3。如果两个数值分别是 0.050.25,或者 0.150.15 ,那没问题。但如果是 0.10.2,如前所述,测试将失败。因此永远不要测试某个特定的浮点值。

值的范围

最大和最小值

由于内存的限制, ECMAScript 并不支持表示这个世界上的所有数值。

  • 数值保存在 Number.MIN_VALUE 中,这个值在多数浏览器中是 5e-324
  • 数值保存在 Number.MAX_VALUE 中,这个值在多数浏览器中是 1.797 693 134 862 315 7e+308
无穷大和无穷小

如果某个计算得到的数值结果超出了可表示的范围,那么这个数值会被自动转换为一个特殊的 Infinity(无穷)值。

  • 任何无法表示的负数以-Infinity(负无穷大)表示
  • 任何无法表示的正数以 Infinity(正无穷大)表示。
isFinite()函数

用于确认一个值是不是在有限数值范围之内(即最大值和最小值之间),不在 false ,再显示 true

let xhsResult = Number.MAX_VALUE + Number.MAX_VALUE

console.log(isFinite(xhsResult)) // false

注意

  • 如果计算返回正 Infinity负 Infinity,则该值将不能再进一步用于任何计算。这是因为 Infinity 没有可用于计算的数值表示形式。
  • 使用 Number.NEGATIVE_INFINITYNumber.POSITIVE_INFINITY 也可以获取正、负 Infinity。没错,这两个属性包含的值分别就是 -InfinityInfinity
  • 虽然超出有限数值范围的计算并不多见,但总归还是有可能的。因此在计算非常大或非常小的数值时,有必要监测一下计算结果是否超出范围。

NaN

有一个特殊的数值叫 NaN ,意思是“不是数值”( Not a Number ),用于表示本来要返回数值的操作失败了(而不是抛出错误)。比如,用 0 除任意数值在其他语言中通常都会导致错误,从而中止代码执行。但在 ECMAScript 中, 0+0-0 相除会返回 NaN

console.log(0 / 0) // NaN

console.log(-0 / +0) // NaN

如果分子是非 0 值,分母是有符号 0 或无符号 0,则会返回 Infinity-Infinity

console.log(1 / 0) // Infinity

console.log(1 / -0) // -Infinity
NaN 的独特属性
  • 任何涉及 NaN 的操作始终返回 NaN(如 NaN/10),在连续多步计算时这可能是个问题
  • NaN 不等于包括 NaN 在内的任何值。例如,下面的比较操作会返回 false
console.log(NaN == NaN) // false
isNaN()函数

该函数接收一个参数,可以是任意数据类型,判断这个参数是不是“不是数值”。该函数会尝试把传入的参数转换为数值。可以转化为数值的则返回 false ,如字符串 "1" 或布尔值。不能转换为数值的值则返回 true .

console.log(isNaN(NaN)) // true

console.log(isNaN(1)) // false,1 是数值

console.log(isNaN('1')) // false,可以转换为数值 1

console.log(isNaN('blue')) // true,不可以转换为数值

console.log(isNaN(true)) // false,可以转换为数值 1

注意: 虽然不常见,但 isNaN() 可以用于测试对象。此时,首先会调用对象的 valueOf() 方法,然后再确定返回的值是否可以转换为数值。如果不能,再调用 toString() 方法,并测试其返回值。

String 类型

String (字符串)数据类型表示零或多个 16 位 Unicode 字符序列。字符串可以使用双引号( "" )、单引号('')或反引号( `` )标示。

let xhsFirstName = 'John'

let xhsLastName = 'Jacob'

let xhsLastName = `Jingleheimerschmidt`

let xhsError = 'Nicholas"; // 语法错误:开头和结尾的引号必须是同一种

字符字面量

语法

字面量是由语法表达式定义的常量,或通过由一定字词组成的语词表达式定义的常量。

字符串数据类型包含一些字符字面量,用于表示非打印字符或有其他用途的字符。

字 面 量含 义
\n换行
\t制表
\b退格
\r回车
\f换页
\反斜杠(\)
单引号(’),在字符串以单引号标示时使用,例如’He said, ‘hey.’’
"双引号("),在字符串以双引号标示时使用,例如"He said, “hey.”"
`反引号(`),在字符串以反引号标示时使用,例如` He said, ` hey.``
\xnn以十六进制编码 nn 表示的字符(其中 n 是十六进制数字 0~F),例如\x41 等于"A"
\unnnn以十六进制编码 nnnn 表示的 Unicode 字符(其中 n 是十六进制数字 0~F),例如\u03a3 等于希腊字符"Σ"

这些字符字面量可以出现在字符串中的任意位置,且可以作为单个字符被解释:

let text = 'This is the letter sigma: \u03a3.'

在这个例子中,即使包含 6 个字符长的转义序列,变量 text 仍然是 28 个字符长。因为转义序列表示一个字符,所以只算一个字符。

console.log(text.length) // 28   字符串的长度获取

这个属性返回字符串中 16 位字符的个数。

注意: 如果字符串中包含双字节字符,那么 length 属性返回的值可能不是准确的字符数。

字符串的特点

字符串是不可变的,意思是一旦创建,它们的值就不能变了。要修改某个变量中的字符串值,必须先销毁原始的字符串,然后将包含新值的另一个字符串保存到该变量。

let lang = 'Java'

lang = lang + 'Script'

这里,变量 lang 一开始包含字符串"Java"。紧接着,lang 被重新定义为包含"Java""Script"的组合,也是"JavaScript"。整个过程首先会分配一个足够容纳 10 个字符的空间,然后填充上"Java""Script"。最后销毁原始的字符串"Java"和字符串"Script",因为这两个字符串都没有用了。

字符串插值

模板字面量最常用的一个特性是支持字符串插值,也就是可以在一个连续定义中插入一个或多个值。技术上讲,模板字面量不是字符串,而是一种特殊的 JavaScript 句法表达式,只不过求值后得到的是字符串。模板字面量在定义时立即求值并转换为字符串实例,任何插入的变量也会从它们最接近的作用域中取值。

字符串插值通过在 ${} 中使用一个 JavaScript 表达式实现:

let value = 5

let exponent = 'second'

// 以前,字符串插值是这样实现的:

let interpolatedString = value + ' to the ' + exponent + ' power is ' + value * value

// 现在,可以用模板字面量这样实现:

let interpolatedTemplateLiteral = `${value} to the ${exponent} power is ${value * value}`

console.log(interpolatedString) // 5 to the second power is 25

console.log(interpolatedTemplateLiteral) // 5 to the second power is 25

所有插入的值都会使用 toString() 强制转型为字符串,而且任何 JavaScript 表达式都可以用于插值。

  • 嵌套的模板字符串无须转义:
console.log(`Hello, ${`World`}!`) // Hello, World!
  • 将表达式转换为字符串时会调用 toString()
let foo = { toString: () => 'World' }

console.log(`Hello, ${foo}!`) // Hello, World!
  • 在插值表达式中可以调用函数和方法:
function capitalize(word) {
  return `${word[0].toUpperCase()}${word.slice(1)}`
}

console.log(`${capitalize('hello')}, ${capitalize('world')}!`) // Hello, World!

其他类型转换为字符串

有两种方式把一个值转换为字符串。首先是使用几乎所有值都有的 toString()方法。这个方法唯一的用途就是返回当前值的字符串等价物。

let xhsAge = 11
let xhsAgeAsString = xhsAge.toString() // 字符串"11"

let xhsFound = true
let xhsFoundAsString = xhsFound.toString() // 字符串"true"

toString()方法可见于数值、布尔值、对象和字符串值。(没错,字符串值也有 toString()方法,该方法只是简单地返回自身的一个副本。)nullundefined 值没有 toString() 方法。

多数情况下,toString() 不接收任何参数,默认情况下返回十进制,也可以通过参数来设置进制数。

let xhsNum = 10

console.log(xhsNum.toString()) // "10"

console.log(xhsNum.toString(2)) // "1010"

console.log(xhsNum.toString(8)) // "12"

console.log(xhsNum.toString(10)) // "10"

console.log(xhsNum.toString(16)) // "a"

注意,默认情况下(不传参数)的输出与传入参数 10 得到的结果相同。

如果你不确定一个值是不是 nullundefined ,可以使用 String() 转型函数,它始终会返回表示相应类型值的字符串。 String() 函数 遵循如下规则。

  • 如果值有 toString() 方法,则调用该方法(不传参数)并返回结果。

  • 如果值是 null ,返回 "null"

  • 如果值是 undefined,返回 "undefined"

let xhsValue1 = 10
let xhsValue2 = true
let xhsValue3 = null
let xhsValue4

console.log(String(xhsValue1)) // "10"

console.log(String(xhsValue2)) // "true"

console.log(String(xhsValue3)) // "null"

console.log(String(xhsValue4)) // "undefined"

这里展示了将 4 个值转换为字符串的情况: 数值布尔值nullundefined

数值布尔值 的转换结果与调用 toString() 相同。因为 nullundefined 没有 toString() 方法,所以 String() 方法就直接返回了这两个值的字面量文本。

注意: 用加号操作符给一个值加上一个空字符串""也可以将其转换为字符串

BigInt 类型

BigInt 是一种内置对象,它提供了一种方法来表示大于 2^53 - 1 的整数。这原本是 Javascript 中可以用 Number 表示的最大数字。 BigInt 可以表示任意大的整数。

描述 可以用在一个整数字面量后面加 n 的方式定义一个 BigInt ,如:10n,或者调用函数 BigInt()

const theBiggestInt = 9007199254740991n

const alsoHuge = BigInt(9007199254740991)
// ? 9007199254740991n

const hugeString = BigInt('9007199254740991')
// ? 9007199254740991n

const hugeHex = BigInt('0x1fffffffffffff')
// ? 9007199254740991n

const hugeBin = BigInt('0b11111111111111111111111111111111111111111111111111111')
// ? 9007199254740991n

它在某些方面类似于 Number ,但是也有几个关键的不同点:不能用于 Math 对象中的方法;不能和任何 Number 实例混合运算,两者必须转换成同一种类型。在两种类型来回转换时要小心,因为 BigInt 变量在转换成 Number 变量时可能会丢失精度。

Symbol 类型

symbol 是一种基本数据类型( primitive data type )。 Symbol() 函数会返回 symbol 类型的值,该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象;它的静态方法会暴露全局的 symbol 注册,且类似于内建对象类,但作为构造函数来说它并不完整,因为它不支持语法:"new Symbol()"

每个从 Symbol() 返回的 symbol 值都是唯一的。一个 symbol 值能作为对象属性的标识符;这是该数据类型仅有的目的。

语法

参数 description 可选

Symbol([description])

可选的,字符串类型。对 symbol 的描述,可用于调试但不是访问 symbol 本身。

描述

直接使用 Symbol() 创建新的 symbol 类型,并用一个可选的字符串作为其描述。

var sym1 = Symbol()
var sym2 = Symbol('foo')
var sym3 = Symbol('foo')

上面的代码创建了三个新的 symbol 类型。 注意, Symbol("foo") 不会强制将字符串 “foo” 转换成 symbol 类型。它每次都会创建一个新的 symbol 类型:

Symbol('foo') === Symbol('foo') // false

下面带有 new 运算符的语法将抛出 TypeError 错误:

var sym = new Symbol() // TypeError

这会阻止创建一个显式的 Symbol 包装器对象而不是一个 Symbol 值。围绕原始数据类型创建一个显式包装器对象从 ECMAScript 6 开始不再被支持。 然而,现有的原始包装器对象,如 new Booleannew String 以及 new Number ,因为遗留原因仍可被创建。

如果你真的想创建一个 Symbol 包装器对象 ( Symbol wrapper object ),你可以使用 Object() 函数:

var sym = Symbol('foo')
typeof sym // "symbol"
var symObj = Object(sym)
typeof symObj // "object"

Object 类型

ECMAScript 中的对象其实就是一组数据和功能的集合。对象通过 new 操作符后跟对象类型的名称来创建。开发者可以通过创建 Object 类型的实例来创建自己的对象,然后再给对象添加属性和方法.

let xhsO = new Object()

ECMAScript 中的 Object 是派生其他对象的基类。 Object 类型的所有属性和方法在派生的对象上同样存在。每个 Object 实例都有如下属性和方法。

  • constructor :用于创建当前对象的函数。在前面的例子中,这个属性的值就是 Object() 函数。

  • hasOwnProperty(*propertyName*) :用于判断当前对象实例(不是原型)上是否存在给定的属性。要检查的属性名必须是字符串(如 o.hasOwnProperty("name") )或符号。

  • isPrototypeOf(*object*) :用于判断当前对象是否为另一个对象的原型。

  • propertyIsEnumerable(*propertyName*) :用于判断给定的属性是否可以使用 for-in 语句枚举。与 hasOwnProperty() 一样,属性名必须是字符串。

  • toLocaleString() :返回对象的字符串表示,该字符串反映对象所在的本地化执行环境。

  • toString() :返回对象的字符串表示。

  • valueOf() :返回对象对应的字符串、数值或布尔值表示。通常与 toString() 的返回值相同。

因为在 ECMAScriptObject 是所有对象的基类,所以任何对象都有这些属性和方法。

数值类型转换

有 3 个函数可以将非数值转换为数值: Number()parseInt()parseFloat()Number() 是转型函数,可用于任何数据类型。后两个函数主要用于将字符串转换为数值。对于同样的参数,这 3 个函数执行的操作也不同。

Number() 函数

基于如下规则执行转换。

  • 布尔值, true 转换为 1false 转换为 0

  • 数值,直接返回。

  • null ,返回 0

  • undefined ,返回 NaN

  • 字符串,应用以下规则。

    • 如果字符串包含数值字符,包括数值字符前面带加、减号的情况,则转换为一个十进制数值。因此, Number("1") 返回 1Number("123") 返回 123Number("011") 返回 11 (忽略前面的零)。
    • 如果字符串包含有效的浮点值格式如 "1.1" ,则会转换为相应的浮点值(同样,忽略前面的零)。
    • 如果字符串包含有效的十六进制格式如 "0xf" ,则会转换为与该十六进制值对应的十进制整数值。
    • 如果是空字符串(不包含字符),则返回 0
    • 如果字符串包含除上述情况之外的其他字符,则返回 NaN
  • 对象,调用 valueOf() 方法,并按照上述规则转换返回的值。如果转换结果是 NaN ,则调用 toString() 方法,再按照转换字符串的规则转换。

let xhsNum1 = Number('Hello world!') // NaN

let xhsNum2 = Number('') // 0

let xhsNum3 = Number('000011') // 11

let xhsNum4 = Number(true) // 1

parseInt() 函数

  • 字符串最前面的空格会被忽略,从第一个非空格字符开始转换
  • 如果第一个字符不是数值字符、加号或减号, parseInt() 立即返回 NaN
  • 如果第一个字符是数值字符、加号或减号,则继续依次检测每个字符,直到字符串末尾,或碰到非数值字符。比如, "1234blue" 会被转换为 1234 ,因为 "blue" 会被完全忽略。类似地, "22.5" 会被转换为 22 ,因为小数点不是有效的整数字符。

假设字符串中的第一个字符是数值字符, parseInt() 函数也能识别不同的整数格式(十进制、八进制、十六进制)。换句话说,如果字符串以 "0x" 开头,就会被解释为十六进制整数。如果字符串以 "0" 开头,且紧跟着数值字符,在非严格模式下会被某些实现解释为八进制整数。

let xhsNum1 = parseInt('1234blue') // 1234

let xhsNum2 = parseInt('') // NaN

let xhsNum3 = parseInt('0xA') // 10,解释为十六进制整数

let xhsNum4 = parseInt(22.5) // 22

let xhsNum5 = parseInt('70') // 70,解释为十进制值

let xhsNum6 = parseInt('0xf') // 15,解释为十六进制整数

parseInt() 也接收第二个参数,用于指定进制数。可以省略前面的 0x 或者 0

let xhsNum = parseInt('0xAF', 16) // 175

let xhsNum1 = parseInt('AF', 16) // 175

let xhsNum2 = parseInt('AF') // NaN

通过第二个参数,可以极大扩展转换后获得的结果类型。

let xhsNum1 = parseInt('10', 2) // 2,按二进制解析

let xhsNum2 = parseInt('10', 8) // 8,按八进制解析

let xhsNum3 = parseInt('10', 10) // 10,按十进制解析

let xhsNum4 = parseInt('10', 16) // 16,按十六进制解析

注意: 多数情况下解析的应该都是十进制数,此时第二个参数就要传入 10

parseFloat() 函数

该函数的工作方式跟 parseInt() 函数类似,都是从位置 0 开始检测每个字符。同样,它也是解析到字符串末尾或者解析到一个无效的浮点数值字符为止。这意味着第一次出现的小数点是有效的,但第二次出现的小数点就无效了,此时字符串的剩余字符都会被忽略。因此, "22.34.5" 将转换成 22.34

注意

  • 它始终忽略字符串开头的零
  • 十六进制数值始终会返回 0
  • 如果字符串表示整数(没有小数点或者小数点后面只有一个零),则 parseFloat() 返回整数
let xhsNum1 = parseFloat('1234blue') // 1234,按整数解析

let xhsNum2 = parseFloat('0xA') // 0

let xhsNum3 = parseFloat('22.5') // 22.5

let xhsNum4 = parseFloat('22.34.5') // 22.34

let xhsNum5 = parseFloat('0908.5') // 908.5

let xhsNum6 = parseFloat('3.125e7') // 31250000

题目自测

一:null 和 undefined 的区别是什么?


二:以下代码,哪个结果返回的是 NaN()

A. let a = Number('')

B. let b = Number('xhs')

C. let c = Number(true)

D. let d = Number(120);


三: 以下代码输出什么?

let a = 12
let b = false
let c = null
let d = undefined
console.log(typeof a.toString())
console.log(typeof b.toString())
console.log(String(c))
console.log(String(d))

题目解析

一、
nullundefined 都是基本的数据类型,它们都本身都只有一个值,就是 nullundefined 。 undefined 表示未定义,null 表示为空对象。

null == undefined // true
null === undefined // false

Number(null) // 0
Number(undefined) // NaN

二、
Answr:B

此处用到了数值类型转换中的 Number() 函数

A 为空字串,转换之后返回的是 0 , B 字符串中的其他类型,转化为 NaN ,C true 会先转化为 1 ,然后转化为数值,D 普通数值,返回原来的值,所以是 120

三、
toString() 方法将值都转化为字符串的方式输出。然而 nullundefined 没有 toString() 方法,可以使用 String() 直接转化为字符串。

// 'string'
// 'string'
// 'null'
// 'undefined'
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-07-13 17:22:27  更:2021-07-13 17:25:00 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/5 2:26:55-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码