JS笔记《包装对象(Number/String/Boolean)》

包装对象概述

• 为了方便操作基本数据类型，JS提供了三个特殊的引用类型：String、Number、Boolean，这3个对象可以把原始值转为对象，叫做包装对象。

构造函数

• Number、String、Boolean这三个对象作为构造函数使用时，可以将原始类型的值转为对象。作为普通函数使用时，可以将任意类型的值转为原始值。

var v1 = new Number(123);
var v2 = new String('abc');
var v3 = new Boolean(true);

typof v1; // 'object'
typof v2; // 'object'
typof v3; // 'object'

v1 === 123  // false
v2 === 'abc' // false
v3 === true // false

Number('123') // 123
String(true)  // 'true'
Boolean(123)  // true

自动转换

• string、number、boolean类型的原始值没有属性和方法，但有时需要调用属性或方法，这时JS会自动将原始值转为包装对象实例，并在使用后立即销毁。
• null和undefiend不是对象，也无法包装，没有原型，所以不能有任何属性和方法。

'abc'.length // 3
// 字符串本身不可以调用属性，此时JS将其包装成了对象，在这个对象上调用的length属性。
// 调用结束后这个临时对象就会被销毁，等同于：
var str = new String('abc');
str.length // 3

• 自动转成的包装对象是只读的，无法修改。所以无法为其添加新属性，但直接定义的可以。

var str = 'abc'
str.a = 1

str.a  // undefined

var str2 = new String('abc')
str2.a = 1
str2  // String {'abc', a: 1}

自定义方法

• 除了原生的实例方法，包装对象还可以自定义方法和属性供原始值直接调用。

String.prototype.firstUpperCase = function(){
  var str = this.valueOf();
  var firstChar = str[0].toUpperCase();
  return firstChar + str.substr(1);
}

console.log('abc'.firstUpperCase())  // 'Abc'

Number.prototype.double = function(){
  return this.valueOf() * 2;
}

(123).double()  // 246

实例方法

valueOf()

• 返回包装对象实例对应的原始值。

new Number(123).valueOf()  // 123
new String('abc').valueOf() // "abc"
new Boolean(true).valueOf() // true

toString()

• 返回包装对象实例对应值的字符串形式。

new Number(123).toString() // "123"
new String('abc').toString() // "abc"
new Boolean(true).toString() // "true"

Number对象

静态属性

• Number.POSITIVE_INFINITY：正的无限，指向Infinity。
• Number.NEGATIVE_INFINITY：负的无限，指向-Infinity。
• Number.NaN：表示非数值，指向NaN。
• Number.MIN_VALUE：表示最小的正数（即最接近0的正数，在64位浮点数体系中为5e-324），相应的，最接近0的负数为-Number.MIN_VALUE。
• Number.MAX_SAFE_INTEGER：表示能够精确表示的最大整数，即9007199254740991。
• Number.MIN_SAFE_INTEGER：表示能够精确表示的最小整数，即-9007199254740991。

实例方法

toString()

• Number部署了自己的toString()，用来将一个数值转为字符串。可以接收一个参数，表示输出的进制。不传则为十进制。

(123).toString() // '123'
(123).toString() // '1111011'
(123).toString() // '173'

toFixed()

• 将一个数值转为指定位数的小数（四舍五入不一定准确），返回这个小数的字符串。

(10).toFixed(2) // "10.00"
10.005.toFixed(2) // "10.01"

(10.055).toFixed(2) // 10.05  应该是10.06 
(10.005).toFixed(2) // 10.01

由于浮点数的原因，小数5的四舍五入是不确定的，使用的时候必须小心。

toExponential()

• 将一个数转为科学计数法形式。

(10).toExponential()  // "1e+1"
(10).toExponential(1) // "1.0e+1"
(10).toExponential(2) // "1.00e+1"

(1234).toExponential()  // "1.234e+3"
(1234).toExponential(1) // "1.2e+3"
(1234).toExponential(2) // "1.23e+3"

toPrecision()

• 将一个数转为指定位数的有效数字。

(12.34).toPrecision(1) // "1e+1"
(12.34).toPrecision(2) // "12"
(12.34).toPrecision(3) // "12.3"
(12.34).toPrecision(4) // "12.34"
(12.34).toPrecision(5) // "12.340"

参数为有效数字的位数，范围是1到100，超出报错。

toLocaleString()

• 接受一个地区码作为参数，返回一个字符串，表示当前数字在该地区的当地书写形式。
• 参数配置及详情请百度。

(123).toLocaleString('zh-Hans-CN-u-nu-hanidec') // '一二三'
(123.5).toLocaleString('zh-Hans-CN-u-nu-hanidec') // '一二三.五'

• 接受第二个参数配置对象，用来定制指定用途的返回字符串。该对象的style属性指定输出样式，默认值是decimal，表示输出十进制形式。

(2333333).toLocaleString('zh', { style: 'decimal'});   // '2,333,333'  格式化数字
(123).toLocaleString('zh-Hans-CN', { style: 'percent' })  // "12,300%"  

// 如果`style`属性的值为`currency`，则可以搭配`currency`属性，输出指定格式的货币字符串形式。
(123).toLocaleString('zh-Hans-CN', { style: 'currency', currency: 'CNY' })  // "￥123.00"

Boolean对象

• 主要作用是生成boolean对象或将数据转为boolean值。

String对象

静态方法

String.fromCharCode()

• 此方法的参数是一个或多个数值，代表Unicode码点，返回值是这些码点组成的字符串。

String.fromCharCode() // ""
String.fromCharCode(97) // "a"
String.fromCharCode(104, 101, 108, 108, 111)

• 此方法不支持 Unicode 码点大于0xFFFF的字符，即传入的参数不能大于0xFFFF（即十进制的 65535）。因为码点大于0xFFFF的字符占用四个字节，而 JS 默认支持两个字节的字符。这种情况下只能将字符拆成两个参数。

实例属性

length

• 返回字符串的长度。

实例方法

charAt()

• 返回指定索引位置的字符。

var str = 'abcdefg';
str.charAt(3) // 'd'

str[3]  // 'd'

str.charAt(-1)  // ''  负数或大于等于字符串的长度，返回空字符串

charCodeAt()

• 返回字符串指定位置的Unicode码点，十进制表示。

'abc'.charCodeAt(1) // 98

'abc'.charCodeAt(-1) // NaN 负数或大于等于字符串的长度，返回NaN

concat()

• 连接两个字符串，返回一个新字符串，不改变原字符串。

var s1 = 'abc';
var s2 = 'def';

s1.concat(s2) // "abcdef"
s1 // "abc"

'a'.concat('b', 'c') // "abc" 接受多个参数

''.concat(1, true)   // '1true' 将参数先转成字符串再连接

slice()

• 从原字符串取出子字符串并返回，不改变原字符串（等同于数组的slice）。建议使用

// 截取时包含开始位不包含结束位
'JavaScript'.slice(0, 4) // "Java"

// 省略第二个参数，则表示子字符串一直到原字符串结束
'JavaScript'.slice(4)    // "Script"

// 参数是负值，表示从结尾开始倒数计算的位置
'JavaScript'.slice(-2, -1) // "p"

// 第一个参数大于第二个参数返回一个空字符串
'JavaScript'.slice(2, 1) // ""

substring()

• 从原字符串取出子字符串并返回，不改变原字符串。不建议！

// 截取时包含开始位不包含结束位
'JavaScript'.substring(0, 4)  // "Java"

// 省略第二个参数，则表示子字符串一直到原字符串结束
'JavaScript'.substring(4)    // "Script"
 
// 参数是负数会自动将负数转为0
'JavaScript'.substring(-3) // "JavaScript"
 
// 第一个参数大于第二个参数会自动更换两个参数的位置
'JavaScript'.substring(10, 4) // "Script"  等同于substring(4, 10)

substr()

• 从原字符串取出子字符串并返回，不改变原字符串，与上两个类似，区别在于参数：
  • 第一个参数表示截取的起始索引。
  • 第二个参数表示要截取的长度。

'JavaScript'.substr(4, 3) // "Scr"

// 省略第二个参数，则表示子字符串一直到原字符串的结束
'JavaScript'.substr(4) // "Script"

// 第一个参数是负数，表示倒数计算的字符位置。
// 第二个参数是负数，将被自动转为0，因此会返回空字符串。
'JavaScript'.substr(-6) // "Script"
'JavaScript'.substr(4, -1) // ""

indexOf()

• 查找一个字符串在另一个字符串中第一次出现的位置,如果没有出现则返回-1。

'hello world'.indexOf('o') // 4

// 第二个参数表示搜索的开始位置
'hello world'.indexOf('o', 6) // 7

lastIndexOf()

• 与indexOf方法一致，区别是此方法从右向左查找。

'hello world'.lastIndexOf('o') // 7

// 第二个参数表示从该位置起向前匹配
'hello world'.lastIndexOf('o', 6)  // 4

trim()

• 去除字符串两端的空格，返回一个新字符串，不改变原字符串。

'  hello world  '.trim() // 'hello world'

'\r\nabc \t'.trim() // 'abc'   // 制表符、换行符、回车符都能去除

toLowerCase()

• 将一个字符串全部转为小写，返回一个新字符串，不改变原字符串。

'Hello World'.toLowerCase()  // "hello world"

toUpperCase()

• 将一个字符串全部转为大写，返回一个新字符串，不改变原字符串。

'Hello World'.toUpperCase()  // "HELLO WORLD"

match()

• 确定原字符串是否匹配某个子字符串，返回一个数组，成员为子字符串。搭配正则

'cat, bat, sat, fat'.match('at')  
// ['at', index: 1, input: 'cat, bat, sat, fat', groups: undefined]
// index表示匹配字符串开始的位置（从索引1开始匹配到的）
// input表示原始字符串

'cat, bat, sat, fat'.match('xt')  // null 未匹配到返回null

search()

• 确定原字符串是否匹配某个子字符串，返回匹配的第一个索引（match中的index）。搭配正则

'cat, bat, sat, fat'.search('at')   // 1

'cat, bat, sat, fat'.search('qat') ; // -1 未匹配到返回-1

replace()

• 替换匹配的子字符串，一般只替换第一个匹配（除非是用带有 g的正则），返回替换后的字符串，不改变原字符串。搭配正则

'aaa'.replace('a', 'b') // "baa"

split()

• 按照规则分割字符串，返回一个由分割出来的子字符串组成的数组。

'a|b|c'.split('|')  // ['a', 'b', 'c']

// 参数为空分割每一个字符
'a|b|c'.split('')  // ["a", "|", "b", "|", "c"]

// 如果分割规则的两个部分紧邻着，则返回数组之中会有一个空字符串
'a||c'.split('|')  // ['a', '', 'c']

// 如果分割规则的部分处于字符串的开头或结尾，则返回数组的第一个或最后一个成员是一个空字符串
'|b|c'.split('|')  // ["", "b", "c"]

//接受第二个参数，限定返回数组的最大成员数
'a|b|c'.split('|', 1) // ["a"]