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

基本包裝類型

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

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

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

(1) 創建String類型的一個實例;
(2) 在實例上調用指定的方法;
(3) 銷毀這個實例。

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

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

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

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

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

把字符串傳給Object構造函數,就會創建String的實例,而傳入數字就會得到Number的實例,傳入布爾值就會得到Boolean的實例。
需要注意的是,使用new調用基本包裝類型的構造函數,與直接調用同名的轉型函數是不一樣的。

var value = "25";
var number = Number(value); //轉型函數
alert(typeof number); //"number"

var obj = new Number(value); //構造函數
alert(typeof obj); //"object"

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

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

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

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

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

布爾表達式中所有對象都會被轉換為true。

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

Number是與數字值對應的引用類型。創建Number對象,如:

var numberObject = new Number(10);

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

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類型還提供了一些用于將數值格式轉化為字符串的方法。
toFixed()方法會按照指定的小數返回數值的字符串表示,如:

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

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

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

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

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

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

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()。這兩個方法都接收一個參數,即基于0的字符位置。其中,charAt()方法以單字符字符串的形式返回給定位置的那個字符:

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

如果想得到字符編碼,就是用charCodeAt():

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

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

var stringValue = "hello world";
alert(stringValu[1]); //"e"
  • 2. 字符串操作方法
    下面介紹與操作字符串有關的幾個方法。
    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還提供了三個基于子字符串創建新字符串的方法:slice()substr()substring()。這三個方法都會返回被操作字符串的一個子字符串,而且也都接受一個或兩個參數。第一個參數指定子字符串的開始位置,第二個參數(在指定情況下)表示字符串到哪里結束。具體來說,slice()和substring()的第二個參數指定的是子字符串最后一個字符后面的位置。而substr()的第二個參數指定的則是返回的字符個數。如果沒有給這些方法傳遞第二個參數,則將字符串的末尾作為結束的位置。
與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"

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

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()方法會將較小的數作為開始位置,將較大的數作為結束位置。

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

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

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

可以通過循環調用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"

在循環外,首先找到"e"在字符串中的初始位置,然后進入循環。

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

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

  • 5. 字符串大小轉換方法

ECMAScript中涉及字符串大小寫轉換的方法有四個: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()方法,在字符串調用這個方法,本質上與調用RegExp的exec方法相同。match()方法只接受一個參數,要么是一個正則表達式,要么是一個RegExp對象。

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

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

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

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

replace()方法,這個方法接受兩個參數:第一個參數可以是一個RegExp對象或這一個字符串(這個字符串不會被轉換成正則表達式),第二個參數可以是一個字符串或者一個函數。如果第一個參數是字符串,那么只會替換第一個子字符串。要想替換所有子字符串,唯一的辦法就是提供一個正則表達式,而且要指定全局(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提供一些特殊的字符序列。

  • $$: $
  • $&:匹配真個模式的子字符串。與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()方法的第二個參數可以是一個函數。在只有一個匹配項(即與模式匹配的字符串)的情況下,會向這個函數傳遞3個參數,模式的匹配項,模式匹配項在字符串中的位置和原始字符串。在正則表達是中定義了多個捕獲組的情況下,傳遞給函數的參數依次是模式的匹配項、第一個捕獲組的匹配項
第二個不過組的匹配項......,但組后兩個參數仍然分別是模式匹配項在字符串中的位置和原始字符串。這個函數返回一個字符串,表示應該被替換的匹配項。

        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()**方法,這個方法可以基于指定的分隔符將一個字符串分割成多個子字符串,并將結果放在一個數組中。分隔符可以使字符串,也可以是RegExp對象(這個方法不會將字符串看成正則表達式)。split()方法可以接受第二個參數,用于指定數組的大小以便確保返回的數組不會超過既定大小。
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()這個方法比較兩個字符串,并返回下列值中的一個:

  • 如果字符串在字母表中排在字符串參數之前,返回一個負數(大多數是-1,具體視情況而定);
  • 如果字符串等于字符串參數,返回0;
  • 如果字符串在字母表中排在字符串參數之后,返回一個正數(大多數是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構造函數本身還有一個靜態方法:fromCharCode()。這個方法的任務是接收一或多個字符編碼,然后將它們轉換成一個字符串。這個方法與實例方法charCodeAt()執行相反的操作。
 alert(String.fromCharCode(104, 101, 108, 108, 111));//"hello"
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,002評論 6 542
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,400評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,136評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,714評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,452評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,818評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,812評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,997評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,552評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,292評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,510評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,035評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,721評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,121評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,429評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,235評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,480評論 2 379

推薦閱讀更多精彩內容