如何理解JavaScript中的基本包装类型

 

    为了便于操作基本类型值，ECMAScript提供额3个特殊的引用类型：Boolean、Number和String。

一、基本包装类型概述

var box = "Mr.Lee";  //定义一个字符串
var box2= box.substring(2);  //截掉字符串前两位
alert(box2);//输出新字符串；=>.Lee；

    变量box是一个字符串类型，而box.subString(2)又说明它是一个对象（只有对象才可以调用方法），然后把处理结果赋值给box2。"Mr.Lee"是一个字符串类型的值，按说它不应该是对象，不能调用方法的。这是因为后台自动完成了一系列的处理：每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而能够调用一些方法来操作这些数据。

    在读取模式中访问字符串时，后台自动完成下列处理：

    （1）创建String类型的一个实例（使用new运算符）；

    （2）在实例上调用指定的方法；

    （3）销毁这个实例。

    可以将以上三步想象成是执行了下列ECMAScript代码：

var box = new String("Mr.Lee");
var box2 = box.substring(2);
box = null;

    经过此番处理，基本的字符串就变得跟对象一样了。而且这三个步骤也使用于Boolean和Number类型对应的布尔值和数字值。

二、基本包装类型和引用类型的主要区别

    两者主要区别在于对象的生存期不同。现通过两个例子展示其区别。

1、字面量声明

var box = "Mr.Lee";//字面量
box.name ="Lee";//无效属性     代码1
box.age = function(){//无效方法
return 100;
};
alert(box);//Mr.Lee
alert(box.substring(2));//.Lee 
alert( typeof box);//String
alert(box.name);//undefined  代码2
alert(box.age());//错误

2、运算符声明

var box = new String("Mr.Lee");//new运算符
box.name = "Lee";//有效属性    
box.age = function(){有效方法
return 100;
};
alert(box);//Mr.Lee
alert(box.substring(2));//.Lee
alert(typeof box);//object
alert(box.name);//Lee
alert(box.age());//100

    使用new操作符创建的引用类型的实例，在执行流离开当前的作用域之前一直都保存在内存中。

    而自动创建的基本包装类型的对象，则只存在于一行代码的执行瞬间，然后被立即销毁。所以在字面量申明中，用代码1为box添加name属性后，当代码2再次访问box时，其name属性已经不见了。原因就在于代码1创建的name属性在再代码2次访问时已经被销毁了。代码2又创建了自己的String对象，而该对象没有name属性。

    总结：不管是基本类型值还是引用类型值，都可以访问它的内置方法。基本类型可以调用方法的原因就在于当读取基本类型值时，后台会自动创建对应的基本包装类型的对象，而对象时有方法的。但是不能在运行时为基本类型添加属性和方法。

三、Boolean类型

    Boolean类型没有特定的属性或方法。

四、Number类型

    Number类型有一些静态属性（直接通过Number调用的属性，无须new运算符）和方法。

Number静态属性

属性	描述
MAX_VALUE	表示最大值
MIN_VALUE	表示最小值
NaN	非数值
NEGATIVE_INFINITY	负无穷大，溢出返回该值
POSITIVE_INFINITY	无穷大，溢出返回该值
prototype	原型，用于增加新属性和方法

 

 

 

 

 

 

 

Number对象的方法

方法	描述
toString	将数值转化为字符串，并且可以转换进制
toLocaleString	根据本地数字格式转换为字符串
toFixed	将数字保留小数点后指定位数并转化为字符串
toExponential	将数字以指数形式表示，保留小数点后指定位数并转化为字符串
toPrecision	指数形式或点形式表述数，保留小数点后面指定位数并转化为字符串

 

 

 

 

 

 

 

var box=1000.789;
alert(box.toString());//转换为字符串，传参可以转换进制
alert(box.toLocaleString());//本地形式，1,000.789
alert(box.toFixed(2));//小数点保留，1000.78
alert(box.toExponential());//指数形式，传参会保留小数点
alert(box.toPrecision(3));//指数或点形式，传参保留小数点

五、String类型

    String类型包含了三个属性和大量的可用内置方法。

String对象属性：

属性	描述
length	返回字符串的字符长度
constructor	返回创建String对象的函数
prototype	通过添加属性和方法扩展字符串定义

 

 

 

 

    String也包含对象的通用方法，比如valueof()、toLocaleString()和toString()方法，但这些方法都返回字符串的基本值。

字符方法： 

方法	描述
charAt(n)	返回指定索引位置的字符
charCodeAt(n)	以Unicode编码形式返回指定索引位置的字符

 

 

 

var box="Mr.Lee";
alert(box.charAt(1));//r
alert(box.charCodeAt(1));//114
alert(box[1]);//r，通过数组方式截取

    PS：box[1]在IE浏览器中会显示undefined，所以要慎重使用。

字符串操作方法：

方法	描述
concat(str1…str2)	将字符串参数串联到调用该方法的字符串
slice(n,m)	返回字符串n到m之间位置的字符串，不包括m位置。不指定m相当于，截掉字符串n位置前的所有字符。
substring(n,m)	同上
substr(n,m)	返回字符串n开始的m个字符串

 

 

 

 

 

var box="hello world";
alert(box.concat("你","好","世界","!"));//hello world 你好世界！
alert(box.slice(3));//"lo world"
alert(box.slice(3,7));//"lo w"
alert(box.substring(3));//"lo world"
alert(box.substring(3,7));//"lo w"
alert(box.substr(3));//"lo world"
alert(box.substr(3,7));//"lo worl"

总结：1、slice()、substring()、substr()三个方法都返回被操作字符串的一个子字符串，也都接受一或两个参数； 

        2、第一个参数指定子字符串开始的位置；第二个参数（若指定）表示子字符串到哪里结束；

        3、silce()、substring()第二个参数指定子字符串最后一个字符后面的位置（即子字符串不包括该位置的字符）；sunstr()第二个参数指定的是返回的字符个数。

var box="hello world";
alert(box.slice(-3));//"rld"，相当于调用了slice(8)
alert(box.substring(-3));//"hello world"，相当于调用了substring(0)
alert(box.substr(-3));//"rld"
alert(box.slice(3,-4));//"lo wo"
alert(box.substring(3,-4));//"hel"
alert(box.substr(3,-4));//""（空字符串）

总结：1、silce()方法将传入的负值与字符串长度相加；

         2、substr()方法将负的第一个参数加上字符串长度，将负的第二个参数转换为0；

         3、在给slice()和substr()方法传递一个负值参数时，它们的行为相同； 

         4、substring()方法会把所有负值参数都转换为0，同时会把较小的参数提前；

         5、在给substring()传递一个负值参数时，方法会返回原字符串。

字符串位置方法：

方法	描述
indexOf(str,n)	从n开始向后搜索的第一个str，并将搜索的索引值返回
lastIndexOf(str,n)	从n开始向前搜索的第一个str，并将搜索的索引值返回

 

 

 

注意：位置方法返回要查找的项在数组中的位置，或在没找到的情况下返回-1.

var box="hello world";
alert(box.indexOf("o"));//4
alert(box.lastIndexOf("o"));//7
alert(box.indexOf("o",6));//7
alert(box.lastIndexOf("o",6));//4

 示例：找出全部的e

var box="Lorem ipsum dolor sit amet ,consectetur adipisicing elit";//包含5个"e"的字符串
var positions=new Array();//定义一个数组，用来存放"e"的位置
var pos=box.indexOf("e");//先获取第一个"e"的位置
while (pos>-1){//如果位置大于-1，说明还存在"e"
      positions.push(pos);//将位置添加到数组
      pos=box.indexOf("e",pos+1);//从找到的“e”的位置向前继续搜索，下一个"e"的位置
}
alert(positions);//输出存储“e”位置的数组

 大小写转换方法：

方法	属性
toLowerCase(str)	将字符串全部转换为小写
toUpperCase(str)	将字符串全部转换为大写
toLocaleLowerCase(str)	将字符串全部转换为小写，并且本地化
toLocaleUpperCase(str)	将字符串全部转换为大写，并且本地化

 

 

 

 

 

字符串的模式匹配方法： 

方法	描述
match(pattern)	返回pattern中的子串或null
replace(pattern,replacement)	用replacement替换pattern
search(pattern)	返回字符串中pattern开始位置
split(pattern)	返回字符串按指定pattern拆分的数组

 

 

 

 

 

var box="Mr.Lee is Lee";
alert(box.match("L"));//找到L，返回L，否则返回null
alert(box.search("L"));//找到L的位置，同indexOf类型
alert(box.replace("L","Q"));//把"L"替换成"Q"
alert(box.split(""));//以空格分割成字符串

 其他方法：

方法	描述
fromCharCode(ascii)	静态方法，输出Ascii码对应值
localeCompare(str1,str2)	比较两个字符串，并返回相应的值

 

 

 

alert(String.fromCharCode(76));//L，输出Ascii码对应值

localeCompare(str1,str2)方法详解：比较两个字符串并返回以下值中的一个；

1、如果字符串在字母表中应该排在字符串参数之前，则返回一个负数（多数是-1）；

2、如果字符串等于字符串参数，则返回0；

3、如果字符串在字母表中应该排在字符串参数之后，则返回一个正数（多数是1）。

var box="yellow";
alert(box.localeCompare("brick"));//1
alert(box.localeCompare("yellow"));//0
alert(box.localeCompare("zoo"));//-1