Heim > Web-Frontend > js-Tutorial > Hauptteil

Einführung in die erzwungene Typkonvertierung in JavaScript

不言
Freigeben: 2019-04-12 10:55:22
nach vorne
2320 Leute haben es durchsucht

Dieser Artikel bietet Ihnen eine Einführung in die Methode der erzwungenen Typkonvertierung in JavaScript. Ich hoffe, dass er für Freunde hilfreich ist.

JavaScript-Grundelemente

JavaScript basiert auf einer Reihe von Grundeinheiten. Einige davon sollten Ihnen bereits bekannt sein, wie zum Beispiel Zeichenfolgen und Zahlen:

var greet = "Hello";
var year = 89;
Nach dem Login kopieren
Nach dem Login kopieren

Zeichenfolgen und Zahlen gehören zu den sogenannten „Primitiven“ der Sprache. Die vollständige Liste lautet:

  • String
  • Zahl
  • Boolescher Wert
  • Null
  • Undefiniertes
  • Objekt
  • Symbol (in ES6 hinzugefügt, hier nicht eingeführt)

Boolesche Werte werden verwendet, um Werte darzustellen, die wahr oder falsch sein können. null wird absichtlich nicht einer Variablen zugewiesen, um anzuzeigen, dass die Bindung abgeschlossen ist und später mit aussagekräftigem Inhalt gefüllt wird.

var maybe = null;
Nach dem Login kopieren

und dann undefiniert, was bedeutet, dass die Variable immer noch nicht angehängt ist:

var name;
console.log(name)
undefined
Nach dem Login kopieren

null und undefiniert sehen sehr ähnlich aus, aber es handelt sich um zwei völlig unterschiedliche Dinge, viele Entitäten Entwickler sind sich immer noch nicht sicher, welches sie verwenden sollen.

Wenn Sie den Typ einer JavaScript-Instanz bestimmen möchten, können Sie den Operator typeof verwenden. Versuchen wir es mit Zeichenfolgen:

typeof "alex"
> "string"
Nach dem Login kopieren

und Zahlen:

typeof 9
> "number"
Nach dem Login kopieren

Für Boolesche Werte:

typeof false
> "boolean"
Nach dem Login kopieren

undefiniert:

typeof undefined
> "undefined"
Nach dem Login kopieren

und null:

typeof null
> "object"
Nach dem Login kopieren

Die Ergebnisse sind überraschend! null sieht aus wie ein Objekt, ist aber tatsächlich ein historischer Fehler in JavaScript, der seit der Geburt der Sprache vorhanden ist. JavaScript hat aufgrund dieser Probleme einen schlechten Ruf bekommen. Aber das ist erst der Anfang.

Fremde Dinge

In JavaScript gibt es einige seltsame Regeln beim Konvertieren zwischen zwei Typen. Lassen Sie mich Ihnen einige Hintergrundinformationen geben. Lassen Sie uns zunächst ein Beispiel mit Python geben. Wenn Sie den folgenden Befehl in Python ausführen:

'hello' + 89
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

, erhalten Sie einen eindeutigen Fehler:

TypeError: can only concatenate str (**not** "int") to str
Nach dem Login kopieren

In JavaScript sind keine Grenzen gesetzt:

'hello' + 89
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Oben angegebene Fakten:

"hello89"
Nach dem Login kopieren
Nach dem Login kopieren

Wenn wir versuchen, dem String ein Array hinzuzufügen, sieht es noch seltsamer aus:

'hello' + []
Nach dem Login kopieren

erhält

1. 'hello'
Nach dem Login kopieren

und

1. 'hello' + [89]
Nach dem Login kopieren

Hier ist eine Überraschung für Sie:

1. "hello89"
Nach dem Login kopieren

Sieht so aus, als ob hinter diesem Wechsel eine gewisse Logik steckt. Es funktioniert sogar für Arrays, in denen es mehr Elemente gibt:

1. 'hello' + [89, 150.156, 'mike']
Nach dem Login kopieren

Get:

1. "hello89,150.156,mike"
Nach dem Login kopieren

Diese beiden Zeilen JavaScript reichen aus, um Java-Programmierer in die Flucht zu schlagen. Aber dieses Verhalten macht in JavaScript zu 100 % Sinn . Daher ist diese implizite Konvertierung, auch bekannt als Cast , eine Erkundung wert.

Wenn eine Zahl zu einer Zeichenfolge wird

Einige Programmiersprachen haben ein Konzept namens Typkonvertierung, was bedeutet: Wenn ich eine Zahl oder Instanz in eine andere konvertieren möchte Typ, dann muss ich explizit in konvertieren. Es funktioniert auch mit JavaScript. Siehe das folgende Beispiel:

var greet = "Hello";
var year = 89;
Nach dem Login kopieren
Nach dem Login kopieren

Wenn ich explizit konvertieren möchte, kann ich die Absicht im Code angeben:

var greet = "Hello";
var year = 89;

var yearString = year.toString()
Nach dem Login kopieren

Oder tun Sie dies:

var greet = "Hello";
var year = 89;

var yearString = String(year)
Nach dem Login kopieren

Dann kann ich verketten die beiden Variablen:

greet + yearString;
Nach dem Login kopieren

Aber in JavaScript gibt es einen subtilen Mechanismus namens implizite Konvertierung, der von der JavaScript-Engine bereitgestellt wird. Die Sprache hindert uns nicht daran, Zahlen und Zeichenfolgen hinzuzufügen:

'hello' + 89
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

würde erhalten:

"hello89"
Nach dem Login kopieren
Nach dem Login kopieren

Aber was ist die Logik hinter dieser Konvertierung? Sie werden vielleicht überrascht sein zu erfahren, dass der Additionsoperator in JavaScript + automatisch einen seiner beiden Operanden in eine Zeichenfolge konvertiert, wenn mindestens einer von ihnen eine Zeichenfolge ist!

Was Sie noch überraschender finden werden, ist, dass diese Regel in der ECMAScript-Spezifikation konsistent ist. Abschnitt 11.6.1 definiert das Verhalten des Additionsoperators. Ich habe es hier für Sie zusammengefasst:

Wenn x ein String oder y ein String ist, geben Sie ToString(x) und dann ToString(y) zurück.

Funktioniert dieser Trick nur mit Zahlen? Nicht wirklich. Arrays und Objekte durchlaufen ebenfalls die gleiche Konvertierung :

'hello' + [89, 150.156, 'mike']
Nach dem Login kopieren

erhalten:

"hello89,150.156,mike"
Nach dem Login kopieren

Was erhält also der folgende Code:

'hello' + { name: "Jacopo" }
Nach dem Login kopieren

Zu finden Wenn Sie dies herausfinden, können Sie einen schnellen Test durchführen, indem Sie das Objekt in einen String konvertieren:

String({ name: "Jacopo" })
Nach dem Login kopieren

wird Folgendes erhalten:

"[object Object]"
Nach dem Login kopieren

Ich habe also das Gefühl:

1. 'hello' + { name: "Jacopo" }
Nach dem Login kopieren

wird Folgendes erhalten:

1. "hello[object Object]"
Nach dem Login kopieren

Hör auf damit! Was ist das?

Was bedeutet [Objekt Objekt] in JavaScript?

„[object Object]“ ist eine der häufigsten JavaScript-„Macken“.

Fast jede JavaScript-Instanz hat eine Methode namens toString(), und einige Methoden werden von Object.prototype.toString bereitgestellt.
Einige Typen, wie z. B. Arrays, implementieren eine benutzerdefinierte Version von toString(), um den Wert beim Aufruf der Methode in eine Zeichenfolge umzuwandeln. Beispielsweise überschreibt Array.prototype.toString Object.toString() (auch bekannt als Methodenschatten).

但是当你在普通的 JavaScript 对象上调用 toString() 时,引擎会给出“[object Object]”,因为 Object.toString()默认行为是由实体类型(在这种情况下为Object)返回字符串 object

现在让我们把注意力集中在 JavaScript 比较运算符上,它们与算术运算符一样奇怪。

等于还是不等于?

JavaScript 中有两个主要的比较运算符。

第一个我们称之为“弱比较”。这是抽象比较运算符(双等号):==

另一个是“强比较”,可以通过三等号进行识别:=== 也称为严格比较运算符。它们两者的行为方式完全不同。

来看一些例子。首先,如果我们将两个字符串与两个运算符进行比较,我们得到相同的结果

"hello" == "hello"
> true

"hello" === "hello"
> true
Nach dem Login kopieren

看上去一切都还好。

现在尝试比较两种不同的类型,数字和字符串。首先是“强比较”:

1. "1" === 1
2. false
Nach dem Login kopieren

这说得通!字符串“1”与数字1是不同的。但是“弱比较”会发生什么?

1. "1" == 1
2. true
Nach dem Login kopieren

居然是true!它没有任何意义,除非这种行为与我们之前看到的隐式转换有关。

如果适用相同的规则怎么办?没错! ECMAScript spec 再次罢工。结果抽象比较运算符在比较它们之前在类型之间进行自动转换。这是规范的摘要:

比较 x == y 执行如下:

如果 x 是 String 且 y 是Number,则返回比较结果 ToNumber(x)== y

规范说:如果第一个操作数是一个字符串,第二个操作数是一个数字,那么将第一个操作数转换为数字。有趣。

JavaScript 规范充满了这个疯狂的规则,我强烈鼓励大家对它深入挖掘。

在此期间除非你有充分的理由否则在 JavaScript 代码中避免使用抽象比较运算符。你以后会感谢自己的。

那么“强势比较”怎么样?规范中的说 严格相等比较在把值与三等 === 进行比较之前没有进行自动转换。在代码中使用严格相等比较可以避免愚蠢的 bug。

总结

JavaScript 中有七个构建块,即 StringNumberBooleanNullUndefinedObjectSymbol。这些类型被称为基元

JavaScript 开发人员可以使用算术和比较运算符来操作这些类型。但是我们要特别注意加法运算符 +抽象比较运算符 ==,它本质上倾向于在类型之间进行转换。

JavaScript 中的隐式转换称为强制类型转换,并在 ECMAScript 规范中定义。无论什么时候你的代码都要使用严格的比较运算符 === 而不是 ==

作为最佳实践,当你打算在两种类型之间进行转换时,请务必明确操作。JavaScript 有一堆内置对象,它们反映了原始类型:StringNumberBoolean。这些内置类型可用于在不同类型之间进行显式转换。

Das obige ist der detaillierte Inhalt vonEinführung in die erzwungene Typkonvertierung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage