面试中常考的JavaScript中简单类型数据转换盘点

为什么要学习类型转换

我们都知道，JS是弱类型语言，变量的类型是可以改变的，在es6时，我们的数据类型可以说成7种也可以是8种，而在es6之前，我们只有6种类型，即String,Number,Boolean,Undefined,Null和Object，虽然类型不多，但是我们得弄明白转换后变量的确切类型和情况，所以这是我们需要学习的。今天我们只讨论es6之前的简单数据类型的显示转换String,Number,Boolean这3种。

这篇文章很大一部分参考的是MDN中的文档，MDN是一个非常全面且权威的资源库，适合从初学者到高级开发者的各个层次的Web开发者：MDN Web Docs

Boolean

// 基本数据类型间的显示类型转换之Boolean
console.log(Boolean()); // 什么都不传入默认值为 false

console.log(Boolean(false));
console.log(Boolean(true));
console.log(Boolean(undefined)); // false
console.log(Boolean(null)); // false
console.log(Boolean(+0),'+0'); // false
console.log(Boolean(-0),'-0'); // false
console.log(Boolean(NaN),'NaN'); // false 
console.log(Boolean(''),'空字符串'); // false

首先引入一个概念：假值：假值（falsy values）是指那些在布尔上下文中被自动转换为 false 的值。当这些值出现在条件表达式中（如 if 语句、循环的条件部分等），它们会被解释为 false，从而影响程序的执行流程。

• 当在什么都不传入时默认值为false
• undefined:是一个假值，表示未定义或者不存在的值。
• null ：表示空值或没有对象，也是假值之一。
• +0和-0也都是假值，虽然都为0，但却是两个不同的值。

console.log(1 / + 0) // Infinity 正无穷大
console.log(1 / - 0) // -Infinity 负无穷大
console.log(Object.is(5, 5)); // 比较两者是否相等 true
console.log(Object.is(+0, -0)); // false

NaN：Not a number表示一个无效或者无法表示的数值结果，同样是假值。

console.log(2 * "a", 2 + "a"); // NaN 2a
console.log(typeof NaN); // number
console.log(parseInt("abc")); // 将字符串解析为数字 
console.log(parseInt("12abc"));
console.log(NaN == NaN); // 不代表确切值 
// 不能通过 ===或者== 去判断是否为NaN 所以要使用 isNaN 
console.log(isNaN(NaN)), isNaN(parseInt("abc")) // false true

字符串a不能有效的转化成一个数字，所以会返回NaN，而+,使用的是加法运算符（+）。加法运算符在处理一个数字和一个字符串时有特殊的行为：它不会尝试将字符串转换为数字，而是将数字转换为字符串，并将两者连接（拼接）起来。因此，2 + "a" 的结果是字符串 "2a"。

isNaN()是Number.isNaN()上的静态方法，用于判断一个值是否为NaN,NaN不能等于它自己。

parseInt

parseInt 是 JavaScript 中的一个全局函数，用于解析一个字符串并返回一个整数。它接受两个参数：

要解析的字符串 (string)：这是你想要转换为整数的值。

进制（可选）  (radix)：这是一个介于 2 到 36 之间的整数，表示你想要解析的数字系统的基数。例如，2 表示二进制，8 表示八进制，10 表示十进制，16 表示十六进制。如果不提供此参数，parseInt 会假设不同的默认值，这取决于字符串的前缀：

• 如果字符串以 "0x" 或 "0X" 开头，parseInt 会将其视为十六进制数。
• 如果字符串以 "0" 开头，parseInt 在旧版浏览器中可能会将其视为八进制数，但根据 ES5 标准，它现在被视为十进制数。
• 否则，parseInt 会尝试将字符串解析为十进制数。

parseInt 函数从字符串的开始解析字符，直到遇到一个无法被解析为数字的字符或字符串结束。所有在合法数字之后的字符都会被忽略。如果第一个字符不能被转换为数字，则 parseInt 返回 NaN。

" "：任何类型的空字符串（即不包含任何字符的字符串）都是假值。

除了上述所说的假值，其余所有在布尔上下文中都为真值，为true。

Number

// 基本数据类型间的显示类型转换之Number
console.log(Number()); // 什么都不传入默认值为 0
console.log(Number(undefined)); // NaN undefined 数值上下文中没有转成一个特定数字的含义  
console.log(Number(null)); // 0 在数字上下文中有转化成0的可能
console.log(Number(false)); // 0 
console.log(Number(true)); // 1 
console.log(Number("123")); // 123 
console.log(Number("-123")); // -123 
console.log(Number("0x11")); // 16进制
console.log(Number(""), Number(" ")); // 0
console.log(Number("100a")); // NaN 

var a = 1.234;
console.log(typeof a, a.toFixed(2));// 1.23
var b = new Number(a);
console.log(typeof b); // object
console.log(b.toFixed(2)); // 1.23 
//Number.prototype.toFixed()

这是MDN文档中截取的部分，意思是：如果提供了 value，则返回由 ToNumber(value) 计算出的数值（不是一个数字对象），否则返回 +0。

ToNumber(value) ：这是 ECMAScript 规范中的一个抽象操作，用于将不同类型的值转换为数值。它定义了如何将字符串、布尔值、对象等非数字类型转换为相应的数字表示。

对于undefined指为NaN：因为undefined的定义，其不存在可能变为一个特定的数字，它没有这个趋势或者含义。

对于null指为NaN:它有值，只是为空，所以它在数字上下文中可以变成一个数字类型，所以在这里为0。

总结一下，在Number类型转换中，除了正常转换成数字类型的情况，就只有1和0和NaN。

String

// 基本数据类型间的显示类型转换之String
console.log(String()); // 默认为空字符串
console.log(String(undefined), typeof String(undefined)); // "undefined" string
console.log(String(null), typeof String(null)); // "null" string
console.log(String(+0), String(-0)); // "0"
console.log(String(NaN)); // NaN 
console.log(String(1)); // 1

在这里，将其他的类型作为要转变的值填入，都会被转化成与其名称相对应的字符串，而不是值。

parseInt more

最后我们再扩展一下parseInt()

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

在这里我们运用了map来返回一个新的数组，而map中可以传入三个参数，它默认传入了3个参数分别是元素的值、下标、整个数组。而parseInt中可以传入两个值，在上文中我们讲到，第二个位置传入的是多少进制，所以如果在这里向parseInt中传入下标的话，它的效果并不是我们所想的那样，因为值是1，进制为0，也就是默认10进制，所以第一个值为1，但是因为没有1进制，而二进制的格式也不可能拥有3。在不传入下标仅仅传入值后，将会得到我们想要的正常输出结果，或者显示指定将要转化为10进制。

到此这篇关于面试中常考的JavaScript中简单类型数据转换盘点的文章就介绍到这了,更多相关JavaScript类型数据转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论