最詳細的JavaScript高級教程（十三）包裝類型

概念

在講js中包裝類型的概念的時候我們想到在C#中，同樣有包裝類型的概念。基本類型不能有屬性和方法，而string，int等都是基本類型，講道理他們不該有int.parse這種使用，但是我們在別的語言中，經常使用這種語法，爲什麼呢？

這時候我們想到，C#中有String對象，大小寫只差，string是基本類型，String是對象，這個對象就是string的包裝，

js中同樣需要這樣的包裝以實現類似於下面的調用

var s1 = 'text';
var s2 = s1.substring(2);

js中的包裝類型有 Boolean Number String，注意使用typeof關鍵字判斷包裝類型都會返回Object，而基本類型定義的變量使用typeof關鍵字返回基本類型，這裏有所區別，也是我們不使用包裝類型的原因之一。

運行機制

當我們執行s1.substring(2);的時候，編譯器會迅速的初始化一個String對象，執行它的substring方法，然後返回值後迅速銷燬這個對象。

一般情況下，我們都使用基本類型來直接調用這些方法，不建議使用new的方式建立包裝類型的實例。

Boolean

建議不要使用。

Number

不建議對Number進行顯式的初始化

• 進制轉化

  var num = 10;
  alert(num.toString(8)); // 12
  

• 截取小數位數,四捨五入（不同瀏覽器可能實現的不同）

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

• 指數顯示，參數表示前面的小數位數大小

  var num = 10;
  alert(num.toExponential(2)); //1.00e+1
  

• 智能轉化，傳入參數表示用幾位數來表示這個數字

  var num = 99;
  // 用一位來表示99 只能用指數表示了
  alert(num.toPrecision(1));  //1e+2
  alert(num.toPrecision(2));  //99
  alert(num.toPrecision(3));  //99.0
  

String

• legth方法，返回字符數量

  // 注意返回的是字符數量不是字節數量
  // 中文一個字符佔兩個字節，這裏返回還是2
  var s = 'Hello';
  alert(s.length); //5
  var s2 = '中國';
  alert(s2.length); //2
  

• 獲取特定位置字符

  var s = 'Hello world';
  // 使用位置獲取字符
  alert(s.charAt(1)); // e
  // 使用位置獲取字符的code
  alert(s.charCodeAt(1)); // 101
  // 直接使用數組方法獲取字符
  alert(s[1]); //e
  

• 通過字符獲取位置

  var s = 'hello world';
  // 從前往後搜索
  alert(s.indexOf('o')); //4
  // 從後往前搜索
  alert(s.lastIndexOf('o')); //7
  // 接收第二個參數指示從哪個位置開始搜索
  alert(s.indexOf('o', 6)); //7
  alert(s.lastIndexOf('o', 6)); //4
  

  // 獲取所有匹配的字符的位置的方法
  function getPos(str, chr) {
      var position = [];
      var pos = str.indexOf(chr);
      while (pos > -1) {
        position.push(pos);
        pos = s.indexOf(chr, pos + 1);
      }
      return position;
  }
  alert(getPos(s, 'o')); //4,7
  

• 拼接字符串,注意原字符串不變，新字符串返回

  var s = 'Hello world';
  var s2 = '!';
  // 使用加號拼接字符串
  alert(s + s2); //Hello world!
  // 使用concat拼接
  alert(s.concat(s2)); // Hello world!
  

• 切割和切片（生成新字符串）

  var s = 'Hello world';
  // 從第三位開始切片到最後
  alert(s.slice(3)); // lo world
  alert(s.substring(3)); // // lo world
  alert(s.substr(3)); // lo world
  
  // 切片第三位到第七位，與substring相同，與substr不同
  alert(s.slice(3, 7)); // lo w
  alert(s.substring(3, 7)); // lo w
  // substr 第二個參數是返回字符串的個數
  alert(s.substr(3, 7)); // lo worl
  
  // 傳遞負數，slice是我們正常的切片邏輯
  alert(s.slice(-3)); // rld
  // substring方法會把負數轉化爲0
  alert(s.substring(-3)); //hello world
  alert(s.substr(-3)); // rld
  
  alert(s.slice(3, 0)); // 顯示空
  alert(s.substring(3, 0)); //顯示Hel
  
  alert(s.substring(3, -4)); // Hel 因爲-4被轉化爲0
  

  注意區別：
  1. slice方法和substring是已知開始和結束的位置，substr是已知開始位置和截取的字數
  2. 負數處理上，slice和substr都是拿length減去負數，substring轉化爲0
• trim 刪除前後空格(源字符串不變，返回副本)
• 大小寫轉化 （當需要考慮代碼運行多語言環境的時候最好使用本地化的轉化方法）
  1. toLowerCase
  2. toUpperCase
  3. toLocalLowerCase 根據特定地區的實現
  4. toLocalUpperCase
• 模式匹配（直接在字符串上調用正則表達式）

  // 匹配 match
  var text = 'cat, bat, sat, fat';
  var pattern = /.at/;
  
  // 下面的方法與pattern.exec(text)等價
  var matches = text.match(pattern);
  alert(matches.index); // 0
  alert(matches[0]); // cat
  

  // 搜索 search
  // 搜索不到返回1 搜到了返回位置
  var pos = text.search(/at/);
  alert(pos); //1
  

• 字符串替換

  // 提供字符串替換的話，只替換第一個匹配項
  var text = 'cat, bat, sat, fat';
  var result = text.replace('at', 'ond');
  alert(result); //cond, bat, sat, fat
  

  // 使用正則表達式可以替換所有的匹配項
  // 要替換所有的匹配項需要提供全局標誌位 /g
  var text = 'cat, bat, sat, fat';
  var result = text.replace(/at/g, 'ond'); //cond, bond, sond, fond
  alert(result); //cond, bat, sat, fat
  

• 高級字符串替換（將正則匹配到了將要替換的字符插入到替換字符串之中）

1. 第二個參數插入下列值使用正則匹配到的字符串
   

   var text = 'cat, bat, sat, fat';
   var result = text.replace(/(.at)/g, 'world ($1)'); //第一個匹配組中的值回傳替換字符串
   alert(result); //world (cat), world (bat), world (sat), world (fat)
   

2. 傳入一個方法以指示更加精確的替換操作

   // 第一個參數是正則表達式、
   // 第二個參數是一個函數
   // 函數的參數，一個參數是當前匹配的值，後面的值是捕獲組的項
   // 最後兩個參數一個是匹配項的位置，最後一個是原始字符串
   function htmlEscape(text) {
       return text.replace(/[<>"&]/g, function(match, pos, originText) {
         switch (match) {
           case '<':
             return '&lt;';
           case '>':
             return '&gt;';
           case '&':
             return '&amp;';
           case '"':
             return '&quot;';
         }
       });
   }
   

• 字符串分隔 split

1. split接收的第二個參數是指示返回的數組的大小，比如本來分隔成五項，傳入2會截斷數組，只返回兩項
2. 可以傳入正則表達式，使用正則表達式捕獲的字符串作爲分隔符，需要注意各個瀏覽器對於正則表達式的支持不一定所以得出的結果可能不同

• 字符串比大小 localeCompare

  // 按照大小排序
  // 如果原字符串較大，返回1
  // 會隨着瀏覽器支持的語言和國家決定這個方法的行爲
  var s = 'yellow';
  alert(s.localeCompare('brick')); //1
  alert(s.localeCompare('yellow')); //0
  alert(s.localeCompAare('zoo'));  //-1
  

• 編碼和反編碼

  var s = 'hello';
  alert(s.charCodeAt(0)); //104
  alert(String.fromCharCode(104));// h
  

• html方法（儘量不要使用）