JavaScript强制类型转换

一、强制类型转换

强制类型转换是指将一种数据类型转换为另一种数据类型的过程。在JavaScript中,这种转换可以是显式(调用转换函数)的或隐式

基本类型转换

主要涉及三种基本类型:字符串、数字和布尔值

转换为字符串

将值转换为字符串有多种方式,其中最常见的是通过调用String()函数或使用加号运算符(+)与空字符串相加 或者ES6的模板字符串 ' `` ' 。
js 复制代码
let num = 123;
let str = String(num); // 显式转换
let str2 = num + '';   // 隐式转换
console.log(str);  // "123"
console.log(str2); // "123"

转换为数字

将值转换为数字也有多种方式,可以使用Number()函数、加号运算符(+)、乘号运算符 *、parseInt()或parseFloat()等
js 复制代码
let str = "456";
let num = Number(str); // 显式转换
let num2 = +str;       // 隐式转换
console.log(num);  // 456
console.log(num2); // 456
parseInt()和parseFloat()用于解析字符串中的数字,但它们与Number()有所不同,因为它们不会处理非数值字符并且可以解析带有小数点的字符串
js 复制代码
let str = "3.14";
console.log(parseInt(str));  // 3
console.log(parseFloat(str)); // 3.14

转换为布尔值

所有值在JavaScript中都可以转换为布尔值。JavaScript中有一些被认为是假值的值,它们转换为布尔值时会得到false,包括:0、-0、null、undefined、NaN和空字符串("")其他所有值都被认为是真值,转换为布尔值时会得到true。
js 复制代码
console.log(Boolean(0));        // false
console.log(Boolean(""));       // false
console.log(Boolean(null));     // false
console.log(Boolean(undefined));// false
console.log(Boolean(NaN));      // false

console.log(Boolean(123));      // true
console.log(Boolean("hello"));  // true
console.log(Boolean({}));       // true

二、常见的强制类型转换场景

相等运算符 == 与严格相等运算符 ===

在使用相等运算符== 时,JavaScript会进行强制类型转换以比较不同类型的值。相反,严格相等运算符===不会进行类型转换,只在两个值类型相同且值相等时返回true
js 复制代码
console.log(123 == "123"); // true,字符串"123"被转换为数字123
console.log(123 === "123"); // false,类型不同

算术运算符

当不同类型的值参与算术运算时,JavaScript会尝试将它们转换为数字
js 复制代码
let result = "4" - 3; // "4" 被转换为 4,结果为 1
console.log(result); // 1

result = "5" + 5; // 由于 + 运算符优先进行字符串连接,结果为 "55"
console.log(result); // "55"

逻辑运算符

逻辑运算符(&&、||、!)也会触发类型转换。它们通常会将操作数转换为布尔值,以决定运算结果
js 复制代码
console.log(!!"hello"); // true,非空字符串被转换为 true
console.log(!!0);       // false,0 被转换为 false
console.log(null || "default"); // "default",null 被转换为 false

3、避免强制类型转换的陷阱

NaN陷阱

当尝试将非数值字符串转换为数字时,会得到NaN(Not-a-Number)
js 复制代码
let result = Number("hello");
console.log(result); // NaN

null和undefined的特殊情况

null和undefined在进行类型转换时有一些特殊的行为,需要特别注意。
js 复制代码
console.log(Number(null));      // 0
console.log(Number(undefined)); // NaN

字符串连接与算术运算

由于+运算符既用于字符串连接又用于加法运算,容易引起混淆。
js 复制代码
console.log("5" + 3); // "53",字符串连接
console.log("5" - 3); // 2,算术运算
相关推荐
sunbyte几秒前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常2 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常4 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc10187 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28115 分钟前
Chrome插件开发
前端
apihz22 分钟前
域名WHOIS信息查询免费API使用指南
android·开发语言·数据库·网络协议·tcp/ip
前端 贾公子27 分钟前
Monorepo + vite 怎么热更新
前端
coding随想36 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
爱吃烤鸡翅的酸菜鱼1 小时前
IDEA高效开发:Database Navigator插件安装与核心使用指南
java·开发语言·数据库·编辑器·intellij-idea·database
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js