說說 JavaScript 基本包裝類型

2019-11-06 06:08:33

字體：大中小

供稿：網(wǎng)友

為了便于操作基本類型的值，ECMAScript 提供了 3 個特殊的引用類型：Boolean、Number 和 String。每當讀取一個基本類型值的時候，后臺會創(chuàng)建一個對應(yīng)的基本包裝類型的對象。引用類型和基本包裝類型的區(qū)別是對象的生存期。使用 new 創(chuàng)建的引用類型的實例，在執(zhí)行流離開當前作用域之前一直都保存在內(nèi)存中；而自動創(chuàng)建的基本包裝類型的對象，只存在于一行代碼的執(zhí)行瞬間，然后立即被銷毀。對基本包裝類型的實例調(diào)用 typeof 都會返回 “object”，所以只有在絕對必要的情況下才顯式調(diào)用。Object 構(gòu)造函數(shù)會根據(jù)傳入值的類型返回相應(yīng)的基本包裝類型的實例：var obj = new Object("some text");console.log(obj instanceof String);//true使用 new 調(diào)用基本包裝類型的構(gòu)造函數(shù)與直接調(diào)用同名的轉(zhuǎn)型函數(shù)返回的類型的不一樣的：var value = "25";var number = Number(value);//轉(zhuǎn)型函數(shù)console.log(typeof number);//numbervar obj = new Number(value);//構(gòu)造函數(shù)console.log(typeof obj);//object

1 Boolean 類型

用處不大，特別是在布爾表達式中使用 Boolean 對象會造成誤解，因為布爾表達式中的所有對象都會被轉(zhuǎn)換為 true：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Boolean 對象的誤用（布爾表達式中所有的對象都會被轉(zhuǎn)換為 true）</title></head><body><script type="text/javascript"> var falSEObject = new Object(false); var result = falseObject && true; console.log(result);//true var falseValue = false; result = falseValue && true; console.log(result);//false</script></body></html>因此，建議永遠不要使用 Boolean 對象。

2 Number 對象

2.1 創(chuàng)建 Number 對象

var numberObject = new Number(10);

2.2 toString()

為 toString() 方法傳遞一個表示基數(shù)的參數(shù)，它會返回多少進制的數(shù)值的字符串形式：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

2.3 toFixed()

toFixed() 方法會按照指定的小數(shù)位返回數(shù)值的字符串表示： var num = 10; console.log(num.toFixed(2));//10.00如果數(shù)值本身包含的小數(shù)位比指定的還要多，那么接近指定的最大小數(shù)位的值就會舍入： var num = 10.005; console.log(num.toFixed(2));//10.01toFixed() 方法很適合處理貨幣值，但依實現(xiàn)而異。

注意： 規(guī)范中規(guī)定 toFixed() 方法可以表示帶有 0 ~ 20 個小數(shù)位的數(shù)值，但有的瀏覽器支持更多位數(shù)。

2.4 toExponential()

返回以指數(shù)表示法表示的數(shù)值的字符串形式，可以指定輸出結(jié)果中的小數(shù)位數(shù)：var num = 10;console.log(num.toExponential(1));//1.0e+1

2.5 toPRecision()

可能會返回固定大小的格式，會可能返回指數(shù)格式，它會自動判斷哪種格式合適。它接收一個參數(shù)，即表示數(shù)值的所有數(shù)字的位數(shù)（不包括指數(shù)部分）：var num = 99;console.log(num.toPrecision(1));//1e+2console.log(num.toPrecision(2));//99console.log(num.toPrecision(3));//99.0

注意： 規(guī)范中規(guī)定 toPrecision() 方法可以表示帶有 1 ~ 21 個小數(shù)位的數(shù)值，但有的瀏覽器支持更多位數(shù)。

2.6 建議

不建議直接直接實例化 Number 類型，因為在使用 typeof 和 instanceof 操作符測試基本類型數(shù)值與引用類型數(shù)值時，結(jié)果完全不同：var numberObject = new Number(10);var numberValue = 10;console.log(typeof numberObject);//objectconsole.log(typeof numberValue);//numberconsole.log(numberObject instanceof Number);//trueconsole.log(numberValue instanceof Number);//false

3 String 類型

使用 String 構(gòu)造函數(shù)創(chuàng)建： var StringObject = new String("hello world");length 屬性表示字符串中包含了多少字符。注意，即使字符串中吧包含雙字節(jié)字符，也算是一個字符：var stringValue = "hello world";console.log(stringValue.length);//11

3.1 字符方法

charAt() 接受基于 0 的字符位置，返回給定位置的那個字符：console.log(stringValue.charAt(1));//echarCodeAt() 接受基于 0 的字符位置，返回給定位置的那個字符編碼：console.log(stringValue.charCodeAt(1));//101ECMAScript 5 中可以使用方括號加數(shù)字索引的方式訪問字符串中的特定字符： console.log(stringValue[1]);//e

3.2 字符串方法

concat() 可將一個或多個字符串拼接起來，返回拼接后的新字符串：var stringValue = "hello ";var result = stringValue.concat("world");console.log(result);//hello worldconsole.log(stringValue);//helloconcat() 可以接受任意多個參數(shù)，因此可以拼接任意多個字符串：var stringValue = "hello ";var result = stringValue.concat("world", "!");console.log(result);//hello world!console.log(stringValue);//hello其他創(chuàng)建新字符串的方法

這些方法對原始字符串沒有影響，如果沒有給這些方法傳遞第二個參數(shù)，就會將字符串的長度作為結(jié)束位置。

方法名	接受參數(shù)	說明
slice()	字符串開始位置、子字符串最后一個字符后面的位置（可選）	如果參數(shù)是負數(shù)，會將負值與字符串的長度相加
substring()	字符串開始位置、子字符串最后一個字符后面的位置（可選）	將所有的負值轉(zhuǎn)換為 0
substr()	字符串開始位置、需要返回的字符個數(shù)（可選）	負的第一個參數(shù)加上字符串長度，負的第二個參數(shù)轉(zhuǎn)換為 0

//正值var stringValue = "hello world";console.log(stringValue.slice(3));//lo worldconsole.log(stringValue.substring(3));//lo worldconsole.log(stringValue.substr(3));//lo worldconsole.log(stringValue.slice(3, 7));//lo wconsole.log(stringValue.substring(3, 7));//lo wconsole.log(stringValue.substr(3, 7));//lo worl//負值console.log(stringValue.slice(-3));//rldconsole.log(stringValue.substring(-3));//hello worldconsole.log(stringValue.substr(-3));//rldconsole.log(stringValue.slice(3, -4));//lo wconsole.log(stringValue.substring(3,-4));//helconsole.log(stringValue.substr(3,-4));//空字符串

3.3 字符串位置方法

indexOf() 和 lastIndexOf() 從一個字符串中搜索給定的子字符串，然后返回子字符串的位置（如果沒有找到，則返回 -1）她們的區(qū)別在于 indexOf() 是從前向后搜索；而 lastIndexOf() 是從后往前搜索：可以通過循環(huán)調(diào)用 indexOf() 或 lastIndexOf() 來找到所有匹配的子字符串：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>可以通過循環(huán)調(diào)用 indexOf 或 lastIndexOf 來查找所有匹配的字符串</title></head><body><script type="text/Javascript"> var stringValue = "last night, I'm looking a good movie: La La Land"; var positions = new Array(); var pos = stringValue.indexOf("a"); while (pos > -1) { positions.push(pos); pos = stringValue.indexOf("a", pos + 1); } console.log(positions);//1,24,39,42,45</script></body></html>

3.4 trim() 方法

ECMAScript 5 定義她會創(chuàng)建一個字符串的副本，然后刪除前綴以及后綴的所有空格，最后返回：

3.5 字符串大小寫轉(zhuǎn)換方法

toLowerCase() 和 toUpperCase() ，是不是很經(jīng)典啊 O(∩_∩)O~toLocaleLowerCase() 和 toLocalUpperCase() 是針對地區(qū)的特殊實現(xiàn)，如果不知道代碼將在哪種語言環(huán)境中運行，最后還是用這兩個方法。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>字符串大小寫轉(zhuǎn)換方法</title></head><body><script type="text/javascript"> 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</script></body></html>

3.6 字符串的模式匹配方法

match() 接收一個參數(shù)，可以是正則表達式或者是 RegExp 對象，她會返回一個數(shù)組，數(shù)組的第一項是與整個模式匹配的字符串，之后的每一項（如果有）是與正則表達式中的捕獲組匹配的字符串：var text = "cat,bat,sat,fat";var pattern = /.at/;//與 pattern.exec(text) 相同var matches = text.match(pattern);console.log(matches.index);//0console.log(matches[0]);//catconsole.log(pattern.lastIndex);//0search() 接收的參數(shù)與 match() 相同，返回字符串中第一個匹配項的索引；如果沒有找到，則返回 -1；她會從前往后查找：var text = "cat,bat,sat,fat";var pos = text.search(/at/);console.log(pos);//1replace() 接收兩個參數(shù)，第一個參數(shù)是字符串或者是 RegExp 對象，第二個參數(shù)是一個字符串或者是一個函數(shù)。如果第一個參數(shù)是字符串，那么就只會替換第一個子字符串，要想替換所有子字符串，必須傳入指定全局標志的正則表達式：var result = text.replace("at", "ond");console.log(result);//cond,bat,sat,fatresult = text.replace(/at/g, "ond");console.log(result);//cond,bond,sond,fond如果第二個參數(shù)是字符串，還可以使用特殊的字符序列，將正則表達式操作得到的值插入到結(jié)果字符串中：

字符序列	替換文本
$$	$
$&	匹配整個模式的子字符串（與 RegExp.lastMatch 的值相同）
$’	匹配的子字符串之前的子字符串（與 RegExp.leftContext 的值相同）
$`	匹配的子字符串之后的子字符串（與 RegExp.rightContext 的值相同）
$n	匹配第 n 個捕獲組的子字符串。n 為 0 ~ 9。如果正則表達式?jīng)]有定義捕獲組，則使用空字符串
$nn	匹配第 nn 個捕獲組的子字符串。n 為 01 ~ 99。如果正則表達式?jīng)]有定義捕獲組，則使用空字符串

* 使用特殊的字符序列，可以使用最近一次匹配結(jié)果中的內(nèi)容：

var text = "cat,bat,sat,fat";result = text.replace(/(.at)/g, "Word ($1)");console.log(result);//word (cat),word (bat),word (sat),word (fat)replace() 的第二個參數(shù)也可以是函數(shù)。在只有一個匹配項的情況下，會向這個函數(shù)傳遞 3 個參數(shù)：模式的匹配項、模式匹配項在字符串中的位置以及原始字符串。在正則表達式中定義了多個捕獲組的情況下，傳遞給函數(shù)的參數(shù)依次是模式的匹配項、第一個捕獲組的匹配項、第二個捕獲組的匹配項……，最后兩個參數(shù)是模式匹配項在字符串中的位置以及原始字符串。因此這個函數(shù)可以實現(xiàn)更加精細的替換操作：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>split() 基于指定的分隔符將一個字符串分割成多個子字符串，并將結(jié)果放入數(shù)組中。分隔符可以是字符串或者 RegExp 對象。她還接受第二個參數(shù)，用于指定數(shù)組的大小：var colorText = "red,blue,green,yellow";console.log(colorText.split(","));console.log(colorText.split(",", 2));console.log(colorText.split(/[^/,]+/));對 split() 中正則表達式的支持因瀏覽器而異，因此在使用時，一定要在各種瀏覽器下做一做測試。