Heim Web-Frontend Front-End-Fragen und Antworten JavaScript-Typkonvertierung (ausführliche Erklärung und Beispiele)

JavaScript-Typkonvertierung (ausführliche Erklärung und Beispiele)

Jan 12, 2022 pm 06:05 PM
html javascript 前端

Dieser Artikel vermittelt Ihnen Kenntnisse über die Typkonvertierung in JavaScript, die Konvertierung von Werten in Grundwerte, die Konvertierung in Zahlen und die Konvertierung in Zeichenfolgen, was den drei abstrakten Operationen innerhalb der Engine entspricht: ToPrimitive(), ToNumber(), ToString() , ich hoffe, es wird für alle hilfreich sein.

JavaScript-Typkonvertierung (ausführliche Erklärung und Beispiele)

JavaScript-Additionsregeln

In JavaScript gibt es eigentlich nur zwei Situationen:

  • Zahlen zu Zahlen hinzufügen

  • Strings zu Strings hinzufügen

Alle anderen Wertetypen werden automatisch in diese beiden Wertetypen konvertiert

In JavaScript gibt es zwei Wertetypen:

  • Die ursprünglichen Werte sind: undefiniert, null, boolean ) , Zahl, Zeichenfolge, Symbol

  • Objektwert: Alle anderen Werte sind Objekttypwerte, einschließlich Arrays und Funktionen

Typkonvertierung

Der Additionsoperator löst drei Typkonvertierungen aus: Konvertieren Wert in einen Grundwert umwandeln, in eine Zahl umwandeln und in einen String umwandeln, was den drei abstrakten Operationen innerhalb der JavaScript-Engine entspricht: ToPrimitive(), ToNumber() , ToString()

Konvertieren Sie den Wert in das Original Wert durch ToPrimitive()

ToPrimitive(input, PreferredType?)
Nach dem Login kopieren

Der optionale Parameter PreferredType kann Number oder String sein, er stellt nur eine Konvertierungspräferenz dar und das Konvertierungsergebnis muss nicht unbedingt dieser Parameter sein Der Typ, auf den verwiesen wird, aber das Konvertierungsergebnis muss sein ein primitiver Wert. Wenn der PreferredType als Zahl markiert ist, werden die folgenden Operationen ausgeführt, um den Eingabewert zu konvertieren (§9.1):

  • Wenn der Eingabewert bereits ein primitiver Wert ist, wird er direkt zurückgegeben

    Andernfalls, wenn der Eingabewert ein Objekt ist, rufen Sie die Methode valueOf() des Objekts auf. Wenn der Rückgabewert der Methode valueOf() ein primitiver Wert ist, geben Sie den ursprünglichen Wert zurück.
  • Andernfalls rufen Sie toString auf ()-Methode dieses Objekts. Wenn der Rückgabewert der toString()-Methode ein primitiver Wert ist, geben Sie den primitiven Wert zurück. Andernfalls wird eine TypeError-Ausnahme ausgelöst String, die Reihenfolge des zweiten und dritten Schritts des Konvertierungsvorgangs wird umgekehrt. Wenn kein PreferredType-Parameter vorhanden ist, wird der Wert von PreferredType automatisch gemäß den folgenden Regeln festgelegt: Objekte vom Typ „Datum“ werden auf „String“ festgelegt, andere Der Typwert wird auf „Number“ gesetzt.

  • Konvertieren Sie den Wert in eine Zahl mit „ToNumber()“. value Das Objekt wird in einen Grundwert konvertiert und dann wird ToNumber() aufgerufen, um diesen Grundwert in eine Zahl umzuwandeln.

  • Konvertieren Sie den Wert über ToString() in eine Zeichenfolge Wenn value ein Objekt ist, wird zuerst ToPrimitive(obj, String) aufgerufen, um das Objekt in einen primitiven Wert umzuwandeln, und dann wird ToString() aufgerufen, um den primitiven Wert in einen String umzuwandeln
    var obj = {
        valueOf: function () {
            console.log("valueOf");
            return {}; // 没有返回原始值
        },
        toString: function () {
            console.log("toString");
            return {}; // 没有返回原始值
        }
    }
    Nach dem Login kopieren

    Number wird als Funktion (anstatt als Konstruktor aufgerufen) aufgerufen, die ToNumber()-Operation wird intern in der Engine aufgerufen:

    Number(obj)
    // output
    valueOf
    toString
    Uncaught TypeError: Cannot convert object to primitive value
    String(obj)
    // output
    toString
    valueOf
    Uncaught TypeError: Cannot convert object to primitive value
    Nach dem Login kopieren

Addition

    value1 + value2
Nach dem Login kopieren
Bei der Berechnung dieses Ausdrucks wird die Operation Die Schritte lauten wie folgt:

Kombinieren Sie die beiden Operanden und konvertieren Sie sie in primitive Werte (das Folgende ist eine mathematische Notation, kein JavaScript-Code): JavaScript-Typkonvertierung (ausführliche Erklärung und Beispiele)

    prim1 := ToPrimitive(value1)
    prim2 := ToPrimitive(value2)
Nach dem Login kopieren

PreferredType wird weggelassen, daher werden Werte vom Typ Date angenommen String und Werte anderer Typen nehmen Number an.

Wenn prim1 oder prim2 einer von ihnen ein String ist, konvertieren Sie den anderen in einen String und geben Sie dann das Ergebnis der beiden String-Verkettungsoperationen zurück

JavaScript-Typkonvertierung (ausführliche Erklärung und Beispiele) Andernfalls konvertieren Sie sowohl prim1 als auch prim2 in numerische Typen und geben deren Summe zurück.

[]+[]

Ausgabe: ''

[] wird in einen primitiven Wert konvertiert. Probieren Sie zuerst die Methode valueOf() aus und geben Sie das Array selbst zurück (dieses):

> var arr = [];
> arr.valueOf() === arr
true
Nach dem Login kopieren
so Das Ergebnis ist kein primitiver Wert, daher wird die toString()-Methode erneut aufgerufen und gibt eine leere Zeichenfolge zurück (was ein primitiver Wert ist). Daher ist das Ergebnis von [] + [] tatsächlich die Verkettung zweier leerer Zeichenfolgen
> [] + {}
'[object Object]'
Nach dem Login kopieren

{} + {}

  • Ausgabe: NaN

Das erste {} wird vom JavaScript interpretiert Motor Es wurde zu einem leeren Codeblock und ignorierte ihn

  • Das Pluszeichen hier ist kein binärer Operator, der eine Addition darstellt, sondern ein unärer Operator, der die darauf folgenden Operanden in Zahlen umwandelt, und die Funktion Number () ist genau dieselbe. Zum Beispiel:

+{}
Number({})
Number({}.toString())  // 因为{}.valueOf()不是原始值
Number("[object Object]")
NaN
Nach dem Login kopieren
> {} + []
0
Nach dem Login kopieren
  • {} 忽略

  • +[] = Number([]) = Number([].toString()) = Number("") = 0

有趣的是,Node.js的REPL在解析类似的输入时,与Firefox和Chrome(和Node.js一样使用V8引擎)的解析结果不同.下面的输入会被解析成一个表达式,结果更符合我们的预料:

> {} + {}
'[object Object][object Object]'
> {} + []
'[object Object]'
Nach dem Login kopieren

总结

对象.valueOf() === 对象

数组对象.toString() === 数组对象.join()

对象.toString() === "[object Object]"

Javacript 中 + 号工作:

  • 数字 + 数字

  • 字符串 + 字符串

【相关推荐:javascript学习教程

Das obige ist der detaillierte Inhalt vonJavaScript-Typkonvertierung (ausführliche Erklärung und Beispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles