JavaScript-Tutorial für Fortgeschrittene 5.6 Grundlegende Verpackungstypen (Details)_Javascript-Kenntnisse

Um die Bedienung grundlegender Typwerte zu erleichtern, bietet ECMAScript außerdem drei spezielle Referenztypen: Boolean, Number, String.

Tatsächlich sollte der Hintergrund jedes Mal, wenn ein Basistypwert gelesen wird, ein Objekt des entsprechenden Basis-Wrappertyps erstellen, damit wir einige Methoden aufrufen können, um diese Daten zu verarbeiten.

var s1="some text";
  var s2=s1.substring(2);
  console.log(s2);//me text

In diesem Beispiel enthält s1 einen String, der ein Basistypwert ist. Die zweite Zeile ruft die subsstring()-Methode von s1 auf und speichert das zurückgegebene Ergebnis in s2

var s1=new String("some text");
  var s2=s1.substring(2);
  s1=null;
  console.log(s2);//me text

Instanzen von Referenztypen, die mit dem neuen Operator erstellt wurden, werden zusammen im Speicher gespeichert, bevor der Ausführungsfluss den aktuellen Bereich verlässt. Objekte von automatisch erstellten Basis-Wrapper-Typen sind jedoch nur in dem Moment vorhanden, in dem eine Codezeile ausgeführt wird, und werden dann zerstört Dies bedeutet, dass wir zur Laufzeit keine Eigenschaften und Methoden zu Basistypen hinzufügen können.

var s1="some text";
  s1.color="red";
  console.log(s1.color);//undefined

Der Aufruf von typeof für eine Instanz eines Basis-Wrapper-Typs gibt „object“ zurück und alle Objekte des Basis-Wrapper-Typs werden in den booleschen Wert „true“ konvertiert.

Der Objektkonstruktor gibt wie eine Factory-Methode auch eine Instanz des entsprechenden Basisverpackungstyps entsprechend dem Typ des übergebenen Werts zurück.

var obj=new Object("some text");
  console.log(obj instanceof String);//true

Es ist zu beachten, dass sich die Verwendung von new zum Aufrufen des Konstruktors des Basisverpackungstyps vom direkten Aufruf der Transformationsfunktion mit demselben Namen unterscheidet.

var value="25";
  var number=Number(value);//转型函数
  console.log(typeof number);//number
  var obj=new Number(value);//构造函数
  console.log(typeof obj);//object

In diesem Beispiel speichert die Variable number den Basistypwert 25 und die Variable obj speichert eine Instanz von Number.

5.6.1 Boolescher Typ Der boolesche Typ ist ein Referenztyp, der einem booleschen Wert entspricht. Um ein boolesches Objekt zu erstellen, können Sie den booleschen Konstruktor wie folgt aufrufen und den wahren oder falschen Wert übergeben.

var booleanObject=new Boolean(true);

Eines der häufigsten Probleme ist die Verwendung boolescher Objekte in booleschen Ausdrücken.

var falseObject=new Boolean(false);
  var result=falseObject&&true;
  console.log(result);//true
  var falseValue=false;
  result=falseValue&&true;
  console.log(result);//false

Es gibt zwei Unterschiede zwischen booleschen Werten von Basistypen und Referenztypen: Erstens gibt die Operation „typeof“ für Basistypen „boolean“ zurück, während „object“ für Referenztypen zurückgegeben wird. Zweitens, da boolesche Objekte Instanzen von sind der boolesche Typ, daher gibt die Verwendung des Operators „instanceof“ zum Testen eines booleschen Objekts „true“ zurück, während das Testen eines booleschen Werts eines Basistyps „false“ zurückgibt.

console.log(typeof falseObject);//object
  console.log(typeof falseValue);//boolean
  console.log(falseObject instanceof Boolean);//true
  console.log(falseValue instanceof Boolean);//false

5.6.2 Nummerntyp Number ist ein Referenztyp, der einem numerischen Wert entspricht. Um ein Number-Objekt zu erstellen, können Sie beim Aufruf den entsprechenden Wert an den Number-Konstruktor übergeben

var numberObject=new Number(10);
  console.log(typeof numberObject);//object

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

console.log(num.toFixed(2));//10.00

Hier wird der Wert 2 an die toFixed()-Methode übergeben, was bedeutet, wie viele Dezimalstellen angezeigt werden. Die notwendigen Dezimalstellen werden mit 0 aufgefüllt.

能够自动舍入的特性,使得toFixed()方法很适合处理货币值.但需要注意的是,不同浏览器给这个方法设定的舍入规则可能会有所不同.在给toFixed()传入0的情况下,IE8及之前的版本不能正确舍入范围在{(-0.94,-0.5],[0.5,0.94)}之间的值.对于这个范围内的值,IE会返回0,而不是-1或1;其他浏览器都能返回正确的值.IE9修复了这个问题.

另外可用于格式 化数值的方法是toExponential(),该方法返回以指数表示法(也称e表示法)表示数值的字符串形式.与toFixed()方法一样,toExponential()也接收一个参数,而且该参数同样也是指定输出结果中的小数位数.

var num=10;
  console.log(num.toExponential(1));//1.0e+1

对于一个数值来说,toPrecision()方法可能会返回固定大小(fixed)格式,也可能返回指定(exponential)格式;具体规则是看哪种格式最合适.这个方法接收一个参数,即表示数值的所有数字的位数(不包括指数部分).

var num=99;
  console.log(num.toPrecision(1));//1e+2
  console.log(num.toPrecision(2));//99
  console.log(num.toPrecision(3));//99.0

第二行是用一位数来表示99,第三行是用两位数来表示,第四行是用三位数来表示.

实际上,toPrecision()会根据要处理的数值决定到底是调用toFixed()还是调用toExponential(),而这三个方法都可以通过向上或向下舍入,做到以最准确的形式来表示带有正确小数位的值.

toPrecision()方法可以表现1到21位小数.

仍然不建议直接实例化Number类型.具体来讲,就是在使用typeof和instanceof操作符测试基本类型数值与引用类型数值时,得到的结果完全不同.

var numberObject=new Number(10);
  var numberValue=10;
  console.log(typeof numberObject);//object
  console.log(typeof numberValue);//number
  console.log(numberObject instanceof Number);//true
  console.log(numberValue instanceof Number);//false

在使用typeof操作符测试基本类型数值时,始终会返回"number",而在测试Number对象时,则会返回"object”.类似地,Number对象是Number类型的实例,而基本类型的数值则不是.

5.6.3 String类型

String类型是字符串的对象包装类型,可以像下面这样使用String构造函数来创建.

var stringObject=new String("hello world");

String对象的方法也可以在所有基本的字符串值中访问到.其中,继承的valueOf(),toLoaleString()和toString()方法,都返回对象所表示的基本字符串值.

String类型的每个实例都有一个length属性,表示字符串包含多个字符.

var stringValue="hello world";
  console.log(stringValue.length);

应该注意的是,即使字符串中包含双字节字符(不是占一个字节的ASCII字符),每个字符也仍然算一个字符.

1.字符方法

两个用于访问字符串中特定字符的方法是:charAt()和charCodeAt().这两个方法都接收一个参数,即基于0的字符位置.

charAt()方法以单字符字符串的形式返回给定位置的那个字符.

如果想得到的不是字符而是字符编码,就需要使用charCodeAt()了.

ECMAScript还定义了另一个访问个别字符的方法.在支持此方法的浏览器中,可以使用方括号加数字索引来访问字符串中的特定字符.

var stringValue="hello world";
  console.log(stringValue[1]);//e

使用方括号表示法访问个别字符的语法得到了IE8及FF,Safari,Chrome和Opera所有版本的支持.如果在IE7及更早版本中使用这种语法,会返回undefined值.

2.字符串操作方法

concat(),用于将一或多个字符串拼接起来,返回拼接得到的新字符串.

var stringValue="hello";
  var result=stringValue.concat("world");
  console.log(result);//helloworld
  console.log(stringValue);//hello

concat()返回一个拼接的字符串,不改变原数组的值.它可以接受任意多个参数,也就是说可以通过它拼接任意多个字符串.

var stringValue="hello";
  var result=stringValue.concat("world","!")
  console.log(result);//hellowworld!
  console.log(stringValue);//hello

虽然concat()是专门用来拼接字符串的方法,但实践中使用更多的还是加号操作符(+).而且,使用加号操作符在大多数情况下都比使用concat()方法要简便易行(特别是在拼接多个字符串的情况下).

ECMAScript还提供了三个基于子字符串创建新字符串的方法:slice(),substr()和substring().

这三个方法都会返回被操作字符串的一个子字符串,而且也都接受一或两个参数.第一个参数指定子字符串的开始位置,第二个参数(在指定的情况下)表示子字符串到哪里结束.slice()和substring()的第二个参数指定的是子字符串最后一个字符后面的位置.而substr()的第二个参数指定的则是返回的字符个数.如果没有给这些方法传递第二个参数,则将字符串的长度作为结束位置.与concat()方法一样,slice(),substr()和substring()也不会修改字符串本身的值--它们只是返回一个基本类型的字符串值,对原始字符串没有任何影响.

var stringValue="hello world";
  console.log(stringValue.slice(3));//lo world
  console.log(stringValue.substring(3));//lo world
  console.log(stringValue.substr(3));//lo world
  console.log(stringValue.slice(3,7));//lo w
  console.log(stringValue.substring(3,7));//lo w
  console.log(stringValue.substr(3,7));//lo worl

substr()返回"lo worl”,因为它的第二个参数指定的是要返回的字符个数.

在传递给这些方法的参数是负值的情况下,slice()方法会将传入的负值与字符串的长度相加,substr()方法将负的第一个参数加上字符串的长度,而将负的第二个参数转换为0.最后,substring()方法会把所有负值参数都转换为0.

var stringValue="hello world";
  console.log(stringValue.slice(-3));//rld
  console.log(stringValue.substring(-3));//hello world
  console.log(stringValue.substr(-3));//rld
  console.log(stringValue.slice(3,-4));//lo w
  console.log(stringValue.substring(3,-4));//hel
  console.log(stringValue.substr(3,-4));//(空字符串)

注意:IE的JavaScript实现在处理向substr()方法传递负值的情况时存在问题,它会返回原始的字符串.IE9修复了这个问题.

当第二个参数是负值时,三个方法的行为各不相同.slice()方法会把第二个参数转换成7,substring()方法会把第二个参数转换为0,而由于这个方法会将小的数作为开始位置,将较大的数作为结束位置.substr()也会将第二个参数转换成0,也就意味着返回包含零个字符的字符串,也就是一个空字符串.

3.字符串位置方法

有两个可以从字符串中查找子字符串的方法:indexOf()和lastIndexOf().这两个方法都是从一个字符串中搜索给定的子字符串,然后返子字符串的位置(如果没有找到该字符串,则返回-1).

indexOf()方法从字符串的开头向后搜索子字符串,而lastIndexOf()方法是从字符串的末尾向前搜索子字符串.

var stringValue="hello world";
  console.log(stringValue.indexOf("o"));//4
  console.log(stringValue.lastIndexOf("o"));//7

如果"o”在这个字符串中仅出现一次,那么indexOf()和lastIndexOf()会返回相同的位置值.

这两个方法都可以接收可选的第二个参数,表示从字符串中的哪个位置开始搜索.换句话说,indexOf()会从该参数指定的位置向后搜索,忽略该位置之前的所有字符;而lastIndexOf()则会从指定的的位置向前搜索,忽略该位置之后的所有字符.

var stringValue="hello world";
  console.log(stringValue.indexOf("o"),6);//4 6
  console.log(stringValue.indexOf("o",6));//7
  console.log(stringValue.lastIndexOf("o",6));//4
var stringValue="Lorem ipsum dolor sit amet, consectetur adipisicing elit";
  var positions=new Array();
  var pos=stringValue.indexOf("e");
  while(pos>-1){
    positions.push(pos);
    pos=stringValue.indexOf("e",pos+1);
  }
  console.log(positions);//[3,24,32,35,52]

这个例子通过不断增加indexOf()方法开始查找的位置,遍历了一个长字符串.在循环之外,首先找到了"e"在字符串中的初始位置,而进入循环后,则每次都给indexOf()传递上一次的位置加1.这样,就确保了每次搜索都从上一次找到的子字符串的后面开始.每次搜索返回的位置依次被保存在数组positions中,以便将来使用.

4.trim()方法

ECMAScript 5为所有字符串定义了trim()方法.这个方法会创建一个字符串的副本,删除前置及后缀的所有空格,然后返回结果.

var stringValue="  hello world  ";
  var trimmedStringValue=stringValue.trim();
  console.log(stringValue);//  hello world  
  console.log(trimmedStringValue);//hello world

由于trim()返回的是字符串的副本,所以原始字符串中的前置及后缀空格会保持不变.支持这个方法的浏览器有IE9+,FF3.5+,Safari5+,Opera 10.5+和Chrome.此外,FF3.5+,Safari 5+和Chrome 8+还支持非标准的trimLeft()和trimRight()方法,分别用于删除字符串开头和末尾的空格.

5.字符串大小写转换方法

ECMAScript中涉及字符串大小写转换的方法有4个:toLowerCase(),toLocaleLowerCase(),toUpperCase()和toLocaleUpperCase().

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

一般来说,在不知道自己的代码将在哪种语言环境中运行的情况下,还是使用针对地区的方法更稳妥一些.

6.字符串的模式匹配方法

String类型定义了几个用于在字符串中匹配模式的方法.第一个方法就是match(),在字符串上调用这个方法,本质上与调用RegExp的exec()方法相同.match()方法只接受一个参数,要么是一个正则表达式,要么是一个RegExp对象.

var text="cat,bat,sat,fat";
  var pattern=/.at/;
  //与pattern.exec(text)相同
  var matches=text.match(pattern);
  console.log(matches.index);//0
  console.log(matches[0]);//cat
  console.log(pattern.lastIndex);//0

本例中的match()方法返回了一个数组;如果是调用RegExp对象的exec()方法并传递本例中的字符串作为参数,那么也会得到与此相同的数组:数组的第一项是与整个模式匹配的字符串,之后的每一项(如果有)保存着与正则表达式中的捕获组匹配的字符串.

另一个用于查找模式的方法是search().这个方法的唯一参数与match()方法的参数相同:由字符串或RegExp对象指定的一个正则表达式.search()方法返回字符串中第一个匹配项的索引;如果没有找到匹配项,则返回-1.而且,search()方法始终是从字符串开头向后查找模式.

var text="cat,bat,sat,fat";
  var pos=text.search(/at/);
  console.log(pos);//1

为了简化替换子字符串的操作,ECMAScript提供了replace()方法.这个方法接受两个参数:第一个参数可以是一个RegExp对象或者一个字符串(这个字符串不会被转换成正则表达式),第二个参数可以是一个字符串或者一个函数.如果第一个参数是字符串,那么只会替换第一个子字符串.要想替换所有子字符串,唯一的办法就是提供一个正则表达式,而且要指定全局(g)标志.

var text="cat,bat,sat,fat";
  var result=text.replace("at","ond");
  console.log(result);//cond,bat,sat,fat
  result=text.replace(/at/g,"ond");//cond,bond,sond,fond

Der nächste Schritt besteht darin, alle „at“ durch „ond“ zu ersetzen, indem der erste Parameter in einen regulären Ausdruck mit einem globalen Flag geändert wird.

Wenn der zweite Parameter eine Zeichenfolge ist, können Sie auch einige spezielle Zeichenfolgen verwenden, um den durch die reguläre Ausdrucksoperation erhaltenen Wert in die Ergebniszeichenfolge einzufügen.

Diese von ECMAScript bereitgestellten Sonderzeichenfolgen sind unten aufgeführt.

通过这些特殊的字符序列,可以使用最近一次匹配结果中的内容.

var text="cat,bat,sat,fat";
  result=text.replace(/(.at)/g,"word ($1)");
  console.log(result);//word(cat),word(bat),word(sat),word(fat)

在此,每个以".at”结尾的单词都被替换了,替换结果是"word"后跟一对圆括号,而圆括号中是被字符序列$1所替换的单词.

replace()方法的第二个参数也可以是一个函数.在只有一个匹配项(即与模式匹配的字符串)的情况下,会向这个函数传递3个函数:模式的匹配项,模式匹配项在字符串的位置和原始字符串.在正则表达式中定义了多个捕获组的情况下,传递给函数的参数 依次是模式的匹配项,第一个捕获组的匹配项,第二个捕获组的匹配项....,但最后两个参数仍然分别是模式的匹配项在字符串中的位置和原始字符串.这个函数应该返回一个字符串,表示应该被替换的匹配项使用函数作为replace()方法的第二个参数可以实现更加精细的替换操作.

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>*

这里,我们为插入HTML代码定义了函数htmlEscape(),这个函数能够转义4个字符:小于号,大于号,和号以及双引号.实现这种转义的最简单方式,就是使用正则表达式查找这几个字符,然后定义一个能够针对每个匹配的字符返回特定HTML实例的函数.

最后一个与模式匹配有关的方法是split(),这个方法可以基于指定的分隔符将一个字符串分割成多个子字符串,并将结果放在一个数组中.分隔符可以是字符串,也可以是一个RegExp对象(这个方法不会将字符串看成正则表达式).split()方法可以接受可选的第二个参数,用于指定数组的大小,以便确保返回的数组不会超过既定大小.

var colorText="red,blue,green,yellow";
  var color1=colorText.split(",");
  console.log(color1);//["red", "blue", "green", "yellow"]
  var color2=colorText.split(",",2);
  console.log(color2);//["red", "blue"]
  var color3=colorText.split(/[^\,]+/);
  console.log(color3);//["", ",", ",", ",", ""]

在最后一次调用split()返回的数组中,第一项和最后一项是两个空字符串.之所以会这样,是因为通过正则表达式指定的分隔符出现在了字符串的开头(即子字符串"red")和末尾(即子字符串"yellow").

对split()中正则表达式的支持因浏览器而异.尽管对于简单的模式没有什么差别,但对于未发现匹配项以及带有捕获组的模式,匹配的行为就不大相同了.以下是几种觉的差别.

IE8及之前的版本会忽略捕获组.IE9能正确地在结果中包含捕获组.

FF3.6及之前版本在捕获组未找到匹配项时,会在结果数组中包含空字符串;ECMA-262规定没有匹配项的捕获组在结果数组中应该用undefined表示.

在正则表达式中使用捕获组时还有其他微妙的差别.

7.localeCompare()方法

这个方法比较两个字符串,并返回下列值中的一个:

如果字符串在字母表中应该排在字符串参数之前,则返回一个负数(大多数情况下是-1,具体的值要视实现而定)

如果字符串等于字符串参数,则返回0.

如果字符串在字母表中应该排在字符串参数之后,则返回一个正数(大多数情况下是1,具体的值同样要视实现而定)

var stringValue="yellow";
  console.log(stringValue.localeCompare("brick"));//1
  console.log(stringValue.localeCompare("yellow"));//0
  console.log(stringValue.localeCompare("zoo"));//-1

因为localeCompare()返回的数值取决于实现,所以最好是像下面例子所示的这样使用这个方法.

function determineOrder(value){
    var result=stringValue.localeCompare(value);
    if(result<0){
      console.log("The string 'yellow' comes before the string '"+value+"'.");
    }else if(result>0){
      console.log("The string 'yellow' comes after the string '"+value+ "'.");
    }else{
      console.log("The string 'yellow' is equal to the string '"+value+"'.");
    }
  }
  determineOrder("brick");
  determineOrder("yellow");
  determineOrder("zoo");

8.fromCharCode()方法

另外,String构造函数还有一个静态方法:fromCharCode().这个方法的任务是接收一或多个字符编码,然后将它们转换成一个字符串.从本质上来看,这个方法与实例方法charCodeAt()执行的是相反的操作.

以上内容是小编给大家介绍的关于JavaScript高级教程5.6之基本包装类型(详细)，希望大家喜欢。