Javascript类型中的转换总结

CuminKasumi
75 阅读5分钟

Javascript类型中的转换

疑问？

学习过程和练习过程中，经常会有javascript之间的数据类型转化，比如，任务提供一个数组需要返回一个目标字符串等等，这些都需要转换基本类型，如果遇到就去一下Google，不免效率太低而且知识太零碎，不利于记忆，所以本文便将自己遇到的数据类型转换整合并成文。

分析：

清晰数据类型

1.首先我们需要清楚js中有几种数据类型，常用的有哪些，基础数据类型有哪些，才能清楚如何转换，为什么要转换

值类型（基本类型）字符串（string），数字（number），布尔（boolean），空（Null），未定义（undefined），Symbol
引用数据类型（对象类型）对象（Object），数组（Array），函数（Function），正则（RegExp），日期（Date）

现在我们已经清楚了js拥有的数据类型，我们可以先从简单的入手，基本数据类型的转化

基本数据类型的转化

在基本数据类型中，有3个比较特殊且易于区分：

boolean： 只有true和false两个值，一般用于条件表达式的参数接受

true： 所有的对象类型，除空字符串以外的string，除0以外的number

false：null，undefined，‘’，0

请注意：boolean在比较的时候会被转化为number，true-1，false-0 比如 （1 == true） -》 true


Null：可以理解为未创建的对象，返回值体现为0，可以视作字面量

undefined：是一个变量，但不可重写和配置，操作的对象没有被赋值，视作undefined

还有两个经常互相转换，是基本数据类型转换的重点：

string：字符串 number：数字

string ---》 number

string转换为有效的number有一定的前提，必须是纯数字的字符串，否则会被转换为NaN（Not a Number），是一种undefined

  1. parseInt（）

    作为string的一种全局方法，会从第一个字符开始解析数字，直到非数字为止，返回解析出的整数，首字符非数字返回NaN

    注意0开头，0x开头会被转化为8进制和16进制数字

  2. parseFloat（）

    作为string的一种全局方法，会从第一个字符开始解析数字，直到非数字或者第二个小数点为止，返回解析出的浮点数，首字符非数字返回NaN

    0开头忽略，0x开头转换为NaN

  3. 强制类型转换

    Number（string）转换实质还是parseInt，parseFloat，但是智能选择

  4. 隐式类型转换（小case可用，项目中不够严谨，不推荐）

    对string进行算数运算（string-0 ， string* 1） ，js会自动转换string的类型为Number，但不可以+，因为会被认作字符串的拼接

number --》 string

  1. toString（）

    作为Object类的原型方法，Number子类继承后重写可传递一个整数参数，可以直接输出整数和浮点数，可以自动识别8进制和16进制，可以添加参数表示识别的进制数 eg： 10.toString（8） =》 '12'

  2. toFixed（）

    可加参数，表示显示小数点后的指定位数 eg： 123.toFixed(2) => '123.00'

  3. toExponential()

    专门用来把数字计数法形式的字符串 ，可加参数，表示小数点位数 eg: 12345.toExponential(2) => '1.23e+4'

  4. toPrecision()

    与toExponential()类似，区别是参数表示有效数字的位数 eg: 12345.toExponential(2) => '1.2e+4'

  5. 隐式类型转换（不推荐）

    使用+运算符，通过数字后面加上空字符串，来将number隐式转化为string

  6. 强制类型转换

    String（number）转换实质还是toString（）

image.png

引用数据类型

现在我们已经清楚了基础数据类型数据之间的转化，但是日常学习工作过程中，可以发现，string使用和转换非常多，不管是JSON还是数组都可以通过string来表示，所以我们将string作为一个桥梁来链接引用数据类型和基本数据类型，重点放到引用数据类型转化为string的方面

对象（Object）

利用JSON这个中间表示方法来完成字符串与对象之间的转换

Object -> string

JSON.stringify(value[, replacer[, space]])

value: obj (数组或对象)

replacer:(可选)若为函数，则调用函数并传入每个成员的键和值，使用返回值返回，若为数组，仅转换数组中具有键值的成员，转换顺序也与数组中顺序一致

space：（可选）文本添加缩进，空格和换行符

const obj = {
        id:0,
        name:'cumin',
        age:12
}
const objToStr = JSON.stringify(obj);
console.log('objToStr:',objToStr);    // objToStr: {'id':0,'name':'cumin','age':'12'}

string -> Object

JSON.parse(str,[reviver])

str:需要解析的JSON字符串

reviver：（可选），是一个函数，则调用函数并传入每个成员的键和值，使用返回值返回

const objToStr =  '{"id":0,"name":"cumin","age":"12"}';
const obj = JSON.parse(objToStr);
console.log(obj) 
/*{
        id:0,
        name:'cumin',
        age:12
}*/

数组（Array）

注意本文讨论的是将数组整个转换为stirng

Array -> string

  1. toString()

    可以将一个数组中的每个元素转换为字符串并且通过逗号连接输出，多层数组也能解构出来

  2. join（）

    可加参数，指定要用的粘合符，也是把数组中的所有元素解构转换为字符串，可看作split（）的相反作用

string - > Array

  1. split(separator,limit)

    separator:(可选)字符串或者正则，从该参数指定的地方分割string,即分割符

    limit:（可选）指定返回数组的最大长度

  2. Array.from()

    默认从指定的数组创建一个新的数组实例，对于str每个字符都会转化为新元素，类似 str.split('') image.png

总结.

js中的类型不多但是像string，number等基本数据类型，Object，Array等引用数据类型，非常常用，本文通过string作为桥梁，完成了js中常用数据类型的转换方法总结，理解完本文后不仅可以更加理解js中的数据类型，而且类型间的转换也信手拈来，了解并掌握string和几个引用类型转换的方法还能有奇效的完成功能。

avatar
文章
阅读
粉丝