JavaScript 基本数据类型转换

简介: 数据类型转换是我们在前端开发中经常遇到的场景,一般而言,在 JavaScript 中类型转换有三种情况

3.png


前言


数据类型转换是我们在前端开发中经常遇到的场景,一般而言,在 JavaScript 中类型转换有三种情况:


  • 转换为数字(调用 Number(),parseInt(),parseFloat()方法)
  • 转换为字符串(调用.toString()或 String()方法)
  • 转换为布尔值(调用 Boolean()方法)


需要注意的是:null、undefined 没有.toString() 方法


转换为数字


Number(string) 方法


Number() 可以把任意值转换成数字,如果要转换的目标对象(一般是字符串)中有不是数字的值,则会返回 NaN


Number('1')   // 1
Number(true)  // 1
Number('123s') // NaN
Number({})  //NaN


parseInt(string, radix)


解析一个字符串并返回指定基数的十进制整数,radix 是 2-36 之间的整数,表示被解析字符串的基数。


parseInt('2') //2
parseInt('2',10) // 2
parseInt('2',2)  // NaN
parseInt('a123')  // NaN  如果第一个字符不是数字或者符号就返回NaN
parseInt('123a')  // 123


parseFloat(string)


解析一个参数并返回一个浮点数。


parseFloat('123a')  //123
parseFloat('123a.01')   //123
parseFloat('123.01')    //123.01
parseFloat('123.01.1')  //123.01


隐式转换


let str = '123'
-str    // -123
str+1 // '1231'
+str+1 // 124
let res = str - 1 //122


转换为字符串


toString()


将目标对象转换为字符串。


注意:null,undefined 不能调用。


Number(123).toString()  //'123'
[].toString()   //''
true.toString() //'true'


String()


String() 的作用比较强大,它可以将任何传入的值都转为字符串。


String(123) //'123'
String(true)    //'true'
String([])  //''
String(null)    //'null'
String(undefined)   //'undefined'
String({})  //'[object Object]'


隐式转换


当 + 两边有一个是字符串,另一个是其它类型时,会先把其它类型转换为字符串再进行字符串拼接,返回字符串:


let a = 1
a + ''  // '1'


转换为布尔值


Boolean()


Boolean() 方法会将以下值转换为 false:


  • 0
  • ""
  • null
  • undefined
  • NaN


其余的所有值都会被转换为 true。


Boolean('') //false
Boolean(0) //false
Boolean(1) //true
Boolean(null) //false
Boolean(undefined) //false
Boolean(NaN) //false
Boolean({}) //true
Boolean([]) //true


条件语句


在条件语句中,我们一般不会主动进行布尔转换。


let a
if(a) {
  //...   //这里a为undefined,会转为false,所以该条件语句内部不会执行
}


隐式转换


let str = '111'
console.log(!!str) // true


总结


以上就是 JavaScript 基本数据类型转换相关的知识总结,其中最需要注意的是隐士转换。


~本文完,感谢阅读!


学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!


你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!


知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!




相关文章
|
2月前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
141 59
|
3月前
|
JavaScript
js基础数据类型
js基础数据类型
32 1
|
1月前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
80 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
1月前
|
JavaScript 前端开发 开发者
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
【干货拿走】JavaScript中最全的数据类型判断方法!!!!
23 1
|
1月前
|
存储 JavaScript 前端开发
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
JavaScript数据类型全解:编写通用函数,精准判断各种数据类型
19 0
|
2月前
|
存储 前端开发 JavaScript
前端基础(三)_JavaScript数据类型(基本数据类型、复杂数据类型)
本文详细介绍了JavaScript中的数据类型,包括基本数据类型(Number、String、Boolean、Undefined、Null)和复杂数据类型(Object),并解释了如何使用`typeof`操作符来识别变量的数据类型。同时,还讨论了对象、函数和数组等复杂数据类型的使用方式。
52 2
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-基本数据类型和引用数据类型
关于JavaScript基础知识的文章,主要介绍了基本数据类型和引用数据类型。
42 2
JavaScript基础知识-基本数据类型和引用数据类型
|
3月前
|
JavaScript 前端开发
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
|
3月前
|
开发者 图形学 开发工具
Unity编辑器神级扩展攻略:从批量操作到定制Inspector界面,手把手教你编写高效开发工具,解锁编辑器隐藏潜能
【8月更文挑战第31天】Unity是一款强大的游戏开发引擎,支持多平台发布与高度可定制的编辑器环境。通过自定义编辑器工具,开发者能显著提升工作效率。本文介绍如何使用C#脚本扩展Unity编辑器功能,包括批量调整游戏对象位置、创建自定义Inspector界面及项目统计窗口等实用工具,并提供具体示例代码。理解并应用这些技巧,可大幅优化开发流程,提高生产力。
376 1
|
3月前
|
JavaScript 前端开发
JS常用数据类型转换(数字型和字符串型之间转换)
JS常用数据类型转换(数字型和字符串型之间转换)
62 2