最详细的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方法（尽量不要使用）