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

以下为学习《JavaScript 高级程序设计》》(第 3 版) 所做笔记。

目录：1、Boolean 类型

　　　2、Number 类型

　　　3、String 类型

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

Boolean 类型

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

<script>
//布尔运算:
    var falseObject = new Boolean( false );　　//创建 Boolean 对象
    var rs1 = falseObject && true;
    console.log( rs1 );        //输出：true
    //布尔表达式中的所有对象都会被转换为 true，所以 falseObject && true 相当于 true && true

    var falseValue = false;
    var rs2 = falseValue && true;
    console.log( rs2 );        //输出：false

//typeof 操作符:
    console.log( typeof falseObject );    //输出：object
    //对 Boolean 对象返回 object
    console.log( typeof falseValue );    //输出：boolean
    //对基本类型的布尔值返回 boolean

//instanceof 操作符:
    //使用 instanceof 操作符测试 Boolean 类型
    console.log( falseObject instanceof Boolean );    //true
    console.log( falseValue instanceof Boolean );    //false
</script>

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

<script>
    var trueObject = new Boolean( true );
    var falseObject = new Boolean( false );
    console.log( trueObject.toString() );    //输出：true
    console.log( falseObject.toString() );    //输出：false
    console.log( trueObject.valueOf() );    //输出：true
    console.log( falseObject.valueOf() );    //输出: false
</script>

Number 类型

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

<script>
    var numberObj = new Number( 10 );
    var numberValue = 10;
//typeof操作符
    console.log( typeof numberObj );        //输出：object
    //对 Boolean 对象返回 object
    console.log( typeof numberValue );        //输出：number
    //对基本类型数值返回 boolean
//instanceof操作符
    //使用 instanceof 操作符测试 Number 类型
    console.log( numberObj instanceof Number );        //输出：true
    console.log( numberValue instanceof Number );    //输出：false
</script>

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

<script>
    //创建Number对象
    var numberObj = new Number(10);
    //返回字符串形式的数值
    console.log( numberObj.toString() );            //输出：10
    //返回字符串形式的数值
    console.log( numberObj.toLocaleString() );        //输出：10
    //返回对象表示的基本类型的数值
    console.log( numberObj.valueOf() );                //输出：10
</script>

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

<script>
    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
</script>

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

<script>
//toFixed()
    var num = 10;
    //toFixed( 小数位 )，这里小数位为2则显示2位小数。位数范围一般为0到20位
    var num2 = num.toFixed( 2 );
    console.log( num2 );        //输出：10.00
    console.log( typeof num2 );    //输出：string

    //toFixed() 有自动舍入的特性。不同浏览器的舍入规则不同。
    var num3 = 10.005
    var num4 = num3.toFixed( 2 );
    console.log( num4 );        //输出：10.01

//toExponential()
//也称指数表示法
    var num = 1000;
    //toExponential( 小数位 )
    var num2 = num.toExponential( 2 );
    console.log( num2 );        //输出：1.00e+3
    console.log( typeof num2 );    //输出：string

//toPrecision()
//可能会返回固定大小(fixed)格式，或者指数(exponential)格式
    var num = 99;
    //toPrecision( 数值的所有数字的位数（不包括指数部分） )
    console.log( num.toPrecision( 1 ) );        //输出:1e+2
    //因为 1 位数无法表示 99 ，所以向上舍入为 100 即 1e+2
    console.log( num.toPrecision( 2 ) );        //输出:99
    console.log( num.toPrecision( 3 ) );        //输出:99.0
</script>

String 类型

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

<script>
    var stringObj = new String( "hello world" );
    console.log( stringObj.valueOf() );            //输出：hello world
    console.log( stringObj.toString() );           //输出：hello world
    console.log( stringObj.toLocaleString() );     //输出：hello world
</script>

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

<script>
    var stringObj = new String( "hello world" );
    console.log( stringObj.length );    //输出：11
</script>

目录：

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

1.字符方法 

 charAt()

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

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

 charCodeAt()

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

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

方括号加数字索引

访问个别字符

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

2.字符串操作方法 

concat()

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

<script>
    var stringValue = "hello";
    var rs = stringValue.concat(" world");
    //concat() 可以接收多个参数，拼接多个字符串
    var rs2 = stringValue.concat(" world", "!");
    //拼接后 stringValue 值不变
    console.log( stringValue );    //输出：hello
    console.log( rs );            //输出：hello world
    console.log( rs2 );            //输出：hello world!
    
    //实践中更多使用加号操作符进行字符串拼接
    var stringValue2 = "hello", stringValue3 = " world";
    var rs3 = stringValue2 + stringValue3;
    console.log( rs3 );            //输出：hello world
</script>

slice()、substr()、substring()

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

<script>
    var stringValue = "hello world";
//参数为正数时：
    //第一个参数：指定字符串的开始位置
    console.log( stringValue.slice( 2 ) );            //输出：llo world
    console.log( stringValue.substring( 2 ) );        //输出：llo world
    console.log( stringValue.substr( 2 ) );            //输出：llo world
    //slice()/substring() 第二个参数：指定字符串的结束位置。输出的字符串不包含第二个参数位置的字符
    //substr() 第二个参数：指定字符串的结束位置
    console.log( stringValue.slice( 2, 7 ) );        //输出：llo w
    console.log( stringValue.substring( 2, 7 ) );    //输出：llo w
    console.log( stringValue.substr( 2, 7 ) );        //输出：llo wor
//参数为负数时:
    //slice(): 将传入的参数加上字符串长度
    //下例 -2 + 11 = 9，slice( -2 ) 等同于 slice( 9 )
    console.log( stringValue.slice( -2 ) );            //输出：ld
    //substring(): 将所有负值转换为 0
    console.log( stringValue.substring( -2 ) );        //输出：hello world
    //substr(): 将传入的参数加上字符串长度
    //下例 -2 + 11 = 9，slice( -2 ) 等同于 substr( 9 )
    console.log( stringValue.substr( -2 ) );           //输出：ld
    //slice(2, -4)相当于slice( 2, 7 )
    console.log( stringValue.slice( 2, -4 ) );         //输出：llo w
    //substring(2, -4)相当于substring( 2, 0 ),相当于substring( 0, 2 )
    console.log( stringValue.substring( 2, -4 ) );     //输出：he
    //substr() 会将第二个参数转换为0
    //substr( 2, -4 )相当于 substr( 2, 0 )
    console.log( stringValue.substr( 2, -4 ) );        //输出：(空字符串)
</script>

3.字符串位置方法

index()、lastIndex()

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

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

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

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

4.trim ( )  方法 

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

<script>
    var stringValue = "        happy            day    ";
    var trimValue = stringValue.trim();
    console.log( stringValue );        //输出：        happy            day    
    console.log( trimValue );        //输出：happy            day
</script>

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

<script>
    var stringValue = "aPpLe";
    //小写转换为大写
    console.log( stringValue.toUpperCase() );    //输出：APPLE
    //大写转换为小写
    console.log( stringValue.toLowerCase() );    //输出：apple
    //针对特定地区实现小写转换为大写
    console.log( stringValue.toLocaleUpperCase() );    //输出：APPLE
    //针对特定地区实现大写转换为小写
    console.log( stringValue.toLocaleLowerCase() );    //输出：apple
</script>

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

  match()  

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

  search()  

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

  replace()  

<script>
    var text = "cat, bat, sat, fat";
    var pattern = /.at/;
    //replace()
    //第一个参数：一个正则表达式或者一个RegExp对象
    //第二个参数：一个字符串或者一个函数

    //如果第一个参数为一个字符串，那么只会替换第一个字符串
    var result1 = text.replace( "at", "ON" );
    console.log( result1 );     //输出：cON, bat, sat, fat
    //如果第一个参数为指定全局标志的正则表达式，那么会替换所有子字符串
    var result2 = text.replace( /at/g, "ON" );
    console.log( result2 );     //输出：cON, bON, sON, fON

    //如果第二个参数是字符串，可以使用一些特殊的字符序列（如$$、$&、$`、$n、$nn、$1等），将正则表达式操作的值插入到结果字符串中
    //字符序列 $n : 替换文本为匹配第n个捕获组的子字符串，其中n等于 0 ~ 9
    var result3 = text.replace( /(.at)/g, "word($1)" );
    console.log( result3 );     //输出：word(cat), word(bat), word(sat), word(fat)
    //字符序列 $$ : 替换文本为 $
    var result4 = text.replace( /(.at)/g, "word($$)" );   
    console.log( result4 );     //输出:word($), word($), word($), word($)
    //字符序列 $` : 替换文本为匹配子字符串前的子字符串
    var result5 = text.replace( /(.at)/g, "word($`)" );   
    console.log( result5 );     //输出：word(), word(cat, ), word(cat, bat, ), word(cat, bat, sat, )
    //字符序列 $' : 替换文本为匹配子字符串后的子字符串
    var result6 = text.replace( /(.at)/g, "word($')" ); 
    console.log( result6 );     //输出：word(, bat, sat, fat), word(, sat, fat), word(, fat), word()
    //字符序列 $nn : 替换文本为匹配第nn个捕获组的子字符串，其中nn等于01~99
    var result7 = text.replace( /(..t)/g, "word($01)" );
    console.log( result7 );     //输出：word(cat), word(bat), word(sat), word(fat)

    //如果第二个参数是函数
    //在只有1个匹配项的情况下，会向函数传递3个参数：模式的匹配项、第一个捕获组的匹配项、第二个捕获组的匹配项
    //下面函数 htmlEscape（） 功能是转义四个字符"<"、">"、"&"、""
    function htmlEscape( text ){
        return text.replace(/[<>"&]/g, function(match, pos, originalText){
            switch(match){
                case "<":
                    return "&lt;";
                case ">":
                    return "&gt;";
                case "&":s
                    return "&amp;";
                case """:
                    return "&quot;";
            }
        });
    }
    console.log( htmlEscape("<p class="greeting">hello</p>") );
    //输出：&lt;p class=&quot;greeting&quot;&gt;hello&lt;/p&gt;
</script>

  split()  

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

<script>
    var text = "cat, bat, sat, fat";
    //split()
    //第一个参数：分隔符
    //第二个参数（可选）：指定数组的大小
    //分隔符可以是字符串
    var text1 = text.split( "," );
    console.log( text1 );       //输出：(4) ["cat", " bat", " sat", " fat"]
    var text2 = text.split( ",", 2 );
    console.log( text2 );       //输出：(2) ["cat", " bat"]
    //分隔符可以是一个 RegExp 对象，
    var text3 = text.split( /[^\,]+/ );
    console.log( text3 );       //输出：(5) ["", ",", ",", ",", ""]
</script>

7.localeCompare ( ) 方法

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

<script>
    var stringValue = "zoo";
    //比较之后可能会返回负数、0、正数
    //负数
    //在字母表中，字符串排在字符串参数之前
    console.log( stringValue.localeCompare( "zz" ) );        //输出：-1
    //0
    //字符串等于字符串参数
    console.log( stringValue.localeCompare( "zoo" ) );        //输出：0
    //正数
    //在字母表中，字符串排在字符串参数之后
    console.log(  stringValue.localeCompare( "yellow" ) );    //输出：1

    //localeCompare()返回的数值取决于实现
    var stringValue = "zoo";
    function order( value ){
        var result = stringValue.localeCompare( value );
        if( result<0 ){
            console.log( "'zoo'在'"+value+"'之前。" );        
        }else if( result==0 ){
            console.log( "'zoo'等于'"+value+"'。" );
        }else{
            console.log( "'zoo'在'"+value+"'之后。" );
        }
    }
    order( "zz" );        //输出：'zoo'在'zz'之前。
    order( "zoo" );        //输出：'zoo'等于'zoo'。
    order( "yellow" );    //输出：'zoo'在'yellow'之后。
</script>

8.fromCharCode（）方法

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

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

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

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

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

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

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

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

<script>
    var str = "some text";
    str.color = "red";
    console.log( str.color );   //输出：undefined
</script>