說說 JavaScript 基本包裝類型

2019-11-06 06:08:33

字體：大中小

來源：轉載

供稿：網友

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

1 Boolean 類型

用處不大，特別是在布爾表達式中使用 Boolean 對象會造成誤解，因為布爾表達式中的所有對象都會被轉換為 true：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Boolean 對象的誤用（布爾表達式中所有的對象都會被轉換為 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 創建 Number 對象

var numberObject = new Number(10);

2.2 toString()

為 toString() 方法傳遞一個表示基數的參數，它會返回多少進制的數值的字符串形式：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() 方法會按照指定的小數位返回數值的字符串表示： var num = 10; console.log(num.toFixed(2));//10.00如果數值本身包含的小數位比指定的還要多，那么接近指定的最大小數位的值就會舍入： var num = 10.005; console.log(num.toFixed(2));//10.01toFixed() 方法很適合處理貨幣值，但依實現而異。

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

2.4 toExponential()

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

2.5 toPRecision()

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

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

2.6 建議

不建議直接直接實例化 Number 類型，因為在使用 typeof 和 instanceof 操作符測試基本類型數值與引用類型數值時，結果完全不同：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 構造函數創建： var StringObject = new String("hello world");length 屬性表示字符串中包含了多少字符。注意，即使字符串中吧包含雙字節字符，也算是一個字符：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 中可以使用方括號加數字索引的方式訪問字符串中的特定字符： console.log(stringValue[1]);//e

3.2 字符串方法

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

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

方法名	接受參數	說明
slice()	字符串開始位置、子字符串最后一個字符后面的位置（可選）	如果參數是負數，會將負值與字符串的長度相加
substring()	字符串開始位置、子字符串最后一個字符后面的位置（可選）	將所有的負值轉換為 0
substr()	字符串開始位置、需要返回的字符個數（可選）	負的第一個參數加上字符串長度，負的第二個參數轉換為 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）她們的區別在于 indexOf() 是從前向后搜索；而 lastIndexOf() 是從后往前搜索：可以通過循環調用 indexOf() 或 lastIndexOf() 來找到所有匹配的子字符串：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>可以通過循環調用 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 定義她會創建一個字符串的副本，然后刪除前綴以及后綴的所有空格，最后返回：

3.5 字符串大小寫轉換方法

toLowerCase() 和 toUpperCase() ，是不是很經典啊 O(∩_∩)O~toLocaleLowerCase() 和 toLocalUpperCase() 是針對地區的特殊實現，如果不知道代碼將在哪種語言環境中運行，最后還是用這兩個方法。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>字符串大小寫轉換方法</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() 接收一個參數，可以是正則表達式或者是 RegExp 對象，她會返回一個數組，數組的第一項是與整個模式匹配的字符串，之后的每一項（如果有）是與正則表達式中的捕獲組匹配的字符串：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() 接收的參數與 match() 相同，返回字符串中第一個匹配項的索引；如果沒有找到，則返回 -1；她會從前往后查找：var text = "cat,bat,sat,fat";var pos = text.search(/at/);console.log(pos);//1replace() 接收兩個參數，第一個參數是字符串或者是 RegExp 對象，第二個參數是一個字符串或者是一個函數。如果第一個參數是字符串，那么就只會替換第一個子字符串，要想替換所有子字符串，必須傳入指定全局標志的正則表達式：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如果第二個參數是字符串，還可以使用特殊的字符序列，將正則表達式操作得到的值插入到結果字符串中：

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

* 使用特殊的字符序列，可以使用最近一次匹配結果中的內容：

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