js中的类型转化

最新推荐文章于 2024-11-02 12:42:04 发布

.H__H__H.

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量923

点赞数 20

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_63649732/article/details/136697810

版权

本文详细解释了JavaScript中的类型转换规则，如undefined和null的自动转换为布尔值，字符串与其他类型（数字、布尔）的比较，以及使用parseInt、parseFloat等函数进行类型转换。还介绍了算术运算符和逻辑非运算在不同类型比较中的行为。

摘要由CSDN通过智能技术生成

为什么要学类型转化，我们先来看一下一下代码

if (undefined) {
            console.log("真");
        } else {
            console.log("假");
        }

浏览器输出结果

浏览器执行了else语句，默认把undefined转化成了false。这就是自动类型转化

 var money = '6'
        console.log(typeof money);
        console.log(money + 1000);
        console.log(typeof (money + 1000)); // string
        // 强制类型转化
        money = Number(money);
        console.log((money += 1000));
        console.log(typeof (money += 1000));

浏览器输出结果

用typeof判断类型

可以看到，Number（）方法强制把字符串money转化成了数值类型number。

var v1 = 123;
            var v2 = null;
            var v3 = undefined;
            var v4 = [];
            var v5 = {};

            // 方式一: 变量名.toString()
            console.log(typeof v1);
            console.log(typeof v2);
            console.log(typeof v3);
            console.log(typeof v4);
            console.log(typeof v5);

浏览器输出

用typeof可知，null为object类型，undefined是undefined，数组v4用typeof判断类型显示结果为对象object，这种说法其实没错，因为前端有个说法叫“前端里一切皆对象”。数组其实是一种特殊的对象。

其他类型转化成字符串类型

方式一: 变量名.toString()

            console.log(v1.toString(), typeof v1.toString());
            // console.log(v2.toString(), typeof v2.toString()); null 没有toString()
            // console.log(v3.toString(), typeof v3.toString()); undefined 没有toString()
            console.log(v4.toString(), typeof v4.toString());
            console.log(v5.toString(), typeof v5.toString());
            console.log("");
            console.log("");
            console.log("");

浏览器输出

由于null和undefined没有toString（）方法，浏览器会报错阻止后续代码运行，所有将其注释掉了

方式二: 使用: String(变量)

意义: 在于能将不能通过toString() 转化为字符串类型的数据转化为字符串，例如: null / undefined

            console.log(String(v1), typeof String(v1));
            console.log(String(v2), typeof String(v2));
            console.log(String(v3), typeof String(v3));
            console.log(String(v4), typeof String(v4));
            console.log(String(v5), typeof String(v5));

浏览器输出

可以看到，String(变量)这用方法把null 和undefined也转化成了string类型

方式三: 拼接字符串的形式

            console.log(typeof (v1 + "string"));
            console.log(typeof (v2 + "string"));
            console.log(typeof (v3 + "string"));
            console.log(typeof (v4 + "string"));
            console.log(typeof (v5 + "string"));

浏览器输出结果

通过在变量后面拼接一个字符串的方式也能使结果变为字符串类型

方式四: 在其他数据类型前面添加一对引号

            console.log("123", typeof "123"); // string
            console.log("true", typeof "true"); // string
            console.log("undefined", typeof "undefined"); // string
            console.log("null", typeof "null"); // string
            console.log("[10, 20, 30]", typeof "[10, 20, 30]"); //string
            console.log('{ name: "张三", age: 56 }', typeof '{ name: "张三", age: 56 }');

浏览器输出

可以看到，最简单直接的方法就是用引号把变量括起来。

总结

其他数据类型转化为字符串类型

1. 变量名.toString() 注意: 不能将null / undefined 转化为string

2. String(变量) 能将null / undefined 转化为string

3. 直接拼接一个字符串

4. 在其他数据类型前面添加一对引号

其他类型转化为数字类型

            var v1 = "123";
            var v2 = "123abc";
            var v3 = "abc123";
            var v4 = "abc";
            var v5 = "";
            var v6 = " ";
            var v7 = true;
            var v8 = false;
            var v9 = undefined;
            var v10 = null;
            var v11 = [];
            var v12 = {};

方式一: Number(变量)

            console.log(Number(v1)); //123 number
            console.log(Number(v2)); //NaN
            console.log(Number(v3)); //NaN
            console.log(Number(v4)); //NaN
            console.log(Number(v5)); //0
            console.log(Number(v6)); //0
            console.log(Number(v7)); //1
            console.log(Number(v8)); //0
            console.log(Number(v9)); //NaN
            console.log(Number(v10)); //0
            console.log(Number(v11)); //0
            console.log(Number(v12)); //NaN

浏览器输出

方式二:parseInt(变量名 ,[ 进制数]) 不保留小数转化 [] 表示参数可选

用法: 只能转化数值类型的字符串,且数值必须在字符串开头

            console.log(parseInt(v1)); // 123 number
            console.log(parseInt(v2)); // 123number
            console.log(parseInt("123.456abc")); // 123 number
            console.log(parseInt("abc123.456")); // NaN
            console.log(parseInt(false)); // NaN
            console.log(parseInt(true)); // NaN
            console.log(parseInt([])); // NaN
            console.log(parseInt({})); // NaN
            console.log(parseInt(null)); // NaN
            console.log(parseInt(undefined)); // NaN
            console.log(parseInt(123, 5));//输出结果为五进制的123 =>38

浏览器输出

123转化成五进制 => 3*5^0 + 2*5^1 + 1*5^2 = 3 + 10 +25 = 38

方式三: parseFloat(变量名)

用法: 只能转化含有数值类型的字符串,但是只能转化到第一个小数点之后的数值

            var a = parseFloat("123.456abc");

            console.log(typeof a); // 123.456 number
            console.log(parseFloat("abc123.456")); // NaN
            console.log(parseFloat(null)); //NaN
            console.log(parseFloat("123")); // 123  number
            console.log(parseFloat(undefined)); // NaN
            console.log(parseFloat([])); // NaN
            console.log(parseFloat({})); // NaN
            console.log(parseFloat("123.456.789")); // 123.456 number
            console.log(parseFloat("123.4v6abc")); // 123.4

浏览器输出

方式四: 结合加号+ , 减号-,或者-0操作

            var str = "12";
            console.log(str, typeof str); // string
            console.log(+str, typeof +str); // number
            console.log(-str, typeof -str); // number
            console.log(str + 0, typeof str + 0); // string
            console.log(str - 0, typeof (str - 0)); // number

浏览器输出

总结

其他数据类型转化为数值类型

方式一: Number(变量) 只能转化只含有数值类型的字符串还有空字符串还有boolean值还有空数组注意: 对象通过Number() 转化NaN

方式二: parseInt(变量名 ,[ 进制数]) 不保留小数转化 [] 表示参数可选

方式三: parseFloat(变量名)

方式四: 结合加号+ , 减号-,或者-0操作

其他类型转化为布尔类型

方法：Boolean(需要转化的代码 / 变量名)

任何数字都会转化成true，只有0会转化成false

            console.log(Boolean(123)); // true
            console.log(Boolean(123.456)); // true
            console.log(Boolean(0)); // false
            console.log(Boolean("123.456")); // true
            console.log(Boolean("123.abc")); // true
            console.log(Boolean("")); //false
            console.log(Boolean("    ")); //true
            console.log(Boolean(null)); //false
            console.log(Boolean(undefined)); //false
            console.log(Boolean([])); // true
            console.log(Boolean({})); // true
            console.log(Boolean(NaN)); //false
            console.log(Boolean(-NaN)); // false

浏览器输出

总结

* 1. 数字转布尔类型只有0 是false,其他数值的类型都是true

* 2. 字符串转布尔类型只有空字符串是false,其他字符串都是true

* 3. null / undefined / NaN 转化为 boolean 都是 false

* 4. 数组跟对象转布尔类型都是 true

自动类型转化

undefined

            if (!undefined) {
                console.log("你好,八角笼中");
            } else {
                console.log("你好,封神");
            }

浏览器输出

undefined在if条件判断中自动转化成false，前面有个！取反，结果为true。

数字和字符串比较

console.log(1 > "0");

浏览器输出

隐式的转化, "0" 会先转化为 number数值的 0 然后跟去跟1比较

算数运算符

             var str = "123";
            console.log(++str); // 123
            console.log(str > 88); // true "123" ==> 123 > 88 为真
            console.log(str > 166); // "123" ==> 123 > 166 false
            console.log(typeof (str / 1));

浏览器输出

逻辑非 !

            if (0) {
                console.log("真");
            } else {
                console.log("假");
            }

            if (123) {
                console.log("AAAAAAAAAAAAA");
            } else {
                console.log("BBBBBBBBBBBBBB");
            }

            if ([]) {
                console.log("XXXXX");
            } else {
                console.log("YYYYYY");
            }

浏览器输出

字符串和数字比较时，字符串转数字

            var str = "123";
            console.log(str == 123); // true
            console.log(str == 456); // false

浏览器输出

数字和布尔比较时,布尔转数字

true会转化成1，false会转化成0

            console.log(1 == true); //true
            console.log(0 == false); // true
            console.log(2 == true); // false

浏览器输出

对象与布尔值比较,俩者转数字

            console.log({} == false); // NaN == 0 false
            console.log({} == true); // false

浏览器输出

数组与布尔值比较,俩者转数字

            console.log([] == false); // 0 == 0 true
            console.log([] == true); // 0 == 1 false

浏览器输出

注意:如果使用严格关系运算符 === 和!=== 遵循俩个值和类型都必须相等才会相等,无需关心类型转化的问题。

.H__H__H.

关注

20
点赞
踩
19

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

js中的类型转化

用typeof判断类型

其他类型转化成字符串类型

方式一: 变量名.toString()

方式二: 使用: String(变量)

方式三: 拼接字符串的形式

方式四: 在其他数据类型前面添加一对引号

总结

其他类型转化为数字类型

方式一: Number(变量)

方式二:parseInt(变量名 ,[ 进制数]) 不保留小数转化 [] 表示参数可选

方式三: parseFloat(变量名)

方式四: 结合 加号+ , 减号-,或者-0操作

总结

其他类型转化为 布尔类型

方法：Boolean(需要转化的代码 / 变量名)

总结

自动类型转化

undefined

数字和字符串比较

算数运算符

逻辑非 !

字符串和数字比较时，字符串转数字

数字和布尔比较时,布尔转数字

对象与布尔值比较,俩者转数字

数组与布尔值比较,俩者转数字

方式四: 结合加号+ , 减号-,或者-0操作

其他类型转化为布尔类型