JavaScript 【引用类型】基本包装类型

目录:1、Boolean 类型

   2、Number 类型

   3、String 类型

   4、引用类型与基本包装类型的主要区别

Boolean 类型

建议不要使用 Boolean 对象。Boolean 对象与基本类型的布尔值的几点区别:

 1 <script>
 2 //布尔运算:
 3     var falseObject = new Boolean( false );  //创建 Boolean 对象
 4     var rs1 = falseObject && true;
 5     console.log( rs1 );        //输出:true
 6     //布尔表达式中的所有对象都会被转换为 true,所以 falseObject && true 相当于 true && true
 7 
 8     var falseValue = false;
 9     var rs2 = falseValue && true;
10     console.log( rs2 );        //输出:false
11 
12 //typeof 操作符:
13     console.log( typeof falseObject );    //输出:object
14     //对 Boolean 对象返回 object
15     console.log( typeof falseValue );    //输出:boolean
16     //对基本类型的布尔值返回 boolean
17 
18 //instanceof 操作符:
19     //使用 instanceof 操作符测试 Boolean 类型
20     console.log( falseObject instanceof Boolean );    //true
21     console.log( falseValue instanceof Boolean );    //false
22 </script>

Boolean 类型的实例重写了 valueOf() 跟 toString()。

1 <script>
2     var trueObject = new Boolean( true );
3     var falseObject = new Boolean( false );
4     console.log( trueObject.toString() );    //输出:true
5     console.log( falseObject.toString() );    //输出:false
6     console.log( trueObject.valueOf() );    //输出:true
7     console.log( falseObject.valueOf() );    //输出: false
8 </script>

Number 类型

建议不要使用 Number 对象。Number 对象与基本类型数值的几点区别:

 1 <script>
 2     var numberObj = new Number( 10 );
 3     var numberValue = 10;
 4 //typeof操作符
 5     console.log( typeof numberObj );        //输出:object
 6     //对 Boolean 对象返回 object
 7     console.log( typeof numberValue );        //输出:number
 8     //对基本类型数值返回 boolean
 9 //instanceof操作符
10     //使用 instanceof 操作符测试 Number 类型
11     console.log( numberObj instanceof Number );        //输出:true
12     console.log( numberValue instanceof Number );    //输出:false
13 </script>

Number 类型的实例重写了 valueOf() 、toLocaleString() 跟 toString()。

 1 <script>
 2     //创建Number对象
 3     var numberObj = new Number(10);
 4     //返回字符串形式的数值
 5     console.log( numberObj.toString() );            //输出:10
 6     //返回字符串形式的数值
 7     console.log( numberObj.toLocaleString() );        //输出:10
 8     //返回对象表示的基本类型的数值
 9     console.log( numberObj.valueOf() );                //输出:10
10 </script>

可以为 toString() 方法传递一个表示基数的参数,告诉它返回几进制数值的字符串形式

 1 <script>
 2     var num = 10;
 3     //十进制
 4     console.log( num.toString(  ) );    //输出:10
 5     //二进制
 6     console.log( num.toString( 2 ) );    //输出:1010
 7     //八进制
 8     console.log( num.toString( 8 ) );    //输出:12
 9     //十进制
10     console.log( num.toString( 10 ) );    //输出:10
11     //十六进制
12     console.log( num.toString( 16 ) );    //输出:a
13 </script>

Number 类型提供一些可以将数值格式化为字符串的方法,比如 toFixed() 方法、 toExponential() 方法跟 toPrecision()方法。

 1 <script>
 2 //toFixed()
 3     var num = 10;
 4     //toFixed( 小数位 ),这里小数位为2则显示2位小数。位数范围一般为0到20位
 5     var num2 = num.toFixed( 2 );
 6     console.log( num2 );        //输出:10.00
 7     console.log( typeof num2 );    //输出:string
 8 
 9     //toFixed() 有自动舍入的特性。不同浏览器的舍入规则不同。
10     var num3 = 10.005
11     var num4 = num3.toFixed( 2 );
12     console.log( num4 );        //输出:10.01
13 
14 //toExponential()
15 //也称指数表示法
16     var num = 1000;
17     //toExponential( 小数位 )
18     var num2 = num.toExponential( 2 );
19     console.log( num2 );        //输出:1.00e+3
20     console.log( typeof num2 );    //输出:string
21 
22 //toPrecision()
23 //可能会返回固定大小(fixed)格式,或者指数(exponential)格式
24     var num = 99;
25     //toPrecision( 数值的所有数字的位数(不包括指数部分) )
26     console.log( num.toPrecision( 1 ) );        //输出:1e+2
27     //因为 1 位数无法表示 99 ,所以向上舍入为 100 即 1e+2
28     console.log( num.toPrecision( 2 ) );        //输出:99
29     console.log( num.toPrecision( 3 ) );        //输出:99.0
30 </script>

String 类型

String对象的 valueOf()、toString() 跟 toLocaleString() 方法都返回对象所表示的基本字符串值。

1 <script>
2     var stringObj = new String( "hello world" );
3     console.log( stringObj.valueOf() );            //输出:hello world
4     console.log( stringObj.toString() );           //输出:hello world
5     console.log( stringObj.toLocaleString() );     //输出:hello world
6 </script>

String类型的实例的length属性表示字符串包含多少个字符。

1 <script>
2     var stringObj = new String( "hello world" );
3     console.log( stringObj.length );    //输出:11
4 </script>

目录:

1.字符方法  2.字符串操作方法  3.字符串位置方法  4.trim() 方法  5.字符串大小写转换方法  6.字符串的模式匹配方法  7.localeCompare()方法  8.fromCharCode ( ) 方法

1.字符方法 

 charAt()

以单字符字符串的形式返回给定位置的字符

1 <script>
2     var stringObj = new String( "hello world" );
3     var add = stringObj.charAt(1);
4     console.log(add);    //输出:e
5 </script>

 charCodeAt()

 以字符串的形式返回给定位置的字符的字符编码

1 <script>
2     var stringObj = new String( "hello world" );
3     var add = stringObj.charCodeAt(1);
4     console.log(add);    //输出:101
5 </script>

方括号加数字索引

访问个别字符

1 <script>
2     var stringObj = new String( "hello world" );
3     var add = stringObj[1];
4     console.log(add);    //输出:e
5 </script>

2.字符串操作方法 

concat()

将一个或多个字符串拼接起来,返回拼接得到的新字符串。

 1 <script>
 2     var stringValue = "hello";
 3     var rs = stringValue.concat(" world");
 4     //concat() 可以接收多个参数,拼接多个字符串
 5     var rs2 = stringValue.concat(" world", "!");
 6     //拼接后 stringValue 值不变
 7     console.log( stringValue );    //输出:hello
 8     console.log( rs );            //输出:hello world
 9     console.log( rs2 );            //输出:hello world!
10     
11     //实践中更多使用加号操作符进行字符串拼接
12     var stringValue2 = "hello", stringValue3 = " world";
13     var rs3 = stringValue2 + stringValue3;
14     console.log( rs3 );            //输出:hello world
15 </script>

slice()、substr()substring()

返回被操作字符串的一个子字符串。这3个方法均对原始字符串无影响。

 1 <script>
 2     var stringValue = "hello world";
 3 //参数为正数时:
 4     //第一个参数:指定字符串的开始位置
 5     console.log( stringValue.slice( 2 ) );            //输出:llo world
 6     console.log( stringValue.substring( 2 ) );        //输出:llo world
 7     console.log( stringValue.substr( 2 ) );            //输出:llo world
 8     //slice()/substring() 第二个参数:指定字符串的结束位置。输出的字符串不包含第二个参数位置的字符
 9     //substr() 第二个参数:指定字符串的结束位置
10     console.log( stringValue.slice( 2, 7 ) );        //输出:llo w
11     console.log( stringValue.substring( 2, 7 ) );    //输出:llo w
12     console.log( stringValue.substr( 2, 7 ) );        //输出:llo wor
13 //参数为负数时:
14     //slice(): 将传入的参数加上字符串长度
15     //下例 -2 + 11 = 9,slice( -2 ) 等同于 slice( 9 )
16     console.log( stringValue.slice( -2 ) );            //输出:ld
17     //substring(): 将所有负值转换为 0
18     console.log( stringValue.substring( -2 ) );        //输出:hello world
19     //substr(): 将传入的参数加上字符串长度
20     //下例 -2 + 11 = 9,slice( -2 ) 等同于 substr( 9 )
21     console.log( stringValue.substr( -2 ) );           //输出:ld
22     //slice(2, -4)相当于slice( 2, 7 )
23     console.log( stringValue.slice( 2, -4 ) );         //输出:llo w
24     //substring(2, -4)相当于substring( 2, 0 ),相当于substring( 0, 2 )
25     console.log( stringValue.substring( 2, -4 ) );     //输出:he
26     //substr() 会将第二个参数转换为0
27     //substr( 2, -4 )相当于 substr( 2, 0 )
28     console.log( stringValue.substr( 2, -4 ) );        //输出:(空字符串)
29 </script>

3.字符串位置方法

index()、lastIndex()

从字符串中查找子字符串,然后返回子字符串的位置。

 1 <script>
 2     var stringValue = "01234123";
 3     console.log( stringValue.length );    //输出:8
 4     //index():从前往后搜索
 5     //lastIndex():从后往左搜索。
 6     //第一个参数:要查找的子字符串
 7     //第二个参数:开始查找的位置
 8     //没有找到子字符串则返回-1
 9     console.log( stringValue.indexOf( "123" ) );        //输出:1
10     console.log( stringValue.lastIndexOf( "123" ) );    //输出:5
11     console.log( stringValue.indexOf( "120" ) );        //输出:-1
12     console.log( stringValue.indexOf( "123", 1 ) );        //输出:1
13     console.log( stringValue.lastIndexOf( "123", 7 ) );    //输出:5
14     console.log( stringValue.lastIndexOf( "123", 5 ) );    //输出:5
15 </script>

可以通过循环调用 index() / lastIndex() 找到所有匹配的字符串。

 1 <script>
 2     var stringValue = "I am an apple.";
 3     var positions = new Array();
 4     var pos = stringValue.indexOf("a");    //从stringValue开头往后查找字符"a"的位置
 5     while( pos > -1 ){        //查找不到子字符串时会pos返回-1
 6         positions.push( pos );        //查找到子字符串后将子字符串的位置添加到数组的末端
 7         pos = stringValue.indexOf( "a", pos+1 );    //继续往后查找字符"a"
 8     }
 9     console.log( positions );    //输出:(3) [2, 5, 8]
10 </script>

4.trim ( )  方法 

创建字符串的副本,删除字符串前置与后缀的所有空格。

1 <script>
2     var stringValue = "        happy            day    ";
3     var trimValue = stringValue.trim();
4     console.log( stringValue );        //输出:        happy            day    
5     console.log( trimValue );        //输出:happy            day
6 </script>

5.字符串大小写转换方法

 1 <script>
 2     var stringValue = "aPpLe";
 3     //小写转换为大写
 4     console.log( stringValue.toUpperCase() );    //输出:APPLE
 5     //大写转换为小写
 6     console.log( stringValue.toLowerCase() );    //输出:apple
 7     //针对特定地区实现小写转换为大写
 8     console.log( stringValue.toLocaleUpperCase() );    //输出:APPLE
 9     //针对特定地区实现大写转换为小写
10     console.log( stringValue.toLocaleLowerCase() );    //输出:apple
11 </script>

6.字符串的模式匹配方法 

  match()  

 1 <script>
 2     var text = "cat, bat, sat, fat";
 3     var text2 = "apple";
 4     var pattern = /.at/;
 5     //match() 
 6     //接收 1 个参数,参数为一个正则表达式或者一个RegExp对象
 7     //有匹配项,则返回一个包含第一个匹配项的数组
 8     //无匹配项,则返回null
 9     var matches = text.match( pattern );
10     var matches2 = text2.match( pattern );
11     console.log( matches );         //输出:["cat", index: 0, input: "cat, bat, sat, fat", groups: undefined]
12     console.log( matches2 );        //输出:null
13     //表示匹配项在数组中的位置
14     console.log( matches.index );   //输出:0
15     console.log( matches[0] );      //输出:cat
16     //规定下次匹配的起始位置
17     console.log( pattern.lastIndex );   //输出:0    
18 </script>

  search()  

 1 <script>
 2     var text = "cat, bat, sat, fat";
 3     var text2 = "apple";
 4     var pattern = /.at/;
 5     //search()
 6     //参数为一个正则表达式或者一个RegExp对象
 7     //有匹配项,返回 字符串第一个匹配项的索引
 8     //无匹配项,返回-1
 9     var pos = text.search( pattern );
10     console.log( pos );     //输出:0
11     var pos2 = text2.search( pattern );
12     console.log( pos2 );    //输出:-1
13 </script>

  replace()  

 1 <script>
 2     var text = "cat, bat, sat, fat";
 3     var pattern = /.at/;
 4     //replace()
 5     //第一个参数:一个正则表达式或者一个RegExp对象
 6     //第二个参数:一个字符串或者一个函数
 7 
 8     //如果第一个参数为一个字符串,那么只会替换第一个字符串
 9     var result1 = text.replace( "at", "ON" );
10     console.log( result1 );     //输出:cON, bat, sat, fat
11     //如果第一个参数为指定全局标志的正则表达式,那么会替换所有子字符串
12     var result2 = text.replace( /at/g, "ON" );
13     console.log( result2 );     //输出:cON, bON, sON, fON
14 
15     //如果第二个参数是字符串,可以使用一些特殊的字符序列(如$$、$&、$`、$n、$nn、$1等),将正则表达式操作的值插入到结果字符串中
16     //字符序列 $n : 替换文本为匹配第n个捕获组的子字符串,其中n等于 0 ~ 9
17     var result3 = text.replace( /(.at)/g, "word($1)" );
18     console.log( result3 );     //输出:word(cat), word(bat), word(sat), word(fat)
19     //字符序列 $$ : 替换文本为 $
20     var result4 = text.replace( /(.at)/g, "word($$)" );   
21     console.log( result4 );     //输出:word($), word($), word($), word($)
22     //字符序列 $` : 替换文本为匹配子字符串前的子字符串
23     var result5 = text.replace( /(.at)/g, "word($`)" );   
24     console.log( result5 );     //输出:word(), word(cat, ), word(cat, bat, ), word(cat, bat, sat, )
25     //字符序列 $' : 替换文本为匹配子字符串后的子字符串
26     var result6 = text.replace( /(.at)/g, "word($')" ); 
27     console.log( result6 );     //输出:word(, bat, sat, fat), word(, sat, fat), word(, fat), word()
28     //字符序列 $nn : 替换文本为匹配第nn个捕获组的子字符串,其中nn等于01~99
29     var result7 = text.replace( /(..t)/g, "word($01)" );
30     console.log( result7 );     //输出:word(cat), word(bat), word(sat), word(fat)
31 
32     //如果第二个参数是函数
33     //在只有1个匹配项的情况下,会向函数传递3个参数:模式的匹配项、第一个捕获组的匹配项、第二个捕获组的匹配项
34     //下面函数 htmlEscape() 功能是转义四个字符"<"、">"、"&"、"\"
35     function htmlEscape( text ){
36         return text.replace(/[<>"&]/g, function(match, pos, originalText){
37             switch(match){
38                 case "<":
39                     return "&lt;";
40                 case ">":
41                     return "&gt;";
42                 case "&":s
43                     return "&amp;";
44                 case "\"":
45                     return "&quot;";
46             }
47         });
48     }
49     console.log( htmlEscape("<p class=\"greeting\">hello</p>") );
50     //输出:&lt;p class=&quot;greeting&quot;&gt;hello&lt;/p&gt;
51 </script>

  split()  

可以基于指定的分隔符将一个字符串分割成多个子字符串,将结果放在数组中。split() 中正则表达式的支持因浏览器而异

 1 <script>
 2     var text = "cat, bat, sat, fat";
 3     //split()
 4     //第一个参数:分隔符
 5     //第二个参数(可选):指定数组的大小
 6     //分隔符可以是字符串
 7     var text1 = text.split( "," );
 8     console.log( text1 );       //输出:(4) ["cat", " bat", " sat", " fat"]
 9     var text2 = text.split( ",", 2 );
10     console.log( text2 );       //输出:(2) ["cat", " bat"]
11     //分隔符可以是一个 RegExp 对象,
12     var text3 = text.split( /[^\,]+/ );
13     console.log( text3 );       //输出:(5) ["", ",", ",", ",", ""]
14 </script>

7.localeCompare ( ) 方法

 比较2个字符串的字母表前后位置

 1 <script>
 2     var stringValue = "zoo";
 3     //比较之后可能会返回负数、0、正数
 4     //负数
 5     //在字母表中,字符串排在字符串参数之前
 6     console.log( stringValue.localeCompare( "zz" ) );        //输出:-1
 7     //0
 8     //字符串等于字符串参数
 9     console.log( stringValue.localeCompare( "zoo" ) );        //输出:0
10     //正数
11     //在字母表中,字符串排在字符串参数之后
12     console.log(  stringValue.localeCompare( "yellow" ) );    //输出:1
13 
14     //localeCompare()返回的数值取决于实现
15     var stringValue = "zoo";
16     function order( value ){
17         var result = stringValue.localeCompare( value );
18         if( result<0 ){
19             console.log( "'zoo'在'"+value+"'之前。" );        
20         }else if( result==0 ){
21             console.log( "'zoo'等于'"+value+"'。" );
22         }else{
23             console.log( "'zoo'在'"+value+"'之后。" );
24         }
25     }
26     order( "zz" );        //输出:'zoo'在'zz'之前。
27     order( "zoo" );        //输出:'zoo'等于'zoo'。
28     order( "yellow" );    //输出:'zoo'在'yellow'之后。
29 </script>

8.fromCharCode()方法

接收1个或多个字符编码,将它们转换成一个字符串。

1 <script>
2     console.log( String.fromCharCode( 120, 105, 97, 111, 120, 117 ) );    //输出:xiaoxu
3 </script>

引用类型与基本包装类型的主要区别

引用类型与基本包装类型的主要区别是对象的生存期

基本类型值不是对象,但是,每当读取一个基本类型值的时候,后台会创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据。自动创建的基本包装的对象,只存在一行代码的执行瞬间。使用 new 操作符创建的引用类型的实例,在执行流离开当前作用域之前都会一直保存在内存中。

在读取模式中访问字符串时,后台会完成类似下例中自动创建然后销毁的过程 :

1 <script>
2     //第一步:创建 String 类型的一个实例
3     var str1 = new String( "text" );
4     //第二步:在实例上调用指定的方法
5     var str2 = str1.substring( 2 );
6     //第三步:销毁这个实例
7     str = null;
8 </script>

因为自动创建之后会被销毁,所以不能再运行时为基本类型值添加属性和方法。

1 <script>
2     var str = "some text";
3     str.color = "red";
4     console.log( str.color );   //输出:undefined
5 </script>

  

猜你喜欢

转载自www.cnblogs.com/xiaoxuStudy/p/12372357.html