JavaScript引用類型——基本包裝類型

基本包裝類型

為了便于操作基本類型值，ECMAScript還提供了3個特殊的引用類型：Boolean，Number，String。這些類型與其它引用類型相似，但同時也具有與各自的基本類型相應(yīng)的特殊行為。
實際上， 每當讀取一個基本類型值得時候，后臺就會創(chuàng)建一個對應(yīng)的基本包裝類型的對象，從而能夠調(diào)用一些方法來操作這些數(shù)據(jù)。

var s1 = "some text";
var s2 = s1.substring(2);

s1保護一個字符串，字符串是基本類型值，基本類型值不是對象，從邏輯上講不應(yīng)該有方法，當訪問s1時，訪問過程處于一種讀取模式，也就是要從內(nèi)存中讀取這個字符串的值。在獨缺模式中訪問字符串時，后臺都會自動完成下列處理。

（1） 創(chuàng)建String類型的一個實例；
（2） 在實例上調(diào)用指定的方法；
（3） 銷毀這個實例。

var s1 =new String(some text);
var s2 = s1.substring(2);
s1 = null;

上面三個步驟也適用于Bollean和Number類型對應(yīng)的布爾值和數(shù)字值。
引用類型與基本包裝類型的主要區(qū)別就是對象的生存期。使用new操作符創(chuàng)建的引用類型的實例，在執(zhí)行流離開當前作用域之前都一直保存在內(nèi)存中。而自動創(chuàng)建的基本包裝類型的對象，則只存在于一行代碼執(zhí)行的瞬間，然后立即被銷毀。這意味著我們不能再運行時為基本類型值添加屬性和方法。

var s1 = "some text";
s1.color = "red";
alert(s1.color); //undefined

當然可以顯示的調(diào)用Boolean、Number和String來創(chuàng)建基本包裝類型的對象。不過，應(yīng)該在絕對必要的情況下在這樣做，因為這種做法很容易讓人分不清自己是在處理基本類型還是引用類型的值。
對基本包裝類型的實例調(diào)用typeof會返回"object",所有基本包裝類型的對象在轉(zhuǎn)換為布爾類型時值都是true。
Object構(gòu)造函數(shù)會根據(jù)傳入值得類型返回相應(yīng)基本包裝類型的實例。

var obj = new Object("some text");
alert(obj instanceof String); //true

把字符串傳給Object構(gòu)造函數(shù)，就會創(chuàng)建String的實例，而傳入數(shù)字就會得到Number的實例，傳入布爾值就會得到Boolean的實例。
需要注意的是，使用new調(diào)用基本包裝類型的構(gòu)造函數(shù)，與直接調(diào)用同名的轉(zhuǎn)型函數(shù)是不一樣的。

var value = "25";
var number = Number(value); //轉(zhuǎn)型函數(shù)
alert(typeof number); //"number"

var obj = new Number(value); //構(gòu)造函數(shù)
alert(typeof obj); //"object"

變量number中保存的是基本類型的值25，變量obj中保存的是Number的實例。每個基本包裝類型提供了操作相應(yīng)值得便捷方法。

  • Bollean類型
    Boolean類型是與布爾值對應(yīng)的引用類型。
var booleanObject = new  Boolean(true);

Boolean的實例重寫了valueOf()方法，返回基本類型值true或false；重寫了toString()方法，返回字符串"true"或"false"。
Boolean對象經(jīng)常會造成人們的誤解，在ECMAScript中的用處不大。

var falseObject = new Boolean(false);
var result = falseObject && true;
alert(result); //true

var falseValue = false;
result = falseValue && true;
alert(result); //false

布爾表達式中所有對象都會被轉(zhuǎn)換為true。

alert(typeof falseObject); //object
alert(typeof falseValue); //boolean
alert(falseObject instanceof Boolean); //true
alert(falseValue instanceof Boolean); //false
  • Number類型

Number是與數(shù)字值對應(yīng)的引用類型。創(chuàng)建Number對象，如：

var numberObject = new Number(10);

與Boolean類型一樣，Number類型也重寫了valueOf()、toLocalString()和toString()方法。重寫后的valueOf()方法返回對象表示的基本類型的數(shù)值，另外兩種方法則返回字符串形式的數(shù)值，可以為toString()方法傳遞一個表示基數(shù)的參數(shù)，告訴它返回幾進制數(shù)值的字符串形式，如：

var num = 10;
alert(num.toString()); //"10"
alert(num.toString(2)); //1010
alert(num.toString(8)); //12
alert(num.toString(10)); //10
alert(num.toString(16)); //a

除了繼承的方法之外，Number類型還提供了一些用于將數(shù)值格式轉(zhuǎn)化為字符串的方法。
toFixed()方法會按照指定的小數(shù)返回數(shù)值的字符串表示，如：

var num = 10;
alert(num.toFixed(2)); //"10.00"

var num = 10.005;
alert(num.toFixed(2)); //"10.01" 能夠自動舍入

toFixed()方法適合處理貨幣值。

toExponential()用于格式化的方法，該方法返回以指數(shù)表示法（也稱e表示法）表示數(shù)值的字符串形式。

var num = 10;
alert(num.toExponential(1)); //"1.0e+1"

toPrecision()方法可能會返回固定大寫（fixed）格式，也可能返回指數(shù)（exponential）格式，具體規(guī)則看哪種格式最合適。這個方法接收一個參數(shù)，即表示數(shù)值的所有數(shù)字的位數(shù)（不包括指數(shù)部分）。

var num = 99;
alert(num.toPrecision(1)); //"1e+2"
alert(num.toPrecision(2)); //"99"
alert(num.toPrecision(3)); //"99.0"

var numberObject = new Number(10);
var numberValue = 10;
alert(typeof numberObject); //"object"
alert(typeof numberValue); //"number"
alert(numberObject instanceof Number); //true
alert(numberValue instanceof Number); //false
  • String類型
    String類型是字符串的對象包裝類型。
var stringObject = new String("hello world");

String對象的方法也可以在所有基本字符串值中訪問到。繼承的valueOf()方法，toLocaleString()和toString()方法，都返回對象所表示的基本字符串值。
String類型的每個實例都有一個length屬性

var stringObject = new String("hello world");
alert(stringObject.length); //"11"

String類型提供了很多方法，由于輔助完成對ECMAScript中字符串的解析和操作。

  • 1. 字符方法

兩個由于訪問字符串中特定字符的方法：charAt()和charCodeAt()。這兩個方法都接收一個參數(shù)，即基于0的字符位置。其中，charAt()方法以單字符字符串的形式返回給定位置的那個字符：

var stringValue = "hello world";
alert(stringValue.charAt(1)); //"e"

如果想得到字符編碼，就是用charCodeAt()：

var stringValue = "hello world";
alert(stringValue.charCodeAt(1)); //輸出"101"

另一個訪問個別字符的方法,使用方括號加數(shù)字索引來訪問字符串中特定字符：

var stringValue = "hello world";
alert(stringValu[1]); //"e"
  • 2. 字符串操作方法
    下面介紹與操作字符串有關(guān)的幾個方法。
    concat()方法，由于將一個或多個字符串拼接起來，返貨拼接得到的新字符串。
var stringValue = "hello ";
var result = stringValue.concat("world");
alert(result); //"hello world"
alert(stringValue); //"hello"

var stringValue = "hello ";
var result = stringValue.concat("world", "!");
alert(result); //"hello world!"
alert(stringValue); //"hello"

在實踐中更多的是用加號操作符（+）拼接字符串。

ECMAScript還提供了三個基于子字符串創(chuàng)建新字符串的方法：slice()、substr()和substring()。這三個方法都會返回被操作字符串的一個子字符串，而且也都接受一個或兩個參數(shù)。第一個參數(shù)指定子字符串的開始位置，第二個參數(shù)（在指定情況下）表示字符串到哪里結(jié)束。具體來說，slice()和substring()的第二個參數(shù)指定的是子字符串最后一個字符后面的位置。而substr()的第二個參數(shù)指定的則是返回的字符個數(shù)。如果沒有給這些方法傳遞第二個參數(shù)，則將字符串的末尾作為結(jié)束的位置。
與concat()方法一樣，slice()、substr()和substring()也不會修改字符串本身的值——它們只是返回一個基本類型的字符串值，對原始字符串沒有任何影響。

var stringValue = "hello world";
alert(stringValue.slice(3)); //"lo world"
alert(stringValue.substring(3)); //"lo world"
alert(stringValue.substr(3)); //"lo world"
alert(stringValue.slice(3,7)); //"lo w"
alert(stringValue.substring(3,7)); //"lo w"
alert(stringValue.substr(3,7)); //"lo worl"

在傳遞給這些方法的參數(shù)是負值的情況下，slice()方法會給傳入的負值與字符串的長度相加，substr()方法將負的第一個參數(shù)加上字符串的長度，而將負的第二個參數(shù)轉(zhuǎn)換為0，substring()方法會把所有負值參數(shù)都轉(zhuǎn)換為-。

var stringValue = "hello world";
alert(stringValue.slice(-3)); //"rld"
alert(stringValue.substring(-3)); //"hello world"
alert(stringValue.substr(-3)); //"rld"
alert(stringValue.slice(3,-4)); //"lo w"
alert(stringValue.substring(3,-4)); //"hel"
alert(stringValue.substr(3,-4)); //""(空字符串)

substring()方法會將較小的數(shù)作為開始位置，將較大的數(shù)作為結(jié)束位置。

  • 3. 字符串位置方法
    有兩個可以從字符串中查找子字符串的方法：indexOf()方法和lastIndexOf()方法。這兩個方法都是從一個字符串中搜索給定的子字符串，然后返回子字符串的位置（如果沒有找到，則放回-1）。
    indexOf()從字符串開頭向后搜索子字符串，lastIndexOf()從字符串末尾向前搜索子字符串。
var stringValue = "hello world";
alert(stringValue.indexOf("o"); //4
alert(stringValue.lastIndexOf("o")); //7

這兩個方法都可以接收可選的第二個參數(shù)，表示從字符串中的哪個位置開始搜索。

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

可以通過循環(huán)調(diào)用indexOf()或lastIndexOf()來找到所有匹配的子字符串。

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);
}
alert(positions); //"3,24,32,35,52"

在循環(huán)外，首先找到"e"在字符串中的初始位置，然后進入循環(huán)。

  • 4. trim()方法
    ECMAScript5 為所有字符串定義了trim()方法。這個方法會創(chuàng)建一個字符串的副本，刪除前置及后綴的所有空格，然后返回結(jié)果。
var stringValue = "    hello world    ";
var trimmedStringValue = stringValue.trim();
alert(stringValue); //"    hello world    "
alert(trimmedStringValue); //"hello workd"

由于trim()返回的是字符串的副本，所以原始字符串中的前置及后綴空格會保持不便。
trimLeft()和trimRight()方法，分別用于刪除字符串開頭和末尾的空格。

  • 5. 字符串大小轉(zhuǎn)換方法

ECMAScript中涉及字符串大小寫轉(zhuǎn)換的方法有四個：toLowerCase()、toLocaleLowerCase()、toUpperCase()和toLocaleUpperCase()。

var stringValue = "hello world";
alert(stringValue.toLocaleUpperCase()); //"HELLO WORLD"
alert(stringValue.toUpperCase()); //"HELLO WORLD"
alert(stringValue.toLocaleLowerCase()); //"hello world"
alert(stringValue.toLowerCase()); //"hello world"
  • 6. 字符串模式匹配方法

String類型定義了幾個用于在字符串中匹配模式的方法。
match()方法，在字符串調(diào)用這個方法，本質(zhì)上與調(diào)用RegExp的exec方法相同。match()方法只接受一個參數(shù)，要么是一個正則表達式，要么是一個RegExp對象。

//與pattern.exec(text)相同
var matches = text.match(pattern);
alert(matches.index); //0
alert(matches[0]); //"cat"
alert(pattern.lastIndex); //0

match()方法返回了一個數(shù)組，數(shù)組的第一項是與整個模式匹配的字符串，之后的每一項（如果有）保存著與正則表達式中的捕獲組匹配的字符串。

search()方法，這個方法只接受一個參數(shù)，要么是一個正則表達式，要么是一個RegExp對象。search()方法返回字符串中第一個匹配項的索引；如果沒有找到匹配項，則返回01。search()方法始終是從字符串開頭向后查找模式。

var text = "cat, bat, sat, fat";
var pos = text.search(/at/);
alert(pos); //1

replace()方法，這個方法接受兩個參數(shù)：第一個參數(shù)可以是一個RegExp對象或這一個字符串（這個字符串不會被轉(zhuǎn)換成正則表達式），第二個參數(shù)可以是一個字符串或者一個函數(shù)。如果第一個參數(shù)是字符串，那么只會替換第一個子字符串。要想替換所有子字符串，唯一的辦法就是提供一個正則表達式，而且要指定全局（g）標志。

var text = "cat, bat, sat, fat";
var result = text.replace("at", "ond");
alert(result); //"cond, bat, sat, fat"

result = text.replace(/at/g, "ond");
alert(result); //"cond, bond, sond, fond"

ECMAScript提供一些特殊的字符序列。

  • $$： $
  • $&：匹配真?zhèn)€模式的子字符串。與RegExp.lastMatch值相同
  • $'：匹配子字符串之前的子字符串。與RegExp.leftContext的值相同
  • $`：匹配子字符串之后的子字符串。與RegExp.rightContext的值相同
  • $n：匹配第n個捕獲組字符串。n等于0~9。
  • $nn：匹配第n 個捕獲組字符串。n等于0你~99。
var text = "cat, bat, sat, fat";
result = text.replace("/(.at)/g","word($1)");
alert(result); //word(cat), word(bat), word(sta), word(fat)

replace()方法的第二個參數(shù)可以是一個函數(shù)。在只有一個匹配項（即與模式匹配的字符串）的情況下，會向這個函數(shù)傳遞3個參數(shù)，模式的匹配項，模式匹配項在字符串中的位置和原始字符串。在正則表達是中定義了多個捕獲組的情況下，傳遞給函數(shù)的參數(shù)依次是模式的匹配項、第一個捕獲組的匹配項
第二個不過組的匹配項......，但組后兩個參數(shù)仍然分別是模式匹配項在字符串中的位置和原始字符串。這個函數(shù)返回一個字符串，表示應(yīng)該被替換的匹配項。

        function htmlEscape(text) {
            return text.replace(/[<>]&/g, function(match, pos, originalText) {
                switch (match) {
                    case "<":
                        return "&lt;";
                    case ">":
                        return "&gt;";
                    case "&":
                        return "&amp;";
                    case "\"":
                    return "&quot;";
                }
            });
        }
 alert(htmlEscape("<p class=\"greeting\">Hello world!</p>")); 
//&lt;p class=&quot;"greeting&quot;"&gt;Hello world!&lt;/p&gt;

 **split()**方法，這個方法可以基于指定的分隔符將一個字符串分割成多個子字符串，并將結(jié)果放在一個數(shù)組中。分隔符可以使字符串，也可以是RegExp對象（這個方法不會將字符串看成正則表達式）。split()方法可以接受第二個參數(shù)，用于指定數(shù)組的大小以便確保返回的數(shù)組不會超過既定大小。

var colorText = "red,blue,green,yellow";
var colors1 = colorText.split(","); //["red", "blue", "green", "yellow"]
var colors2 = colorText.split(",",2); //["red", "blue"]
var colors3 = colorText.split(/[^\,]+/); //["", ",", ",", ",", ""]
  • 7. localeCompare()方法

localeCompare()這個方法比較兩個字符串，并返回下列值中的一個：

  • 如果字符串在字母表中排在字符串參數(shù)之前，返回一個負數(shù)（大多數(shù)是-1，具體視情況而定）；
  • 如果字符串等于字符串參數(shù)，返回0；
  • 如果字符串在字母表中排在字符串參數(shù)之后，返回一個正數(shù)（大多數(shù)是1，具體視情況而定）；
var stringValue = "yellow";
alert(stringValue.localeCompare("brick")); //1
alert(stringValue.localeCompare("yellow")); //0
alert(stringValue.localeCompare("zoo")); //-1

function determineOrder(value) {
    var result stringValue.localeCompare(value);
    if(value<0){
        alert("The string 'yellow' comes before the string '"+value+"'.");
    }else if(value>0){
        alert("The string 'yellow' comes after the string '"+value+"'.");       
    }else{
                alert("The string 'yellow' comes equal the string '"+value+"'.");

    }
}
determineOrder("brick");
determineOrder("yellow");
determineOrder("zoo");
  • 8. fromCharCode()方法
    String構(gòu)造函數(shù)本身還有一個靜態(tài)方法:fromCharCode()。這個方法的任務(wù)是接收一或多個字符編碼，然后將它們轉(zhuǎn)換成一個字符串。這個方法與實例方法charCodeAt()執(zhí)行相反的操作。
 alert(String.fromCharCode(104, 101, 108, 108, 111));//"hello"
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容