🔥JavaScript：类型转换的艺术与逻辑🔥（上）

Danta
489 阅读5分钟

JS有一类知识，十分不友好，有许多的弯弯绕绕，存在复杂的情况，这便是类型转化。

前言

类型转换不仅仅是简单的数据变换，它更像是一门艺术——一种在灵活性与精确性之间寻求平衡的艺术。同时，它也是一门逻辑严密的学科，要求开发者对规则有着清晰的理解和准确的应用。

今天，我将带你解析其中的秘密，带你在各种基本类型中转转转！！！

屏幕截图 2024-12-18 111824.png

🎭话不多说，先来个开胃小菜，让大家先热热身：


var a = "1"; // 字符串
console.log(typeof a); // "string"

a = Number("1"); // 转换为数字
console.log(typeof a); // "number"

a = true; // 转换为布尔值
console.log(typeof a); // "boolean"

这个案例由 字符串 => Number => boolean ,很好的体现JS是一门软类型语言，类型由值来决定这一特点。

🔄Boolean ：true | flase

在Boolean中，存在9种情况为false:

console.log(Boolean()) // 默认值为false
console.log(Boolean(false))
console.log(Boolean(undefined)) 
console.log(Boolean(null)) 
console.log(Boolean(0)) 
console.log(Boolean(+0),'+0') 
console.log(Boolean(-0),'-0') 
console.log(Boolean(NaN),'NaN') 
console.log(Boolean(''))

其他情况当是true了，非黑即白的道理

 console.log(Boolean(true))
 console.log(Boolean(1))

Number : NaN | Infinity

在介绍Number转换时，我想给大家讲清楚 NaN和Infinity的概念，以帮助大家更好的去理解

什么是Infinity ？

console.log(1/0+0) // Infinity 正无穷
console.log(1/-0) // -Infinity 负无穷
  • 当你用 1 除以 0，JavaScript 返回 Infinity 表示正无穷大。加上 0 不会改变这个值，所以结果仍然是 Infinity。
  • 负零（-0）是 JavaScript 中的一个特殊数值。当你用 1 除以 -0，结果是负无穷大 (-Infinity)。

什么是NaN？

它代表“不是一个数字”（Not-a-Number），尽管它的名字是“不是一个数字”，但在类型上，NaN 实际上属于 number 类型，这可能会让人感到困惑。

含义：

我们先来简单看看代码，其中的涉及到的隐式转换会在文章下篇中讲到。

console.log(1*'a') // NaN

简单理解这段代码的含义为：

  • JavaScript 首先尝试将 'a' 转换为一个数字。
  • 由于 'a' 不能被解析为一个有效的数字，无可奈何的情况下：它被转换为 NaN。
  • 然后 1 * NaN 结果仍然是 NaN，因为任何数与 NaN 进行算术运算的结果都是 NaN。
console.log(parseInt('123')) // 123
console.log(parseInt('aaa')) // NaN

此处的NaN,就感觉很有艺术性，像是JS把所有办法都试过了，都无法将'aaa' 转成数字，可它最终为了程序的运行，赋予它NaN，彷佛在告诉你哥们我真的努力了，没办法了。

特性：

  1. 自我不等性:
  console.log(NaN === NaN) // false
  • NaN 不等于任何值，包括它自己。这意味着 NaN === NaN 会返回 false。这是因为在 IEEE 754 浮点数标准中，NaN 被设计为与所有其他值都不相等，包括另一个 NaN。
  1. 传播性:
console.log( NaN+5)
  • 在算术运算中，如果任何一个操作数是 NaN，那么结果也会是 NaN。
  1. 类型检查:
console.log(typeof NaN)
  • 使用 typeof 操作符来检查 NaN 的类型会返回 "number"。这是因为它实际上是一个特殊的浮点数。

判断：

这时候可能长的帅的读者就要说了，那NaN有自我不等性，那如果我要检擦NaN的时候，怎么办呢？ 不用担心，JS已经想你所想了。

// 不能通过===NaN来判断是否是NaN 所以会有isNaN
console.log(isNaN(NaN),isNaN(parseInt('aaa'))) // true

基本数据类型间的显示类型转换之Number：

规范介绍：

image.png

  • 如果提供了 value，则返回一个数值（不是一个 Number 对象），该数值是由 ToNumber(value) 计算得出的。
  • 如果没有提供 value，则返回 +0。
console.log(Number()) // 默认值为0

// NaN undefined 数值上下文中没有转成一个特定数字的含义
console.log(Number(undefined)) // NaN
console.log(Number(null))   // 0
console.log(Number(NaN)) // NaN

console.log(Number(false))   // 0
console.log(Number(true))   // 1

console.log(Number('123'))  // 123
console.log(Number('-123')) // -123
// 16进制
console.log(Number('0x11'))  // 17

console.log(Number(''),Number(' ')) // 0 0
console.log(Number('100a')) // NaN

重点分析一下 Null 和undifined ，也是有艺术的体现。展示了 JavaScript 在处理不同类型时的不同行为：

  • undefined 转换为数字时返回 NaN，因为 undefined 是 JavaScript 中的一个原始值，表示一个未定义的变量或属性，但没有明确的数值意义。简单来说:就是undefined是有值的，但是还没被定义，转不成Number
  • null 转换为数字时返回 0，因为 null 在数值上下文中被视为“无”，即零。
  • 简单来说:就是undefined是有值的，但是还没被定义，转不成Number，而null是个空值，数字中的空值对应的不就是0吗？

String

先看规范：

image.png

  • 如果提供了 value，则返回一个字符串值（不是一个字符串对象），该字符串值是由 ToString(value) 计算得出的。
  • 如果没有提供 value，则返回空字符串 ""。

基本数据类型间的显示类型转换之String

console.log(String()) // ''
console.log(String(undefined),typeof String(undefined)) // 'undefined'
console.log(String(null)) // 'null'
console.log(String(false)) // 'false'
console.log(String(true)) // 'true'
console.log(String(NaN)) // 'NaN'
console.log(String(+0),String(-0)) // '0' '0'
console.log(String(1)) // '1'

📚小结：

本文带大家了解了基本类型之间的转转转，还有基本=>复杂，复杂=> 基本，没给大家理清楚，预计在下文中推出， 如果本文对你有帮助，请留下一个小小的赞，若有错误，也请指教。

屏幕截图 2024-12-18 111645.png
avatar
文章
阅读
粉丝