JavaScript中的原始类型转换详解

  JavaScript是一种动态类型的脚本语言,它具有自动进行类型转换的特性。在JavaScript中,存在着许多基本数据类型,如布尔型、数字型、字符串型等,同时也有对象类型。在不同的场景中,我们可能需要进行不同类型之间的转换,这就涉及到原始类型转换的问题。

基本数据类型之间的转换

转布尔

  在JavaScript中,有一些规则定义了如何将其他类型转换为布尔类型。以下是一些常见的规则:

  • 数字:除了0和NaN,其他所有数字都被转换为true。
  • 字符串:除了空字符串("")之外,其他所有字符串都被转换为true。
  • 对象:所有对象都被转换为true。
  • false,null,underfined,转布尔都为false
javascript 复制代码
Boolean(0);        // false
Boolean(42);       // true
Boolean("");       // false
Boolean("hello");  // true
Boolean({});       // true
console.log(Boolean(false));  // false
console.log(Boolean(undefined)); // false
console.log(Boolean(null)); // false
console.log(Boolean(NaN));  // false

转数字类型

  JavaScript中,数字类型转换的规则比较灵活。可以通过parseInt、parseFloat``Number 等函数来实现字符串到数字的转换。同时,一元运算符+也可以将字符串转换为数字。

  • 在Number中只有字符串为全数字是转换为数字,其他字符串都为NaN
  • 空和false为0, true为1
javascript 复制代码
//使用一元加号或`parseInt`函数可以将字符串转换为数字。
var strNum = "42";
var numFromStr1 = +strNum; // 42 
var numFromStr2 = parseInt(strNum); //
//使用Number()转数字
console.log(Number());//0
console.log(Number(false));//0
console.log(Number(true))//1
console.log(Number('123')) //123
console.log(Number('hallo')) //NaN
console.log(Number(undefined))// NaN

转字符串

  字符串型转换通常使用 String() 函数,或者通过字符串拼接的方式实现:

  • 注意string()为'' 其他直接转为字符串
javascript 复制代码
console.log(String());  // ''
console.log(String(undefined));'undefined'
console.log(String(null));'null'
console.log(String(true));'true'
console.log(String(false));'false'
console.log(String(123));'123'
console.log(String(NaN));'NaN'

转对象

lua 复制代码
console.log(Object('hello'))// String{'hello'}
// console.log(Object('underfined'))// {}
// console.log(Object('null'))// {}

对象转原始类型

对象类型转换涉及到 toString() 和 valueOf() 方法,这两个方法定义在 Object 类型中。而 valueOf() 方法只对包装类类型有效。

toString() 在js中有多个版本:

  1. {}.toString() // "object class"
  2. 数组的toString()会将数组中的所有元素转化成字符串并以逗号拼接
  3. 函数的toString()会将整个函数体以字符串形式返回
  4. Date的toString()会将整个date以字符串形式返回

对象转字符串 ToPrimitive(obj, String)

  • 判断obj是基本类型,则返回
  • 否则 调用 toString 方法,如果得到原始类型,则返回
  • 否则 调用 valueOf 方法,如果得到原始类型,则返回
  • 否则 报类型错误

对象转数字 ToPrimitive(obj, Number)

  • 判断obj是基本类型,则返回
  • 否则 调用 valueOf 方法,如果得到原始类型,则返回
  • 否则 调用 toString 方法,如果得到原始类型,则返回
  • 否则 报类型错误

一元运算符 +

一元运算符+可以将操作数转换为数字。

arduino 复制代码
javascriptCopy code
+"42";   // 42
+"3.14"; // 3.14

二元运算符 +

  二元运算符+在不同情境下有不同的行为。如果其中一个操作数是字符串,则进行字符串拼接;否则,将两个操作数转换为数字相加。

perl 复制代码
javascriptCopy code
"Hello" + " " + "World";   // "Hello World"
1 + "2";                   // "12"
1 + 2;                     // 3

相等运算符 == 和 ===

==相等运算符会进行隐式类型转换,而===严格相等运算符不进行隐式类型转换。

ini 复制代码
"42" == 42;    // true,发生隐式类型转换
"42" === 42;   // false,不发生隐式类型转换

原始类型转换表

JavaScript中的原始类型转换表可以帮助理解不同类型之间的转换规则。以下是一个简单的表格:

从\到 布尔 数字 字符串 对象
布尔 - false=0, true=1 false="" true="true" 见下文
数字 false=0, true=1 - 数字.toString() 见下文
字符串 false="" true="true" 数字.toString() - 见下文
对象 见下文 对象.valueOf()或对象.toString() 对象.valueOf()或对象.toString() -

这个表格展示了不同类型之间的常见转换规则,但在实际使用时,要根据具体情况灵活应用。

结论

  JavaScript中的原始类型转换是一个复杂而有趣的话题。了解这些转换规则对于编写健壮且可读性高的代码是非常重要的。在实际编码中,需要注意不同情境下的转换规则,以避免出现意外的行为。   大家把答案写在评论区吧 喜欢的来个关注 点赞 这个也是以后写文章的动力所在 谢谢大家能观看我的文章 咱下期再见 拜拜

相关推荐
jktantan32 分钟前
Vue keep-alive 切标签后滚动位置回顶?因为 onDeactivated 里读到的 scrollTop 是 0
前端·javascript·vue.js
总要学点什么1 小时前
第89篇:三维特效-螺旋圆效果——让螺旋臂卷起一圈圈外扩的涟漪
开发语言·javascript·ecmascript·webgl·cesium·空间分析·1024程序员节
夕除1 小时前
Redis 过期策略
redis·笔记·面试
2601_962885721 小时前
quotes 字段全解:涨跌幅、振幅、换手率的口径与单位
java·前端·spring
excel2 小时前
encodeURI 和 encodeURIComponent 有什么区别?
前端
前端精髓2 小时前
调用openrouter的免费API模型
java·前端·javascript
赛博守夜人2 小时前
AI安全攻防与治理之十四:AI 安全测试不能脱离传统安全,Web、API、移动端与模型攻击面的组合拳
前端·人工智能·安全
开开心心_Every2 小时前
快速隐藏程序工具自定义快捷键一键切换
java·开发语言·前端·spring·智能手机·word·intellij-idea
networknomad3 小时前
OpenReplay:自己搭的会话回放工具,给前端排错用的
前端·其他
缓慢更新4 小时前
AI 辅助生成单测:从接口定义到用例的流水线
java·服务器·前端·网络·数据库·人工智能