wubh

转成字符串 String

1. 使用 toString方法

这种方法可以将 number, boolean, objectarray,function 转化为字符串,但是无法转换 null, undefined 这两种数据类型。

(1).toString() // "1"

true.toString() // "true"

var obj = {}
obj.toString() // "[object Object]"

null.toString() // Uncaught TypeError: Cannot read property \'toString\' of null

undefined.toString() // Uncaught TypeError: Cannot read property \'toString\' of undefined

// 数组
[1, 2, 3].toString() // "1, 2, 3"

// 函数
var fn1 = function(){console.log(\'hello\')}
fn1.toString()  // "function(){console.log(\'hello\')}"

2. 使用 String() 函数

String函数可以将任意类型的值转化成字符串。

原始类型值转换:

String(123) // "123"
String(\'abc\') // "abc"
String(true) // "true"
String(undefined) // "undefined"
String(null) // "null"

String方法的参数如果是对象,返回一个类型字符串;如果是数组,返回该数组的字符串形式。

String({a: 1}) // "[object Object]"
String([1, 2, 3]) // "1,2,3"

String方法背后的转换规则

  1. 先调用对象自身的toString方法。如果返回原始类型的值,则对该值使用String函数,不再进行以下步骤。
  2. 如果toString方法返回的是对象,再调用原对象的valueOf方法。如果valueOf方法返回原始类型的值,则对该值使用String函数,不再进行以下步骤。
  3. 如果valueOf方法返回的是对象,就报错。

3. 连接一个空字符串 (推荐)

1000 + \'\'     // "1000"

null + \'\'     // "null"

undefined + \'\' // "undefined"

true + \'\'      // "true"

obj + \'\'       // "[object Object]"

[1,2,3] +  \'\'  // "1,2,3"

转成数字 Number

1. 使用 Number() 函数

// 数值:转换后还是原来的值
Number(324) // 324

// 字符串:如果可以被解析为数值,则转换为相应的数值
Number(\'324\') // 324

// 字符串:如果不可以被解析为数值,返回 NaN
Number(\'324abc\') // NaN

// 空字符串转为0
Number(\'\') // 0

// 布尔值:true 转成 1,false 转成 0
Number(true) // 1
Number(false) // 0

// undefined:转成 NaN
Number(undefined) // NaN

// null:转成0
Number(null) // 0

Number({}) // NaN

Number方法的参数是对象时,将返回NaN,除非是包含单个数值的数组。

Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5

Number 背后的转换规则

  1. 调用对象自身的valueOf方法。如果返回原始类型的值,则直接对该值使用Number函数,不再进行后续步骤。

  2. 如果valueOf方法返回的还是对象,则改为调用对象自身的toString方法。如果toString方法返回原始类型的值,则对该值使用Number函数,不再进行后续步骤。

  3. 如果toString方法返回的是对象,就报错。

举个例子:

var obj = {x: 1};
Number(obj) // NaN

// 等同于
if (typeof obj.valueOf() === \'object\') {
  Number(obj.toString());
} else {
  Number(obj.valueOf());
}

2. 使用 parseInt() 函数

parseInt() 函数解析一个字符串参数,并返回一个指定进制的整数

// 语法,第二个参数是数值的进制,数值范围是2 - 36之间
parseInt(string, radix);
parseInt(\'123\') // 123
parseInt(\'   81\') // 81
parseInt(1.23) // 1
parseInt(\'15px\') // 15
parseInt(\'011\') // 11
parseInt(\'1e+21\') // 1

// 进制转换
parseInt(021, 8); // 15,按8进制转换
parseInt("0xF", 16); //15, 按16进制转换
parseInt("1111", 2); //15, 按2进制转换 

parseInt转换规则:MDN parseInt阮一峰教程-数值

  • 如果字符串头部有空格,空格会被自动去除。

  • 如果parseInt的参数不是字符串,则会先转为字符串再转换。

  • 字符串转为整数的时候,是一个个字符依次转换,如果遇到不能转为数字的字符,就不再进行下去,返回已经转好的部分。

  • 如果字符串的第一个字符不能转化为数字(后面跟着数字的正负号除外),返回NaN

  • 如果字符串以0x0X开头,parseInt会将其按照十六进制数解析。

  • 如果字符串以0开头,将其按照10进制解析。

  • 对于那些会自动转为科学计数法的数字,parseInt会将科学计数法的表示方法视为字符串,因此导致一些奇怪的结果。

    • parseInt(1000000000000000000000.5) // 1
      // 等同于
      parseInt(\'1e+21\') // 1
      
      parseInt(0.0000008) // 8
      // 等同于
      parseInt(\'8e-7\') // 8
      

3. 使用 parseFloat() 函数

parseFloat方法用于将一个字符串转为浮点数。

parseFloat(\'3.14\') // 3.14

// 如果字符串符合科学计数法,则会进行相应的转换。
parseFloat(\'314e-2\') // 3.14
parseFloat(\'0.0314E+2\') // 3.14

// 如果字符串包含不能转为浮点数的字符,则不再进行往后转换,返回已经转好的部分
parseFloat(\'3.14more non-digit characters\') // 3.14

// parseFloat方法会自动过滤字符串前导的空格
parseFloat(\'\t\v\r12.34\n \') // 12.34

// 如果参数不是字符串,或者字符串的第一个字符不能转化为浮点数,则返回NaN。
parseFloat([]) // NaN
parseFloat(\'FF2\') // NaN
parseFloat(\'\') // NaN

阮一峰教程-parseFloat

4. 减零 x - 0

这是一种最简单快捷的方法,字符串减去一个0可以转换成数字

\'1\' - 0 // 1

\'a\' - 0 // NaN

\'01AB\' - 0 // NaN

5. 取正 + x

+ \'1\' // 1
+ \'-1\' // -1
+ \'s\' // NaN
+ \'1s\' // NaN
+ obj // NaN

转成布尔类型 Boolean

除了值是 null, undefined, 0, NaN, \'\'(空字符串) 转成 false 外,其它的全部都是 true

1. 使用 Boolean()函数

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean(\'\') // false

Boolean({}) // true
Boolean([]) // true

2. 使用 !! 连续两次取反 (推荐)

!!1 // true

!!null // false

!!undefined // false

!!obj // true

!!\'s\' // true

分类:

技术点:

相关文章: