js三大显式类型转换

124 阅读6分钟

我们知道js三大显示类型转换number,string,boolean,废话不多说我们先来看看你能不能写对下面的题目

Boolean

console.log(Boolean())
console.log(Boolean(false))
console.log(Boolean(true))
console.log(Boolean(undefined))
console.log(Boolean(null))
console.log(Boolean(+0),'+0')
console.log(Boolean(-0),'-0')
console.log(Boolean(NaN),'NaN')
console.log(Boolean(''),'')
console.log(1/+0)
console.log(1/-0)
console.log(Object.is(5,5))
//NaN Not a Number
console.log(2*'a')//仔细想想为什么
console.log(typeof NaN)
console.log(parseInt('abc'))
console.log(parseInt('12 abc'))
console.log(Number('12 abc'))
console.log(Number('abc'))
console.log(NaN===NaN)
console.log(isNaN(NaN),isNaN(parseInt('abc')))

。我们来逐个分析:

console.log(Boolean()) // false
console.log(Boolean(false)) // false
console.log(Boolean(true)) // true
console.log(Boolean(undefined)) // false
console.log(Boolean(null)) // false
console.log(Boolean(+0), '+0') // false +0
console.log(Boolean(-0), '-0') // false -0
console.log(Boolean(NaN), 'NaN') // false NaN
console.log(Boolean(''), '') // false 
  • Boolean() 没有参数时返回 false
  • Boolean(false)undefinednull+0-0NaN 和空字符串 '' 都被转换为 false
  • Boolean(true) 返回 true
console.log(1/+0) // Infinity
console.log(1/-0) // -Infinity
  • 分数的分母为 +0 时结果为正无穷大 (Infinity)。
  • 分数的分母为 -0 时结果为负无穷大 (-Infinity)。
console.log(Object.is(5,5)) // true
  • Object.is 方法比较两个值是否严格相等,这里 55 是相等的。
console.log(2 * 'a') // NaN
  • 当你尝试将数字与非数值(如字符串 'a')相乘时,结果是 NaN(不是一个数字)。这里涉及到隐式类型转换,我们下篇文章再讲
console.log(typeof NaN) // "number"
  • NaN 是一种特殊的数值类型,表示“不是一个数字”。
console.log(parseInt('abc')) // NaN
console.log(parseInt('12 abc')) // 12
console.log(Number('12 abc')) // NaN
console.log(Number('abc')) // NaN
  • parseInt 会尝试解析字符串中的整数,如果开头不是数字则返回 NaN
  • parseInt('12 abc') 只解析出开头的整数部分 12
  • Number 函数试图将整个字符串转换为数值,对于不能完全转换的字符串(如 '12 abc''abc'),它返回 NaN
console.log(NaN === NaN) // false
  • NaN 不等于任何值,包括它自己。
console.log(isNaN(NaN), isNaN(parseInt('abc'))) // true true
  • isNaN 函数用来检查一个值是否为 NaN,注意它也会对非数值执行隐式转换,所以要小心使用。

Number

var a = "1" // 值决定
a = Number(a)
b = new Number(a)
console.log(typeof a, typeof b, a, b) // "number" "object" 1 [Number: 1]
  • typeof a 返回 "number",因为 Number(a) 将字符串 "1" 转换成了数值 1
  • typeof b 返回 "object",因为 new Number(a) 创建了一个包装对象,尽管它的原始值是数字。
  • a 是数值 1,而 b 是一个带有原始值 1 的 Number 对象。
console.log(b.toFixed(2), a.toFixed(2)) // "1.00" "1.00"
  • 这两个方法调用都返回了格式化后的字符串 "1.00",即使 a 是原始值,而 b 是对象。 这里又有一个新问题,a明明不是对象,为什么嫩调用方法,大家想想? 其实这就不得不提到我们的js引擎--装箱

在 JavaScript 中,当你对一个原始类型(如数字、字符串或布尔值)调用方法时,JavaScript 引擎会在后台自动将这个原始值包装成对应的对象实例。这种行为被称为“装箱”(boxing)。对于数字类型的值,它会被临时转换为 Number 对象,从而可以访问 Number 对象的方法。

所以当执行 a.toFixed(2) 时,虽然 a 是一个原始的数值类型 (number),但 JavaScript 引擎会做如下处理:

  1. 创建一个临时的 Number 对象,该对象封装了原始的数值 a
  2. 在这个临时的 Number 对象上调用 toFixed 方法。
  3. 使用完方法后,销毁这个临时对象。

这意味着你可以在原始的数值上直接使用属于 Number 对象原型上的方法,而不需要显式地创建 Number 对象

大家明白了吗

我们继续

//number
console.log(Number());
// NaN undefined 数值上下文没有转成一个特定数字的含义
console.log(Number(undefined))
console.log(Number(null))//为什么null与undefined不一样

console.log(Number(false))
console.log(Number(true))
console.log(Number("123"))
console.log(Number("0x123"))
console.log(Number("-123.45"))
console.log(Number(""),Number(''))
console.log(Number('123abc'))

Number() 函数用于将给定的值转换为数值类型。当没有参数或传入特定类型的参数时,它会根据 JavaScript 的类型转换规则来处理这些值。

console.log(Number()); // 0
  • Number() 没有参数时,默认返回 0
console.log(Number(undefined)); // NaN
  • undefined 在数值上下文中会被转换成 NaN(Not-a-Number),表示这是一个非数字值。
console.log(Number(null)); // 0
  • null 被转换成 0。这与 undefined 不同,是因为在 JavaScript 中,null 表示一个“空”的对象引用,而 undefined 表示一个未定义的值,二者有不同的语义和用途。
console.log(Number(false)); // 0
console.log(Number(true)); // 1
  • 布尔值 false 转换为 0,而 true 转换为 1
console.log(Number("123")); // 123
  • 字符串 "123" 可以被解析为有效的整数,因此转换结果是 123
console.log(Number("0x123")); // 291
  • 如果字符串以 "0x""0X" 开头,则被视为十六进制数。"0x123" 是十六进制表示法,等价于十进制的 291
console.log(Number("-123.45")); // -123.45
  • 包含有效浮点数表示的字符串可以被正确地转换为相应的数值。
console.log(Number(""), Number('')); // 0, 0
  • 空字符串 (""' ') 被转换为 0
console.log(Number('123abc')); // NaN
  • 当字符串包含无法解析为数值的字符时(如 '123abc'),整个转换会失败,并返回 NaN

String

console.log(String());
console.log(String(undefined),typeof String(undefined));
console.log(String(null),typeof String(null));
console.log(String(NaN))

String() 函数用于将给定的值转换为字符串类型。当没有参数或传入特定类型的参数时,它会根据 JavaScript 的类型转换规则来处理这些值。下面是对你提供的代码片段的解释:

console.log(String()); // ""
  • String() 没有参数时,默认返回一个空字符串 ""
console.log(String(undefined), typeof String(undefined)); // "undefined" "string"
  • undefined 被转换成字符串 "undefined"。使用 typeof 检查转换后的结果,显示其类型为 "string"
console.log(String(null), typeof String(null)); // "null" "string"
  • null 被转换成字符串 "null"。同样地,typeof 确认了转换后的类型是 "string"
console.log(String(NaN)); // "NaN"
  • NaN(Not-a-Number)被转换成字符串 "NaN"。这表示一个非数字值,在数值上下文中无法表示的有效数值。

面试题

下面我们来看看中小厂喜欢问的问题之一

console.log([1,2,3].map(parseInt))

这段代码的结果是什么,可能有人会说,不就是1,2,3吗。no,no我们来仔细想想map函数 在JavaScript中,map 函数是数组对象的一个方法,用于创建一个新数组,其结果是该数组中的每个元素调用一个提供的函数后的返回值。map 方法不会改变原数组。

const newArray = array.map(callback(currentValue, index, array) => {
  // 返回处理后的元素
}, thisArg);

所以其实parseInt函数里面接受了三个参数我们来打印一下这三个参数

console.log([1,2,3].map((x,index,item)=>{
    console.log(x,index,item)
    return parseInt(x,index,item)
}))

image.png

怎么样这个答案大家想到了吗