Heim  >  Artikel  >  Web-Frontend  >  Einführung in die grundlegenden Verpackungstypen von Javascript_Javascript-Kenntnissen

Einführung in die grundlegenden Verpackungstypen von Javascript_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 16:04:45990Durchsuche

Um die Manipulation grundlegender Typwerte zu erleichtern, bietet ECMAScript drei spezielle Referenztypen: Boolean, Number und String. Diese Typen ähneln anderen Referenztypen, weisen jedoch auch ein spezielles Verhalten auf, das ihren jeweiligen Basistypen entspricht. Tatsächlich wird jedes Mal, wenn ein Basistypwert gelesen wird, im Hintergrund ein Objekt des entsprechenden Basisverpackungstyps erstellt, sodass einige Methoden aufgerufen werden können, um die Daten zu manipulieren.

1. Übersicht grundlegender Verpackungsarten

var box = 'Mr. Lee';//定义一个字符串
var box2 = box.substring(2);//截掉字符串前两位
alert(box2);//输出新字符串


Die Variable box ist ein Zeichenfolgentyp, und box.substring(2) zeigt an, dass es sich um ein Objekt handelt (PS: Nur Objekte rufen Methoden auf), und schließlich wird das Verarbeitungsergebnis box2 zugewiesen. „Mr. Lee“ ist logischerweise kein Objekt und sollte keine eigenen Methoden haben, wie zum Beispiel:

alert('Mr. Lee'.substring(2));//Rufen Sie die Methode direkt über den Wert auf


1. Wörtliches Schreiben:

var box = 'Mr. Lee';//字面量
box.name = 'Lee';//无效属性
box.age = function () {//无效方法
return 100;
};
alert(box);//Mr. Lee
alert(box.substring(2));//. Lee
alert(typeof box);//string
alert(box.name);//undefined
alert(box.age());//错误


2. neue Operator-Schreibmethode:

var box = new String('Mr. Lee');//new 运算符
box.name = 'Lee';//有效属性
box.age = function () {//有效方法
return 100;
};
alert(box);//Mr. Lee
alert(box.substring(2));//. Lee
alert(typeof box);//object
alert(box.name);//Lee
alert(box.age());//100


Die obige Literaldeklaration und die neue Operatordeklaration veranschaulichen den Unterschied zwischen ihnen gut. Eines ist jedoch sicher: Die integrierten Methoden können unabhängig von der Literalform oder der neuen Operatorform verwendet werden. Die Eigenschaften „Boolean“ und „Number“ sind mit String identisch, und die drei Typen können zu grundlegenden Verpackungstypen werden.

PS: Wenn Sie den neuen Operator zum Erstellen der oben genannten drei Objekttypen verwenden, können Sie sich selbst Eigenschaften und Methoden hinzufügen. Wir empfehlen jedoch, ihn nicht auf diese Weise zu verwenden, da dadurch nicht unterschieden werden kann, ob dies der Fall ist ein Basistypwert oder ein Referenztypwert.

2. Boolescher Typ

Der Typ Boolean hat keine spezifischen Eigenschaften oder Methoden.

3. Nummerntyp

Der Number-Typ verfügt über einige statische Eigenschaften (Eigenschaften, die direkt über Number ohne den neuen Operator aufgerufen werden) und Methoden.

Statische Eigenschaft „Zahl“

Methoden des Zahlenobjekts

var box = 1000.789;
alert(box.toString());//转换为字符串,传参可以转换进制
alert(box.toLocaleString());//本地形式,1,000.789
alert(box.toFixed(2));//小数点保留,1000.78
alert(box.toExponential());//指数形式,传参会保留小数点
alert(box.toPrecision(3));//指数或点形式,传参保留小数点

4. String-Typ

Der String-Typ enthält drei Eigenschaften und eine große Anzahl verfügbarer integrierter Methoden.

String-Objekteigenschaften

String enthält auch gängige Methoden von Objekten, wie z. B. die Methoden valueOf(), toLocaleString() und toString(), aber diese Methoden geben alle den Grundwert der Zeichenfolge zurück.

Zeichenmethoden

var box = 'Mr.Lee';
alert(box.charAt(1));//r
alert(box.charCodeAt(1));//114
alert(box[1]);//r,通过数组方式截取

PS: Box[1] wird im IE-Browser undefiniert angezeigt, also verwenden Sie es mit Vorsicht.

String-Operationsmethoden

var box = 'Mr.Lee';
alert(box.concat(' is ', ' Teacher ', '!'));//Mr.Lee is Teacher !
alert(box.slice(3));//Lee
alert(box.slice(3,5));//Le
alert(box.substring(3));//Lee
alert(box.substring(3,5));//Le
alert(box.substr(3));//Lee
alert(box.substr(3,5));//Lee


var box = 'Mr.Lee';
alert(box.slice(-3));//Lee,6+(-3)=3 位开始
alert(box.substring(-3));//Mr.Lee 负数返回全部
alert(box.substr(-3));//Lee,6+(-3)=3 位开始


var box = 'Mr.Lee';
alert(box.slice(3, -1));//Le 6+(-1)=5, (3,5)
alert(box.substring(3, -1));//Mr. 第二参为负,直接转 0,并且方法会把较小的数字提前,(0,3)
alert(box.substr(3, -1));//'' 第二参数为负,直接转 0 ,(3,0)

PS: Die JavaScript-Implementierung des IE hat ein Problem bei der Verarbeitung negativer Werte, die an die Methode substr() übergeben werden. Sie gibt die ursprüngliche Zeichenfolge zurück. Denken Sie also daran, wenn Sie sie verwenden.

String-Position-Methode

var box = 'Mr.Lee is Lee';
alert(box.indexOf('L'));//3
alert(box.indexOf('L', 5));//10
alert(box.lastIndexOf('L'));//10
alert(box.lastIndexOf('L', 5));//3,从指定的位置向前搜索

PS: Wenn die gewünschte Zeichenfolge nicht gefunden wird, wird -1 zurückgegeben.

Beispiel: Finden Sie alle Ls.

var box = 'Mr.Lee is Lee';//包含两个 L 的字符串
var boxarr = [];//存放 L 位置的数组
var pos = box.indexOf('L');//先获取第一个 L 的位置
while (pos > -1) {//如果位置大于-1,说明还存在 L
boxarr.push(pos);//添加到数组
pos = box.indexOf('L', pos + 1);//从新赋值 pos 目前的位置
}
alert(boxarr);//输出

Fallkonvertierungsmethode

var box = 'Mr.Lee is Lee';
alert(box.toLowerCase());//全部小写
alert(box.toUpperCase());//全部大写
alert(box.toLocaleLowerCase());
alert(box.toLocaleUpperCase());

PS: Nur wenige Sprachen (z. B. Türkisch) verfügen über eine lokalspezifische Groß- und Kleinschreibung. Im Allgemeinen ist der Lokalisierungseffekt konsistent, unabhängig davon, ob er lokalisiert ist oder nicht.

String-Pattern-Matching-Methode

Die Anwendung regulärer Ausdrücke in Strings wurde in den vorherigen Kapiteln ausführlich besprochen und wird hier nicht wiederholt. Die oben genannten Funktionen match(), replace(), serach() und split() können auch in gewöhnlichen Zeichenfolgen verwendet werden.

var box = 'Mr.Lee is Lee';
alert(box.match('L'));//找到 L,返回 L 否则返回 null
alert(box.search('L'));//找到 L 的位置,和 indexOf 类型
alert(box.replace('L', 'Q'));//把 L 替换成 Q
alert(box.split(' '));//以空格分割成字符串

其他方法

alert(String.fromCharCode(76));//L,输出 Ascii 码对应值

localeCompare(str1,str2)方法详解:比较两个字符串并返回以下值中的一个;

1.如果字符串在字母表中应该排在字符串参数之前,则返回一个负数。(多数-1)
2.如果字符串等于字符串参数,则返回 0。
3.如果字符串在自附表中应该排在字符串参数之后,则返回一个正数。(多数 1)

[task]var box = 'Lee';
alert(box.localeCompare('apple'));//1
alert(box.localeCompare('Lee'));//0
alert(box.localeCompare('zoo'));//-1

HTML 方法

以上是通过 JS 生成一个 html 标签,根据经验,没什么太大用处,做个了解。

var box = 'Lee';
alert(box.link('http://www.jb51.net'));//超链接

教程内容来自 李炎恢老师JavaScript教程

下面是其它网友整理的文章:

一 基本包装类型概述

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

  var box = 'Mr.Lee';          // 定义一个String字符串;  
  var box2 = box.substring(2);     // 截掉字符串前两位;
  console.log(box2);          // 输出新字符串;=>.Lee;
  // 变量box是一个字符串String类型,而box.substring(2)又说明它是一个对象(只有对象才会调用方法);
  console.log('Mr.Lee'.substring(3));  // 直接通过字符串值来调用方法=>Lee;

 引用类型和基本包装类型的主要区别就是对象的生存期;
 自动创建的基本包装类型的对象,则只存在于一行代码的执行瞬间,然后立即被销毁;
 这意味着我们不能在运行时为基本类型值添加属性和方法;

    var s1 = 'some text';                // => var s1 = new String('some text');
    var s2 = s1.substring(5);            // => var s2 = s1.substring(5);
                                         // s1 = null; 销毁这个实例;后台自动执行;
1.字面量写法

  var box = 'Mr.Lee';         // 字面量;
  box.name = 'Lee';          // 无效属性;
  box.age = function(){        // 无效方法;
    return 100;
  };
  console.log(box.substring(3));    // =>Lee;
  console.log(typeof box);       // =>string;
  console.log(box.name);        // =>undefined;
  console.lgo(box.age());       // =>错误;

2.new运算符写法

  var box = new String('Mr.Lee');
  box.name = 'Lee';
  box.age = function(){
    return 100;
  };
  console.log(box.substring(3));    // =>Lee;
  console.log(typeof box);       // =>object;
  console.log(box.name);        // =>Lee;
  console.lgo(box.age());        // =>100;

// Die obige Literaldeklaration und die neue Operatordeklaration verdeutlichen den Unterschied zwischen ihnen; // Unabhängig davon, ob es sich um ein Literal oder den neuen Operator handelt, können Sie dessen integrierte Methode (
) verwenden

Zwei boolesche Typen

//Der boolesche Typ hat keine spezifischen Eigenschaften oder Methoden;

Drei Zahlentypen

//Der Number-Typ verfügt über einige statische Eigenschaften (direkt über Number ohne den neuen Operator aufgerufen) und Methoden

1. Statische Eigenschaften des Number-Objekts

MAX_VALUE stellt die maximale Anzahl dar;

MIN_VALUE stellt den Mindestwert dar;

NaN Kein numerischer Wert;
NEGATIVE-INFINITY Negativ unendlich, Überlauf gibt diesen Wert zurück;
POSITIVE_INFINITY Unendlich, Überlauf gibt diesen Wert zurück;
Prototyp Prototyp, der zum Hinzufügen neuer Eigenschaften und Methoden verwendet wird;

2. Methoden des Zahlenobjekts

toString() Konvertiert den Wert in eine Zeichenfolge und kann die Basis konvertieren; toLocaleString() String gemäß lokalem Zahlenformat konvertieren;

toFixed() Wandelt die Zahl in eine Zeichenfolge um, indem die angegebene Anzahl von Nachkommastellen beibehalten wird;

toExponential() stellt die Zahl in Exponentialform dar;
toPrecision() stellt Zahlen in Exponentialform oder Punktform dar;


Vier String-Typen

Der String-Typ enthält drei Attribute und eine große Anzahl verfügbarer integrierter Methoden

1.String-Objekteigenschaften

Länge Gibt die Zeichenlänge der Zeichenfolge zurück; Konstruktor Gibt die Funktion zurück, die ein String-Objekt erstellt;

Prototyp Erweitern Sie die String-Definition durch Hinzufügen von Attributen und Methoden. 2. String-Objekt-Zeichenmethode

charAt(n) Gibt das Zeichen an der angegebenen Indexposition zurück;
charCodeAt(n) Gibt die Kodierung des Zeichens an der angegebenen Indexposition in Unicode-Kodierung zurück;
var box = 'Mr.Lee';
console.log(box.charAt(1)); // =>r;
console.log(box.charCodeAt(1)); // =>114;
console.log(box[1]) // =>r;Interception through array; 3.String-Objekt-String-Operationsmethode

concat(str1...str2) Verkettet die String-Parameter mit dem String, der die Methode aufruft;
Slice(n,m) Gibt die Zeichenfolge zwischen Zeichenfolgenposition n und m;

zurück substring(n,m) Wie oben;

substr(n,m) Gibt m Strings zurück, beginnend an der String-Position n;
var box = 'Mr.Lee';
console.log(box.concat('Ok!')); // =>Mr.Lee OK!;
console.log(box.slice(3)); // =>Lee;(Alle nachfolgenden Zeichen ab Index 3 abfangen);
console.log(box.substring(3,5)); // =>Le;(Intercept-Zeichen von Index 3 bis Index 5); 4.String-Objekt-String-Positionsmethode

indexOf(str,n) Durchsucht den ersten str rückwärts, beginnend mit Index n, und gibt den gesuchten Indexwert zurück; lastIndexOf(str,n) Sucht vorwärts nach dem ersten str, beginnend mit Index n, und gibt den gesuchten Indexwert
zurück var box = 'Mr.Lee ist Lee';
console.log(box.indexOf('L')); // =>3;(Der Indexwert des ersten gesuchten L von vorne nach hinten ist 3);
console.log(box.lastIndexOf('L')); // =>10;(Der Indexwert des ersten von hinten nach vorne gesuchten L ist 10);
console.log(box.indexOf('L',5)); // =>10;(Der Indexwert des ersten L, das vom 5. an rückwärts gesucht wird, ist 10); //Wenn die zu durchsuchende Zeichenfolge nicht gefunden wird, geben Sie -1;
zurück
// Finde alle L;
var box = 'Mr.Lee ist Lee';
var boxarr = []; var boxarr var pos = box.indexOf('L'); var pos = box.indexOf('L'); // Ermittelt die Position des ersten L;
                                                                                                                                                                                                                                                           boxarr.push(pos);                                                                                                                                                                                                                                                               }
console.log(boxarr); // [3,10]

// trim()-Methode
// ECMAScript5 definiert die trim()-Methode für alle Zeichenfolgen. Diese Methode erstellt eine Kopie der Zeichenfolge, entfernt alle führenden Leerzeichen und Suffixe und gibt dann das Ergebnis zurück var str = 'Hallo Welt';
var trimstr = str.trim();
console.log(trimstr); // =>hello world; console.log(str); // => Leerzeichen bleiben unverändert. 5. String-Objekt-String-Konvertierungsmethode
toLowerCase(str) Konvertiert alle Zeichenfolgen in Kleinbuchstaben;
toUpperCase(str) Konvertiert alle Zeichenfolgen in Großbuchstaben;
toLocaleLowerCase(str) Konvertiert alle Zeichenfolgen in Kleinbuchstaben und lokalisiert sie;
toLocaleLowerCase(str) Konvertiert alle Zeichenfolgen in Großbuchstaben und lokalisiert sie. 6. Mustervergleichsmethode des String-Objekts string

// Die spezifische Verwendungsmethode wird in den regulären Regeln eingeführt; match(pattern) Gibt die Teilzeichenfolge in „pattern“ oder „null“ zurück. // Identisch mit „pattern.exec(str);“ ersetzen(Muster,Ersatz)Muster durch Ersatz ersetzen;
search(pattern) Gibt die Startposition des Musters in der Zeichenfolge zurück;
split(pattern) Gibt ein Array zurück, in dem die Zeichenfolge gemäß dem angegebenen Muster aufgeteilt wird;
      var box = 'Mr.Lee ist Lee';                                             var p = /L/g;                                                                                                                                                          console.log(box.match(p)); // =>[L,L];
console.log(box.search(p)); // =>3;
console.log(box.replace(p,'Q')); // =>Mr.Qee ist Qee;
console.log(box.split(' ')); // =>['Mr.Lee','is','Lee'];7 fromCharCode(ascii) Statische Methode, gibt den entsprechenden Wert des ASCII-Codes aus;
localeCompare(str1,str2) Vergleicht zwei Strings und gibt den entsprechenden Wert zurück; 8. String-Objekt-HTML-Methode
// Generiere ein HTML-Tag über JS, was wenig nützt; var box = "Lee";
console.log(box.link('www.baidu.com')); //21cad4916aabd140f7c21f6d80e9a6bbLee5db79b134e9f6b82c0b36e0489ee08ed;


5 Zusammenfassung

// Aufgrund des grundlegenden Verpackungstyps kann auf grundlegende Typwerte in JS als Objekte zugegriffen werden //Grundlegende Typmerkmale:
// 1. Jeder Verpackungstyp wird einem Basistyp mit demselben Namen zugeordnet; // 2. Beim Zugriff auf einen Basistypwert im Lesemodus wird ein Objekt des entsprechenden Basisverpackungstyps erstellt, wodurch Datenoperationen erleichtert werden // 3. Sobald die Anweisung ausgeführt wird, die den Basistypwert bedient, wird das neu erstellte Verpackungsobjekt sofort zerstört

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn