JavaScript 고급 튜토리얼 5.6 기본 패키징 유형(자세히)_Javascript 기술
- WBOY원래의
- 2016-05-16 15:30:411201검색
기본 유형 값의 작업을 용이하게 하기 위해 ECMAScript는 Boolean, Number, String의 3가지 특수 참조 유형도 제공합니다.
실제로 기본 유형 값을 읽을 때마다 배경은 해당 기본 래퍼 유형의 객체를 생성해야 이러한 데이터를 조작하는 몇 가지 메소드를 호출할 수 있습니다.
var s1="some text"; var s2=s1.substring(2); console.log(s2);//me text
이 예에서 s1에는 기본 유형 값인 문자열이 포함되어 있습니다. 두 번째 줄은 s1의 subsstring() 메서드를 호출하고 반환된 결과를 s2에 저장합니다.
코드의 두 번째 줄이 s1에 액세스하면 액세스 프로세스가 읽기 모드에 있습니다. 즉, 이 문자열의 값을 메모리에서 읽습니다. 읽기 모드에서 문자열에 액세스하면 백그라운드가 자동으로 다음 처리를 완료합니다. .(1) 문자열 유형의 인스턴스를 생성합니다.
(2) 인스턴스에서 지정된 메서드를 호출합니다.
(3) 이 인스턴스를 삭제합니다.
위의 세 단계는 다음 코드를 실행하는 것으로 상상해 볼 수 있습니다.
var s1=new String("some text");
var s2=s1.substring(2);
s1=null;
console.log(s2);//me text
참조 유형과 기본 포장 유형의 주요 차이점은 개체의 수명입니다.
new 연산자를 사용하여 생성된 참조 유형의 인스턴스는 실행 흐름이 현재 범위를 벗어나기 전에 함께 메모리에 저장됩니다. 그러나 자동으로 생성된 기본 래퍼 유형의 객체는 코드 줄이 실행되는 순간에만 존재하며 이후 소멸됩니다. 이는 런타임에 기본 유형에 속성과 메소드를 추가할 수 없음을 의미합니다.
var s1="some text"; s1.color="red"; console.log(s1.color);//undefined
기본 래퍼 유형의 인스턴스에서 typeof를 호출하면 "객체"가 반환되고 기본 래퍼 유형의 모든 객체는 부울 값 true로 변환됩니다.
객체 생성자는 팩토리 메소드와 마찬가지로 전달된 값의 유형에 따라 해당 기본 패키징 유형의 인스턴스를 반환합니다.
var obj=new Object("some text");
console.log(obj instanceof String);//true
new를 사용하여 기본 패키징 유형의 생성자를 호출하는 것과 동일한 이름의 변환 함수를 직접 호출하는 것은 다르다는 점에 유의해야 합니다.
var value="25"; var number=Number(value);//转型函数 console.log(typeof number);//number var obj=new Number(value);//构造函数 console.log(typeof obj);//object
이 예에서 변수 number는 기본 유형 값 25를 저장하고 변수 obj는 Number의 인스턴스를 저장합니다.
5.6.1 부울 유형
Boolean 유형은 Boolean 값에 해당하는 참조 유형입니다. Boolean 객체를 생성하려면 다음과 같이 Boolean 생성자를 호출하고 true 또는 false 값을 전달하면 됩니다.
var booleanObject=new Boolean(true);
가장 일반적인 문제 중 하나는 부울 표현식에 부울 개체를 사용하는 것입니다.
var falseObject=new Boolean(false); var result=falseObject&&true; console.log(result);//true var falseValue=false; result=falseValue&&true; console.log(result);//false
기본 유형과 참조 유형의 부울 값에는 두 가지 차이점이 있습니다. 첫째, typeof 연산은 기본 유형에 대해 "boolean"을 반환하고, 참조 유형에 대해서는 "object"를 반환합니다. 둘째, Boolean 객체는 인스턴스이기 때문입니다. Boolean 유형이므로 instanceof 연산자를 사용하여 Boolean 객체를 테스트하면 true를 반환하고, 기본 유형의 Boolean 값을 테스트하면 false를 반환합니다.
console.log(typeof falseObject);//object console.log(typeof falseValue);//boolean console.log(falseObject instanceof Boolean);//true console.log(falseValue instanceof Boolean);//false
5.6.2 숫자형
Number는 숫자 값에 해당하는 참조 유형입니다. Number 개체를 생성하려면 해당 값을 호출할 때 Number 생성자에 전달할 수 있습니다.
var numberObject=new Number(10); console.log(typeof numberObject);//objectBoolean 유형과 마찬가지로 Number 유형도 valueOf(), toLocaleString() 및 toString() 메서드를 재정의합니다.
재작성된 valueOf() 메소드는 객체의 대소문자 기본형 값을 반환하고, 나머지 두 메소드는 문자열 형태로 값을 반환합니다.
밑수를 나타내는 매개변수를 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상속된 메서드 외에도 Number 유형은 숫자 값을 문자열로 형식화하는 몇 가지 메서드도 제공합니다.
그 중 toFixed() 메소드는 지정된 소수점 이하 자릿수에 따라 값의 문자열 표현을 반환합니다.
변수 번호=10;
console.log(num.toFixed(2));//10.00
여기서는 값 2가 toFixed() 메소드에 전달되는데, 이는 필요한 소수 자릿수가 0으로 채워지는 것을 의미합니다.
값 자체에 지정된 소수점 이하 자릿수가 많은 경우 지정된 최대 소수점 자릿수에 가까운 값은 반올림됩니다.
能够自动舍入的特性,使得toFixed()方法很适合处理货币值.但需要注意的是,不同浏览器给这个方法设定的舍入规则可能会有所不同.在给toFixed()传入0的情况下,IE8及之前的版本不能正确舍入范围在{(-0.94,-0.5],[0.5,0.94)}之间的值.对于这个范围内的值,IE会返回0,而不是-1或1;其他浏览器都能返回正确的值.IE9修复了这个问题.
另外可用于格式 化数值的方法是toExponential(),该方法返回以指数表示法(也称e表示法)表示数值的字符串形式.与toFixed()方法一样,toExponential()也接收一个参数,而且该参数同样也是指定输出结果中的小数位数.
var num=10; console.log(num.toExponential(1));//1.0e+1
对于一个数值来说,toPrecision()方法可能会返回固定大小(fixed)格式,也可能返回指定(exponential)格式;具体规则是看哪种格式最合适.这个方法接收一个参数,即表示数值的所有数字的位数(不包括指数部分).
var num=99; console.log(num.toPrecision(1));//1e+2 console.log(num.toPrecision(2));//99 console.log(num.toPrecision(3));//99.0
第二行是用一位数来表示99,第三行是用两位数来表示,第四行是用三位数来表示.
实际上,toPrecision()会根据要处理的数值决定到底是调用toFixed()还是调用toExponential(),而这三个方法都可以通过向上或向下舍入,做到以最准确的形式来表示带有正确小数位的值.
toPrecision()方法可以表现1到21位小数.
仍然不建议直接实例化Number类型.具体来讲,就是在使用typeof和instanceof操作符测试基本类型数值与引用类型数值时,得到的结果完全不同.
var numberObject=new Number(10); var numberValue=10; console.log(typeof numberObject);//object console.log(typeof numberValue);//number console.log(numberObject instanceof Number);//true console.log(numberValue instanceof Number);//false
在使用typeof操作符测试基本类型数值时,始终会返回"number",而在测试Number对象时,则会返回"object”.类似地,Number对象是Number类型的实例,而基本类型的数值则不是.
5.6.3 String类型
String类型是字符串的对象包装类型,可以像下面这样使用String构造函数来创建.
var stringObject=new String("hello world");
String对象的方法也可以在所有基本的字符串值中访问到.其中,继承的valueOf(),toLoaleString()和toString()方法,都返回对象所表示的基本字符串值.
String类型的每个实例都有一个length属性,表示字符串包含多个字符.
var stringValue="hello world"; console.log(stringValue.length);
应该注意的是,即使字符串中包含双字节字符(不是占一个字节的ASCII字符),每个字符也仍然算一个字符.
1.字符方法
两个用于访问字符串中特定字符的方法是:charAt()和charCodeAt().这两个方法都接收一个参数,即基于0的字符位置.
charAt()方法以单字符字符串的形式返回给定位置的那个字符.
如果想得到的不是字符而是字符编码,就需要使用charCodeAt()了.
ECMAScript还定义了另一个访问个别字符的方法.在支持此方法的浏览器中,可以使用方括号加数字索引来访问字符串中的特定字符.
var stringValue="hello world"; console.log(stringValue[1]);//e
使用方括号表示法访问个别字符的语法得到了IE8及FF,Safari,Chrome和Opera所有版本的支持.如果在IE7及更早版本中使用这种语法,会返回undefined值.
2.字符串操作方法
concat(),用于将一或多个字符串拼接起来,返回拼接得到的新字符串.
var stringValue="hello";
var result=stringValue.concat("world");
console.log(result);//helloworld
console.log(stringValue);//hello
concat()返回一个拼接的字符串,不改变原数组的值.它可以接受任意多个参数,也就是说可以通过它拼接任意多个字符串.
var stringValue="hello";
var result=stringValue.concat("world","!")
console.log(result);//hellowworld!
console.log(stringValue);//hello
虽然concat()是专门用来拼接字符串的方法,但实践中使用更多的还是加号操作符(+).而且,使用加号操作符在大多数情况下都比使用concat()方法要简便易行(特别是在拼接多个字符串的情况下).
ECMAScript还提供了三个基于子字符串创建新字符串的方法:slice(),substr()和substring().
这三个方法都会返回被操作字符串的一个子字符串,而且也都接受一或两个参数.第一个参数指定子字符串的开始位置,第二个参数(在指定的情况下)表示子字符串到哪里结束.slice()和substring()的第二个参数指定的是子字符串最后一个字符后面的位置.而substr()的第二个参数指定的则是返回的字符个数.如果没有给这些方法传递第二个参数,则将字符串的长度作为结束位置.与concat()方法一样,slice(),substr()和substring()也不会修改字符串本身的值--它们只是返回一个基本类型的字符串值,对原始字符串没有任何影响.
var stringValue="hello world"; console.log(stringValue.slice(3));//lo world console.log(stringValue.substring(3));//lo world console.log(stringValue.substr(3));//lo world console.log(stringValue.slice(3,7));//lo w console.log(stringValue.substring(3,7));//lo w console.log(stringValue.substr(3,7));//lo worl
substr()返回"lo worl”,因为它的第二个参数指定的是要返回的字符个数.
在传递给这些方法的参数是负值的情况下,slice()方法会将传入的负值与字符串的长度相加,substr()方法将负的第一个参数加上字符串的长度,而将负的第二个参数转换为0.最后,substring()方法会把所有负值参数都转换为0.
var stringValue="hello world"; console.log(stringValue.slice(-3));//rld console.log(stringValue.substring(-3));//hello world console.log(stringValue.substr(-3));//rld console.log(stringValue.slice(3,-4));//lo w console.log(stringValue.substring(3,-4));//hel console.log(stringValue.substr(3,-4));//(空字符串)
注意:IE的JavaScript实现在处理向substr()方法传递负值的情况时存在问题,它会返回原始的字符串.IE9修复了这个问题.
当第二个参数是负值时,三个方法的行为各不相同.slice()方法会把第二个参数转换成7,substring()方法会把第二个参数转换为0,而由于这个方法会将小的数作为开始位置,将较大的数作为结束位置.substr()也会将第二个参数转换成0,也就意味着返回包含零个字符的字符串,也就是一个空字符串.
3.字符串位置方法
有两个可以从字符串中查找子字符串的方法:indexOf()和lastIndexOf().这两个方法都是从一个字符串中搜索给定的子字符串,然后返子字符串的位置(如果没有找到该字符串,则返回-1).
indexOf()方法从字符串的开头向后搜索子字符串,而lastIndexOf()方法是从字符串的末尾向前搜索子字符串.
var stringValue="hello world";
console.log(stringValue.indexOf("o"));//4
console.log(stringValue.lastIndexOf("o"));//7
如果"o”在这个字符串中仅出现一次,那么indexOf()和lastIndexOf()会返回相同的位置值.
这两个方法都可以接收可选的第二个参数,表示从字符串中的哪个位置开始搜索.换句话说,indexOf()会从该参数指定的位置向后搜索,忽略该位置之前的所有字符;而lastIndexOf()则会从指定的的位置向前搜索,忽略该位置之后的所有字符.
var stringValue="hello world";
console.log(stringValue.indexOf("o"),6);//4 6
console.log(stringValue.indexOf("o",6));//7
console.log(stringValue.lastIndexOf("o",6));//4
var stringValue="Lorem ipsum dolor sit amet, consectetur adipisicing elit";
var positions=new Array();
var pos=stringValue.indexOf("e");
while(pos>-1){
positions.push(pos);
pos=stringValue.indexOf("e",pos+1);
}
console.log(positions);//[3,24,32,35,52]
这个例子通过不断增加indexOf()方法开始查找的位置,遍历了一个长字符串.在循环之外,首先找到了"e"在字符串中的初始位置,而进入循环后,则每次都给indexOf()传递上一次的位置加1.这样,就确保了每次搜索都从上一次找到的子字符串的后面开始.每次搜索返回的位置依次被保存在数组positions中,以便将来使用.
4.trim()方法
ECMAScript 5为所有字符串定义了trim()方法.这个方法会创建一个字符串的副本,删除前置及后缀的所有空格,然后返回结果.
var stringValue=" hello world "; var trimmedStringValue=stringValue.trim(); console.log(stringValue);// hello world console.log(trimmedStringValue);//hello world
由于trim()返回的是字符串的副本,所以原始字符串中的前置及后缀空格会保持不变.支持这个方法的浏览器有IE9+,FF3.5+,Safari5+,Opera 10.5+和Chrome.此外,FF3.5+,Safari 5+和Chrome 8+还支持非标准的trimLeft()和trimRight()方法,分别用于删除字符串开头和末尾的空格.
5.字符串大小写转换方法
ECMAScript中涉及字符串大小写转换的方法有4个:toLowerCase(),toLocaleLowerCase(),toUpperCase()和toLocaleUpperCase().
var stringValue="hello world"; console.log(stringValue.toLocaleUpperCase());//HELLO WORLD console.log(stringValue.toUpperCase());//HELLO WORLD console.log(stringValue.toLocaleLowerCase());//hello world console.log(stringValue.toLowerCase());//hello world
一般来说,在不知道自己的代码将在哪种语言环境中运行的情况下,还是使用针对地区的方法更稳妥一些.
6.字符串的模式匹配方法
String类型定义了几个用于在字符串中匹配模式的方法.第一个方法就是match(),在字符串上调用这个方法,本质上与调用RegExp的exec()方法相同.match()方法只接受一个参数,要么是一个正则表达式,要么是一个RegExp对象.
var text="cat,bat,sat,fat"; var pattern=/.at/; //与pattern.exec(text)相同 var matches=text.match(pattern); console.log(matches.index);//0 console.log(matches[0]);//cat console.log(pattern.lastIndex);//0
本例中的match()方法返回了一个数组;如果是调用RegExp对象的exec()方法并传递本例中的字符串作为参数,那么也会得到与此相同的数组:数组的第一项是与整个模式匹配的字符串,之后的每一项(如果有)保存着与正则表达式中的捕获组匹配的字符串.
另一个用于查找模式的方法是search().这个方法的唯一参数与match()方法的参数相同:由字符串或RegExp对象指定的一个正则表达式.search()方法返回字符串中第一个匹配项的索引;如果没有找到匹配项,则返回-1.而且,search()方法始终是从字符串开头向后查找模式.
var text="cat,bat,sat,fat"; var pos=text.search(/at/); console.log(pos);//1
为了简化替换子字符串的操作,ECMAScript提供了replace()方法.这个方法接受两个参数:第一个参数可以是一个RegExp对象或者一个字符串(这个字符串不会被转换成正则表达式),第二个参数可以是一个字符串或者一个函数.如果第一个参数是字符串,那么只会替换第一个子字符串.要想替换所有子字符串,唯一的办法就是提供一个正则表达式,而且要指定全局(g)标志.
var text="cat,bat,sat,fat";
var result=text.replace("at","ond");
console.log(result);//cond,bat,sat,fat
result=text.replace(/at/g,"ond");//cond,bond,sond,fond
다음 단계는 첫 번째 매개변수를 전역 플래그가 있는 정규식으로 변경하여 모든 "at"를 "ond"로 바꾸는 것입니다.
두 번째 매개변수가 문자열인 경우 일부 특수 문자 시퀀스를 사용하여 정규식 연산으로 얻은 값을 결과 문자열에 삽입할 수도 있습니다.
ECMAScript에서 제공하는 특수 문자 시퀀스는 다음과 같습니다.
| 문자열 | 대체 텍스트 |
| $$ | $ |
| $& | 전체 패턴의 하위 문자열과 일치합니다. RegExp.lastMatch와 동일한 값 |
| $' | 일치하는 하위 문자열 앞의 하위 문자열입니다. RegExp.leftContext와 동일한 값입니다 |
| $` | 일치하는 하위 문자열 뒤의 하위 문자열입니다. RegExp.rightContext와 동일한 값입니다 |
| $n | n번째 캡처 그룹의 하위 문자열과 일치합니다. 여기서 n은 0~9입니다. 예를 들어 $1은 첫 번째 캡처 그룹과 일치하는 하위 문자열이고 $2는 두 번째 캡처 그룹과 일치하는 하위 문자열입니다. 정규식에 캡처링 그룹이 정의되어 있지 않으면 빈 문자열 | 이 사용됩니다.
| $nn | nn번째 캡처 그룹의 하위 문자열과 일치합니다. 여기서 nn은 01~99입니다. 예를 들어 $01은 첫 번째 캡처 그룹과 일치하는 하위 문자열이고, $02는 두 번째 캡처 그룹과 일치하는 하위 문자열입니다. . 정규식에 캡처링 그룹이 정의되어 있지 않으면 빈 문자열 | 이 사용됩니다.
通过这些特殊的字符序列,可以使用最近一次匹配结果中的内容.
var text="cat,bat,sat,fat"; result=text.replace(/(.at)/g,"word ($1)"); console.log(result);//word(cat),word(bat),word(sat),word(fat)
在此,每个以".at”结尾的单词都被替换了,替换结果是"word"后跟一对圆括号,而圆括号中是被字符序列$1所替换的单词.
replace()方法的第二个参数也可以是一个函数.在只有一个匹配项(即与模式匹配的字符串)的情况下,会向这个函数传递3个函数:模式的匹配项,模式匹配项在字符串的位置和原始字符串.在正则表达式中定义了多个捕获组的情况下,传递给函数的参数 依次是模式的匹配项,第一个捕获组的匹配项,第二个捕获组的匹配项....,但最后两个参数仍然分别是模式的匹配项在字符串中的位置和原始字符串.这个函数应该返回一个字符串,表示应该被替换的匹配项使用函数作为replace()方法的第二个参数可以实现更加精细的替换操作.
function htmlEscape(text){
return text.replace(/[<>"&]/g,function(match,pos,originalText){
switch(match){
case "<":
return "<";
case ">":
return ">";
case "&":
return "&";
case "\"":
return """;
}
});
}
console.log(htmlEscape("<p class=\"greeting\">Hello world!</p>*"));//<p class="greeting">Hello world!</p>*
这里,我们为插入HTML代码定义了函数htmlEscape(),这个函数能够转义4个字符:小于号,大于号,和号以及双引号.实现这种转义的最简单方式,就是使用正则表达式查找这几个字符,然后定义一个能够针对每个匹配的字符返回特定HTML实例的函数.
最后一个与模式匹配有关的方法是split(),这个方法可以基于指定的分隔符将一个字符串分割成多个子字符串,并将结果放在一个数组中.分隔符可以是字符串,也可以是一个RegExp对象(这个方法不会将字符串看成正则表达式).split()方法可以接受可选的第二个参数,用于指定数组的大小,以便确保返回的数组不会超过既定大小.
var colorText="red,blue,green,yellow";
var color1=colorText.split(",");
console.log(color1);//["red", "blue", "green", "yellow"]
var color2=colorText.split(",",2);
console.log(color2);//["red", "blue"]
var color3=colorText.split(/[^\,]+/);
console.log(color3);//["", ",", ",", ",", ""]
在最后一次调用split()返回的数组中,第一项和最后一项是两个空字符串.之所以会这样,是因为通过正则表达式指定的分隔符出现在了字符串的开头(即子字符串"red")和末尾(即子字符串"yellow").
对split()中正则表达式的支持因浏览器而异.尽管对于简单的模式没有什么差别,但对于未发现匹配项以及带有捕获组的模式,匹配的行为就不大相同了.以下是几种觉的差别.
IE8及之前的版本会忽略捕获组.IE9能正确地在结果中包含捕获组.
FF3.6及之前版本在捕获组未找到匹配项时,会在结果数组中包含空字符串;ECMA-262规定没有匹配项的捕获组在结果数组中应该用undefined表示.
在正则表达式中使用捕获组时还有其他微妙的差别.
7.localeCompare()方法
这个方法比较两个字符串,并返回下列值中的一个:
如果字符串在字母表中应该排在字符串参数之前,则返回一个负数(大多数情况下是-1,具体的值要视实现而定)
如果字符串等于字符串参数,则返回0.
如果字符串在字母表中应该排在字符串参数之后,则返回一个正数(大多数情况下是1,具体的值同样要视实现而定)
var stringValue="yellow";
console.log(stringValue.localeCompare("brick"));//1
console.log(stringValue.localeCompare("yellow"));//0
console.log(stringValue.localeCompare("zoo"));//-1
因为localeCompare()返回的数值取决于实现,所以最好是像下面例子所示的这样使用这个方法.
function determineOrder(value){
var result=stringValue.localeCompare(value);
if(result<0){
console.log("The string 'yellow' comes before the string '"+value+"'.");
}else if(result>0){
console.log("The string 'yellow' comes after the string '"+value+ "'.");
}else{
console.log("The string 'yellow' is equal to the string '"+value+"'.");
}
}
determineOrder("brick");
determineOrder("yellow");
determineOrder("zoo");
8.fromCharCode()方法
另外,String构造函数还有一个静态方法:fromCharCode().这个方法的任务是接收一或多个字符编码,然后将它们转换成一个字符串.从本质上来看,这个方法与实例方法charCodeAt()执行的是相反的操作.
以上内容是小编给大家介绍的关于JavaScript高级教程5.6之基本包装类型(详细)，希望大家喜欢。