javascript之基本包装类型（Boolean，Number，String）基础篇

时间：2023-03-09 15:32:43
javascript之基本包装类型（Boolean，Number，String）基础篇

前几天整理了javascript中Array方面的知识，但是String中的一些方法多多少少和Array里的方法有些类似容易混淆，就顺便连同String所在的包装类一起整理一下，希望可以帮助到初学者，同时也算是知识的一个回顾总结。

引子：实际上，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而让我们能够调用一些方法来操作这些数据。

var s1='some text';

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

基本类型不是对象，因而从逻辑上讲他们不该有方法，其实为了让我们实现这种操作，后台已经完成了一系列的处理。第二行代码访问s1时，访问过程处于一种读取模式，也就是要从内存中读取这个字符串的值。而在读取模式中访问字符串时，后台会完成如下处理：

  1. 创建 String/Boolean/Number 类的一个实例。var s1=new String('some text');
  2. 在实例上调用指定的方法。var s2=s1.substring(2);//'me text'
  3. 销毁这个实例。s1=null

引用类型与基本包装类型的主要区别就是对象的生存期：

  • 使用new 操作符创建的引用类型的实例，在执行流离开当前作用域之前都一直保存在内存中。
  • 自动创建的基本包装类型的对象，只存在于代码执行的一瞬间，然后被立即销毁。这意味着我们不能在运行时为基本类型值添加属性和方法。

创建基本包装类型实例方法：

  • 通过各自对应的包装类型构造实例，可以传入初始化参数

javascript之基本包装类型（Boolean，Number，String）基础篇

  • 通过 Object 构造函数根据传入值的类型返回相应基本包装类的实例。原型链继承关系 Object.prototype <- String.prototype <- str

javascript之基本包装类型（Boolean，Number，String）基础篇

这里应该注意，使用 new 调用基本包装类型的构造函数，与直接调用同名的转型函数是不一样的：

var value='11';

var num=Number(value);

typeof num;//'number'

typeof new Number(value);//'object'

javascript之基本包装类型（Boolean，Number，String）基础篇

Boolean 类型

javascript之基本包装类型（Boolean，Number，String）基础篇

Boolean 类型的实例重写了 valueOf() 方法，返回基本类型值 true/false ，重写了 toString() 方法，返回字符串 “true”/“false”

在布尔表达式中使用 Boolean 对象：在有一个操作数不是布尔类型值的情况下，遵循如果第一个操作数是对象，返回第二个操作数。如果第二个操作数是对象，则只有在第一个操作数求值结果为true情况下才会返回该对象。(这是因为第一个操作数在布尔表达式被转为 true 的原因吗？？)

var falseobj=new Boolean(false);

falseobj&&true;//true

true&&falseobj;//Boolean {[[PrimitiveValue]]: false}

Number 类型

javascript之基本包装类型（Boolean，Number，String）基础篇

Number 类型重写了 valueOf() ，返回对象表示基本类型的数值，重写了 toLocaleString(),toString() 方法，返回字符串形式数值。

数值格式化为字符串的方法：

toFixed():按照指定的小数位返回数值的字符串表示，如果数值本身包含的小数位比指定的要多，那么接近指定的最大小位数的值就会舍入

var num=10;

num.toFixed(2);//"10.00"

num=10.003;

num.toFixed(2);//"10.00"

toExponential():该方法返回以指数表示法（e表示法）表示的数值的字符串形式，参数指定小数位数。

var num=100;

num.toExponential(1);//"1.0e+2"

toPrecision():对于一个数值来说，该方法可能返回固定大小格式（fixed），也可能返回指数格式（exponential），具体规则看哪种格式最合适（ toPrecision() 会根据要处理的数值决定到底是调用 toFixed() 还是 toExponential() ，这三个方法都可以通过向上或向下舍入做到以准确的形式来表示带有正确小数的位）。参数表示数值的所有数字的位数（不包括指数部分）。

var num=99;

num.toPrecision(1);//"1e+2",一位数无法准确的表示99，因此向上舍入为100

num.toPrecision(2);//"99"

num.toPrecision(3);//"99.0"

String 类型

javascript之基本包装类型（Boolean，Number，String）基础篇

String 对象的方法也可以在所有基本的字符串值中访问，继承的 valueOf() ， toLocaleString() ， toString() 方法都返回对象所表示的基本字符串值。

  • 字符方法
  • 字符串操作方法
  • 字符串位置方法
  • trim方法
  • 字符串大小写转换方法
  • 字符串的模式匹配方法
  • fromCharCode方法
  • HTML方法

字符方法： charAt() ， charCodeAt() ，参数为基于0的字符位置。 charAt() 以单字符字符串的形式返回给定位置的那个字符。 charCodeAt() 返回给定位置字符的字符编码。在支持的浏览器也可以使用"[index]"方式访问字符串中特定字符。

var str="some text";

str.charAt(1);//"o"

str.charCodeAt(1);//

str[1];//"o"

字符串操作方法：

  • concat()：将一个或多个字符串拼接起来，返回拼接得到的新字符串，该方法可以接受任意多个参数。 
    var str="some";
    
var result=str.concat(' text');
    
result;//"some text"
    
str.concat(' is',' interesting');//"some is interesting"

concat() ， '+' ，都可以拼接字符串，性能方面谁比较好呢？在chrome下测试了一下性能！显然是 '+' 拼接快。

javascript之基本包装类型（Boolean，Number，String）基础篇

  • 基于子字符串创建新字符串的方法： slice() ， substr() ， substring() 这三个方法都会返回被操作字符串的一个子字符串，并不影响原字符串。接收1~2个参数（ slice 和 substring (子字符串串开始位置，结束位置的后一个位置)； substr (开始位置，子字符串字符个数)）。省略参数二，则以字符串长度作为结束标志。
  1. 参数传递为正值 
    var str="some text";
    
str.slice(3);//"e text"
    
str.substring(3);//"e text"
    
str.substr(3);//"e text"
    
str.slice(3,7);//"e te"
    
str.substring(3,7);//"e te"
    
str.substr(3,7);//"e text" 参数二大于字符串后面的长度个数，则和以字符串长度作为结束标志效果一样
  2. 参数为负数的情况： slice() 将负值与字符串长度相加； substring() 把所有负值参数都转换为0； substr() 将第一个负值参数与字符串长度相加，第二个负值参数转换为0。 
    var str="some text";
    
str.slice(-3);//"ext"
    
str.slice(-10);//"some text" 若计算下来还是负数则返回原字符串的一个副本
    
str.substring(-3);//"some text"
    
str.substr(-3);//"ext"
    str.slice(3,-4);//"e "
    
str.substring(3,-4);//"som" 若结束大于开始，该方法会自动将较小数作为开始位置，较大数作为结束位置，因此最终相当与str.substring(0,3)
    
str.substr(3,-4);//"" <IE9传入负值参数，会返回原始字符串

  • 字符串位置方法： inexOf() 从字符串开头向后搜索， lastIndexOf() 从字符串末尾向前搜索，从一个字符串中搜索给定子字符串，返回给定子字符串的位置，没找到返回-1。参数1~2个：子串，从哪个位置开始搜索(若指定该位置为负数，则忽略该参数，只用第一个参数)。

    var str="some text";
    
str.indexOf('ome');//
    
str.indexOf('oe');//-1
    
str.lastIndexOf('ome');//

//循环调用来找所有匹配子字符串
    
var str="sdsv fvda sdf sc df"
    
var k=0,result;
    
result=str.indexOf('df',k);
    
while(result!=-1){
    
    alert(result);
    
    k=result+2;
    
    result=str.indexOf('df',k);
    
}
  • trim()方法：该方法创建一个子字符串的副本，删除前置和后缀所有空格，然后返回结果。部分浏览器还支持非标准的 trimLeft() ， trimRight() 方法 
    var str=" sd  ds sd  ";
    
str.trim();//"sd  ds sd"

//利用正则表达式实现trim()方法,注意使用this.toString而不是this,因为this是当前字符串的包装类。（new String('xx')+'good'为'xxgood'拼接的原因是包装类自动转为字符串？？）
    
String.prototype.removeBlank=function(){
    
   return this.toString().replace(/(^\s*)|(\s*$)/g,'');
    
}

//利用查找子字符串实现trim()方法
    
String.prototype.removeBlank=function(){
    
  var str=this.toString().split(''),i=0;
    
  while(str[i]==' '){
    
    str.splice(i,1);
    
  };
    
  while(str[str.length-1]==' '){
    
    str.splice(str.length-1,1);
    
  }
    
  return str.join('');
    
}

  • 字符串大小写转换方法：通用方法 toLowerCase() 和 toUpperCase() 借鉴自java.lang.String中的同名方法； toLocaleLowerCase() 和 toLocaleUpperCase() 是针对特定地区的实现。

    var str="soME TExt";
    
str.toUpperCase();//"SOME TEXT"
    
str.toLowerCase();//"some text"
  • 字符串的模式匹配方法：均在字符串上调用这些方法
  1. match() ：参数为一个正则表达式/RegExp对象，该函数本质上与调用RegExp的exec()方法相同。参数为一个正则表达式或一个RegExp对象。但 match 和 exec 还是有些区别的比如说捕获组等 
    var text="cat, bat, sat, fat";
    
var pattern=/.at/;
    
var matches=text.match(pattern);
    
matches.index=0;//在字符串中匹配到的索引
    
matches[0];//"cat"
    
pattern.lastIndex;//0 模式中下一个匹配的索引值，只有在含g全局搜索时才会起作用
  2. search() ：参数为一个正则表达式或一个RegExp对象，从字符串开头向后查找模式，返回字符串中第一个匹配项的索引，没找到匹配项返回-1。 
    var text="cat, bat, sat, fat";
    
text.search(/at/);//
  3. replace() ：替换子字符串，参数一为一个字符串（该字符串不会被转为正则表达式）或一个RegExp对象，参数二为字符串或函数。如果第一个参数为字符串则只会替换第一个子字符串，想要替换所有子字符串就提供一个正则表达式而且需要指定全局g标志。当参数二为函数时：在只有一个匹配项情况下会向这个函数传递3~多个参数：模式的匹配项，（第一个捕获组匹配项，第二个捕获组匹配项，...），模式匹配项在字符串中位置，原始字符串。 
    var text='cat, bat, sat, fat';
    
text.replace('at','ond');//"cond, bat, sat, fat"

text.replace(/at/g,'ond');//"cond, bond, sond, fond"

//使用正则查找特定字符，定义针对每个匹配字符返回特定替换的函数
    
var htmlEscape=function(text){
    
 return text.replace(/[<>"&]/g,function(match,pos,originalText){
    
   switch(match){
    
      case "<":return "&lt;";
    
      case ">":return "&gt;";
    
      case "&":return "&amp;";
    
      case "\"":return "&quot;";
    
   }
    
 });
    
}
    
htmlEscape('<p class=\"svf\"></p>');//"&lt;p class=&quot;svf&quot;&gt;&lt;/p&gt;"
  4. split() ：基于指定分隔符将一个字符串分割成多个子字符串，并将结果放在数组中。参数一：分隔符可以是字符串（不会被看成正则表达式）或RegExp对象。参数二（可选）：指定数组大小。 
    var colorText="red,blue,,green,yellow";
    
colorText.split();//["red,blue,,green,yellow"]
    
colorText.split('');//["r", "e", "d", ",", "b", "l", "u", "e", ",", ",", "g", "r", "e", "e", "n", ",", "y", "e", "l", "l", "o", "w"]
    
colorText.split(',');["red", "blue", "", "green", "yellow"]
    
colorText.split(',',2);//["red", "blue"]
    
colorText.split(',,');//["red,blue", "green,yellow"]
    
colorText.split(/[^\,]+/);//["", ",", ",,", ",", ""] 匹配不是“，”（可有多个）的字符串并用它作为分割

//用任意字符串'a'做分割条件
    
'ababcdab'.split(/a/);// ["", "b", "bcd", "b"]
    
//当正则表达式中含有捕获组时，该捕获组既充当分割条件又它的内容也会在数组中出现。这意味着用"a"分割的同时又用""分割着字符串，是因为捕获组的原因吗？？
    
'ababcdab'.split(/(a)/);// ["", "a", "b", "a", "bcd", "a", "b"]
    
'ssvdfvdavss'.split(/s(s)/);// ["", "s", "vdfvdav", "s", ""]
    
//通过正则返回，用指定的某个项作为分割条件，这里用指定的第一个位置的's'来分割
    
'ss'.split(/s(?=s)/);// ["", "s"]
  • localCompare()方法：比较两个字符串并返回下列值中的一个
  1. 如果字符串在字母表中应该排在字符串参数之前，返回一个负数（大多数为-1，具体值要视实现而定）
  2. 如果字符串等于字符串参数，返回0
  3. 如果字符串在字母表中应该排在字符串参数后，返回一个正数（大多情况为1，具体值视实现而定） 
    var str="sdvdav";
    
var determineOrder=function(value){
    
   var result=str.localeCompare(value);
    
   if(result<0){
    
      console.log('str排在value之前');
    
   }else if(result>0){
    
     console.log('str排在value之后');
    
  }else{
    
     console.log('str和value相同');
    
  }
    
}

  •  fromCharCode()方法：接受一或多个字符编码，将他们转换成一个字符串。该方法和 charCodeAt() 执行的是相反的操作。该方法在 String 构造函数本身上。

    String.fromCharCode(104,101,108,111);//"hello"
  • HTML方法：早期的web浏览器实现的使用javascript动态格式化HTML，在字符串上调用这些方法可以产生字符串形式的HTML标签，但创建的标记通常无法表达语义，不建议使用不详细介绍。

参考：《javascript高级程序设计》