在看基础包装类型之前，回顾一下什么是引用类型：
引用类型是一种数据结构，用于将数据和功能组织在一起。
它包括：
- Object类型
- Array类型
- Date类型
- RegExp
- Function类型
什么是基本包装类型？
基本包装类型是ECMAScript为了便于操作基本类型值提供的三种特殊的引用类型:
- Boolean
- Number
- String
引用类型和基本包装类型的区别在于对象的生存期：
引用类型
使用new操作符创建的应用类型实例，在执行流离开当前作用域之前都一直保存在内存当中。
基本包装类型
自动创建的基本包装类型对象，只存在于一行代码执行的瞬间，然后立即被销毁。
Number类型
Number是与数字值对应的引用类型。
在Number类型中,valueOf()方法返回对象表示的基本类型的数值；
toLocaleString()和toString()方法返回字符串形式的数值。
Number类型方法：
① toString()
传递一个表示基数的参数，告诉它返回几进制数值的字符串形式。
var num = 10;
console.log('不传参数：' + num.toString()); //不传参数：10
console.log('二进制：' + num.toString(2)); //二进制：1010
console.log('八进制：' + num.toString(8)); //八进制：12
console.log('十进制：' + num.toString(10)); //十进制：10
console.log('十六进制：' + num.toString(16)); //十六进制：a② toFixed()
作用： 该方法会按照指定的小数位返回数值的字符串表示，并有自动舍入的特性。
该方法很适合处理货币值
var num = 10;
console.log('显示两位小数: ' + num.toFixed(2));
var num1 = 11.12354;
console.log('显示三位小数: ' + num1.toFixed(3));
/* 输出
显示两位小数: 10.00
显示三位小数: 11.124
*/③ toExponential()
作用： 格式化数值，该方法会返回指数表示法（也称e表示法）
该方法接收一个参数，表示显示几位小数
let num = 1000;
console.log('指数表示：' + num.toExponential(2));
/* 输出
let num = 1000;
console.log('指数表示：' + num.toExponential(2));
*/③ toPrecision()
toPrecision()接收一个参数，表示数值的所有数字的位数，然后则根据要显示的位数，看哪种格式适合表达则返回哪种格式。
let num1 = 1200;
console.log('一位数显示：' + num1.toPrecision(1));
console.log('两位数显示：' + num1.toPrecision(2));
console.log('四位数显示：' + num1.toPrecision(4));
console.log('六位数显示：' + num1.toPrecision(6));
/* 输出
一位数显示：1e+3
两位数显示：1.2e+3
四位数显示：1200
六位数显示：1200.00
*/String类型
string类型是字符串的对象包装类型。
String对象的方法也可以在所有基本的字符串值中访问到。
其中，valueOf()、toLocaleString()、toString()方法，都返回对象所表示的基本字符串值。
String类型的每个实力都有一个length属性，表示字符串包含多个字符。
let strValue = 'Give me a book';
console.log('strValue的length：' + strValue.length);
/* 输出
strValue的length：14
*/String类型提供多种方法：
字符方法
① charAt()
作用：用于访问字符串中特定的字符。
该方法接收一个参数，即要访问的字符的索引。然后返回该索引位置的字符。
var stringValue = 'QuanzhiGaoshou_yexiu';
console.log(stringValue.charAt(5));
/* 输出
h
*/② charCodeAt()
作用：用于访问字符串中特定的字符。
该方法接收一个参数，即要访问的字符的索引。然后返回该索引位置的字符的字符编码。
var stringValue = 'QuanzhiGaoshou_yexiu';
console.log(stringValue.charAt(5)); //输出 h
console.log(stringValue.charCodeAt(5)); //输出 104另外，访问字符还可以用方括号方法：
var stringValue = 'QuanzhiGaoshou_yexiu';
console.log(stringValue[5]); //输出 h③ concat()
作用：拼接字符串，返回一组新字符串
var stringValue = 'QuanzhiGaoshou ';
console.log('New string: ' + stringValue.concat("Yexiu"));
console.log('some String: ' + stringValue.concat("Yexiu","!","~"));
console.log('stringValue: ' + stringValue);
/* 输出
New string: QuanzhiGaoshou Yexiu
some String: QuanzhiGaoshou Yexiu!~
stringValue: QuanzhiGaoshou
*/注：拼接字符串最常用的还是“+”连字法
④ slice() ⑤ substr() ⑥ substring()
三个方法都是基于字符串创建新字符串，且都会返回被操作字符串的一个子字符串。
三个方法都接收2个参数，第二个可选:
- 第一个参数： 开始的位置（索引）
- 第二个参数：
slice()和substring()两个方法的第二参数都是结束的位置，substr()是需要返回字符的个数。
//例1
var stringValue = 'QuanzhiGaoshou yexiu';
console.log('slice1：' + stringValue.slice(5));
console.log('substr1：' + stringValue.substr(5));
console.log('substring1: ' + stringValue.substring(5));
/*
slice：hiGaoshou yexiu
substr：hiGaoshou yexiu
substring: hiGaoshou yexiu
*/从例1可以看出，三个方法在只接收一个参数的情况下，输出结果都是相同的，它们在没接收到第二个参数的时候，都默认结束位置为字符末尾。
//例2
var stringValue = 'QuanzhiGaoshou yexiu';
console.log('slice2：' + stringValue.slice(5,6));
console.log('substr2：' + stringValue.substr(5,6));
console.log('substring2: ' + stringValue.substring(5,6));
/* 输出
slice2：h
substr2：hiGaos
substring2: h
*/可以看出，slice 和 substring 的第二参数都是指定结束的位置。
而substr的第二参数是指定输出字符的个数。
//例3
var stringValue = 'QuanzhiGaoshou yexiu';
console.log('slice3：' + stringValue.slice(5,3));
console.log('substr3：' + stringValue.substr(5,3));
console.log('substring3: ' + stringValue.substring(5,3));
/* 输出
slice3：
substr3：hiG
substring3: nz
*/从上例（例3）可以看出, 如果第二个参数小于起始位置（也就是第一参数），substr()返回的是字符的个数，所以没受到影响。
区别在于slice()和substring()方法，两个的第二参数都是结束位置，但是slice()方法在结束位置小于起始位置的时候，会返回空。substring()则会返回这两个索引之间的字符。
这三个方法还有个主要的区别是在参数传入负数的情况下：
//例4
var stringValue = 'QuanzhiGaoshou yexiu';
console.log('slice4：' + stringValue.slice(-4));
console.log('substr4：' + stringValue.substr(-4));
console.log('substring4: ' + stringValue.substring(-4));
console.log('slice5：' + stringValue.slice(5,-4));
console.log('substr5：' + stringValue.substr(5,-4));
console.log('substring5: ' + stringValue.substring(5,-4));
/* 输出
slice4：exiu
substr4：exiu
substring4: QuanzhiGaoshou yexiu
slice5：hiGaoshou y
substr5：
substring5: Quanz
*/slice()方法在处理负数时的具体表现就是，将从被操作字符的开始往前数。按照书中的说法就是：
slice()方法将会将传入的负值与字符串的长度相加。
substr()如果是第一个参数接收负数，处理方法和slice()一样。而如果第二个参数传入负数，则会转为0；
substring()方法则是将所有负数转为0；
⑦ indexOf() ⑧lastIndexOf()
两个方法是字符串的位置方法，从一个字符串中搜索给定的子字符串然后返回字符串的位置（如果没找到该字符串，则返回-1）。
两个方法的区别是indexOf()从字符串开头向后搜索，lastIndexOf()则是末尾向前搜索。
var stringValue = 'Come on~ today!';
console.log('没找到: ' + stringValue.indexOf('yes'));
console.log('indexOf: ' + stringValue.indexOf('o'));
console.log('lastIndexOf: ' + stringValue.lastIndexOf('o'));
/* 输出
没找到: -1
indexOf: 1
lastIndexOf: 10
*/两个方法都接受第二参数，第二参数主要是指定从什么位置开始搜索，indexOf()会忽略指定位置之前的字符往后搜索;lastIndexOf()则刚好相反，会忽略指定位置之后的字符往前搜索。
var stringValue = 'Come on~ today!';
console.log('indexOf: ' + stringValue.indexOf('o',3));
console.log('lastIndexOf: ' + stringValue.lastIndexOf('o',3));
/* 输出
indexOf: 5
lastIndexOf: 1
*/应用第二参数，可遍历一个长字符串，找出查找字符的所有位置：
var stringValue = `hello, I've been watching TV recently. I also have a cute cat.`;
var positions = [];
var pos = stringValue.indexOf('a');
while(pos > -1){
positions.push(pos);
pos = stringValue.indexOf('a', pos + 1);
}
console.log('字符串内所有字符a的下标是： ' + positions);
/* 输出
字符串内所有字符a的下标是： 18,41,47,51,59
*/⑨ trim()
该方法会创建一个字符串副本，删除该字符串前后的空格（中间的空格不受影响）。
var stringValue = ' Hei~ happy! ';
console.log(stringValue);
console.log(stringValue.trim());
/* 输出
Hei~ happy!
Hei~ happy!
*/注：另有 trimLeft() 和 trimRight() 方法分别删除左右空格
⑩ toLowerCase() ⑪ toLocaleLowerCase() ⑫ toUpperCase() ⑬ toLocaleUpperCase()
这四种方法的主要作用是转换大小写:
var stringValue = ' Hei~ happy! ';
console.log('toLowerCase: ' + stringValue.toLowerCase());
console.log('toLocaleLowerCase: ' + stringValue.toLocaleLowerCase());
console.log('toUpperCase: ' + stringValue.toUpperCase());
console.log('toLocaleUpperCase: ' + stringValue.toLocaleUpperCase());
/* 输出
toLowerCase: hei~ happy!
toLocaleLowerCase: hei~ happy!
toUpperCase: HEI~ HAPPY!
toLocaleUpperCase: HEI~ HAPPY!
*/
这其中，toLowerCase()和toLocaleLowerCase() 以及 toUpperCase()和toLocaleUpperCase()的区别主要是时区。
⑭ match()
字符串的模式匹配方法，只接收一个参数，返回一个数组。
var text = 'cat, bat, sat, fat, ymt';
var pattern = /.at/;
var matches = text.match(pattern);
console.log(matches);
/* 返回一个数组
[ 'cat',
index: 0,
input: 'cat, bat, sat, fat, ymt',
groups: undefined ]
*/返回的第一项是匹配的项，第二项是位置索引。
之所以上例只匹配了一项，是因为匹配规则中不是全局模式。
var text = 'cat, bat, sat, fat, ymt';
var pattern = /.at/;
var pattern1 = /.at/g;
var matches = text.match(pattern);
var matches1 = text.match(pattern1);
console.log('matches: ' + matches);
console.log('matches1: ' + matches1);
/* 输出
matches: cat
matches1: cat,bat,sat,fat
*/⑮ search()
该方法接收一个参数，返回字符串中第一个匹配项的索引；
如果没有找到匹配项，则返回-1。
var text = 'ymt, cat, bat, sat, fat';
var pos = text.search(/at/);
console.log('at 第一次出现的位置： ' + pos);
/* 输出
at 第一次出现的位置： 6
*/⑯ replace()
该方法接收两个参数，第一个参数可以是RegExg对象或者一个字符串，第二个参数是一个字符串或者一个参数。
var text = 'ymt, cat, bat, sat, fat';
var result = text.replace(/at/g, 'ond'); //全局更改
var result1 = text.replace(/at/, 'ond'); //只更改第一个匹配项1
var result2 = text.replace('at', 'ond'); //只更改第一个匹配项1
console.log('result: ' + result);
console.log('result1: ' + result1);
console.log('result2: ' + result2);
/* 输出
result: ymt, cond, bond, sond, fond
result1: ymt, cond, bat, sat, fat
result2: ymt, cond, bat, sat, fat
*/如上例，如果第一个参数是字符串或者是RegExg对象但没全局模式，那么只会更改第一个匹配项；
如果需要所有匹配项都更改，则需要接受RegExg对象并设置全局。
replace()第二参数可以实现更精细的提替换操作：
比如用户输入的值，会输入一些转义字符，但这些转义字符在html中有作用，不一定会显示出来，这就可以用到。
var text = '2*3 > 2+3';
function htmlEscape(text){
return text.replace(/[<>]/g,function(match,pos,originalText){
switch(match){
case '<':
return '<';
case '>':
return '>';
}
})
}
console.log(htmlEscape(text));
/* 输出
2*3 > 2+3
*/⑰ split()
split()方法容易和slice()方法混淆，但它们实际上作用不同：
slice()是返回被操作字符串的一段指定的子字符串。split()是分割字符串，指定一个分割符将一个字符串分割成多个子字符串，并将结果放入一个数组中。splice()用于数组的操作方法
split()方法第二参数可选，用于指定数组长度。
var text = 'ymt, cat, bat, sat, fat';
console.log(text.split(','));
console.log(text.split(',',3));
/* 输出
[ 'ymt', ' cat', ' bat', ' sat', ' fat' ]
[ 'ymt', ' cat', ' bat' ]
*/
扫一扫
274
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
