Maison  >  Article  >  interface Web  >  Conversion de type JavaScript (explication détaillée et exemples)

Conversion de type JavaScript (explication détaillée et exemples)

WBOY
WBOYavant
2022-01-12 18:05:501800parcourir

Cet article vous apporte des connaissances sur la conversion de type en JavaScript, la conversion de valeurs en valeurs primitives, la conversion en nombres et la conversion en chaînes, ce qui correspond aux trois opérations abstraites à l'intérieur du moteur : ToPrimitive(), ToNumber(), ToString() , j'espère que cela sera utile à tout le monde.

Conversion de type JavaScript (explication détaillée et exemples)

Règles d'addition JavaScript

En JavaScript, les règles d'addition sont en fait très simples. Il n'y a que deux situations :

  • Ajouter des nombres à des nombres

  • Ajouter des chaînes à des chaînes

  • .

Tous les autres types de valeurs seront automatiquement convertis en ces deux types de valeurs

En JavaScript, il existe deux types de valeurs :

  • Les valeurs d'origine sont : undefined, null, boolean ) , nombre, chaîne, symbole

  • Valeur d'objet : toutes les autres valeurs sont des valeurs de type objet, y compris les tableaux et les fonctions

conversion de type

L'opérateur d'addition déclenchera trois conversions de type : convertir le valeur en valeur primitive, convertie en nombre et convertie en chaîne, ce qui correspond aux trois opérations abstraites à l'intérieur du moteur JavaScript : ToPrimitive(), ToNumber() , ToString()

Convertir la valeur à l'original valeur via ToPrimitive()

ToPrimitive(input, PreferredType?)

Le paramètre facultatif PreferredType peut être Number ou String, il représente uniquement une préférence de conversion, et le résultat de la conversion ne doit pas nécessairement être ce paramètre. Le type auquel il fait référence, mais le résultat de la conversion doit être une valeur primitive. Si le PreferredType est marqué comme Number, les opérations suivantes seront effectuées pour convertir la valeur d'entrée (§9.1) :

  • Si la valeur d'entrée est déjà une valeur primitive, renvoyez-la directement.

    Sinon, si la valeur d'entrée est un objet, appelez la méthode valueOf() de l'objet. Si la valeur de retour de la méthode valueOf() est une valeur primitive, renvoyez la valeur d'origine
  • Sinon, appelez toString. () de cet objet. Si la valeur de retour de la méthode toString() est une valeur primitive, renvoie la valeur primitive
  • Sinon, lancez une exception TypeError
  • Si le PreferredType est Si l'indicateur est. String, l'ordre des deuxième et troisième étapes de l'opération de conversion sera inversé S'il n'y a pas de paramètre PreferredType, la valeur de PreferredType sera automatiquement définie selon les règles suivantes : Les objets de type Date seront définis sur String, autre. La valeur de type sera définie sur Number.

Convertissez la valeur en nombre via ToNumber()

Si la valeur d'entrée est un objet, ToPrimitive(obj, Number) sera d'abord appelé pour convertir le value L'objet est converti en une valeur primitive, puis ToNumber() est appelé pour convertir cette valeur primitive en nombre Conversion de type JavaScript (explication détaillée et exemples)

Convertissez la valeur en chaîne via ToString()

Si l'entrée. value est un objet, alors ToPrimitive(obj, String) sera d'abord appelé pour convertir l'objet en une valeur primitive, puis ToString() sera appelé pour convertir la valeur primitive en chaîne Conversion de type JavaScript (explication détaillée et exemples)

demo

.

var obj = {
    valueOf: function () {
        console.log("valueOf");
        return {}; // 没有返回原始值
    },
    toString: function () {
        console.log("toString");
        return {}; // 没有返回原始值
    }
}
Number est appelée en tant que fonction ( (plutôt que d'être appelée en tant que constructeur), l'opération ToNumber() sera appelée en interne dans le moteur :
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

Addition

    value1 + value2
Lors du calcul de cette expression, l'opération les étapes sont les suivantes :

Combinez les deux Les opérandes sont convertis en valeurs primitives (ce qui suit est une notation mathématique, pas du code JavaScript) :
  •     prim1 := ToPrimitive(value1)
        prim2 := ToPrimitive(value2)

    PreferredType est omis, donc les valeurs de type Date prennent La chaîne et les valeurs d'autres types prennent Number.

Si prim1 ou prim2 Si l'un d'entre eux est une chaîne, convertissez l'autre en chaîne, puis renvoyez le résultat des deux opérations de concaténation de chaînes
  •  ;

    Sinon, convertissez prim1 et prim2 en types numériques et renvoyez leur somme.
[]+[]

Sortie : ''

[] sera converti en une valeur primitive, essayez d'abord la méthode valueOf(), renvoyez le tableau lui-même (this) :

> var arr = [];
> arr.valueOf() === arr
true

comme ça Le résultat n'est pas une valeur primitive, donc la méthode toString() est appelée à nouveau, renvoyant une chaîne vide (qui est une valeur primitive). Par conséquent, le résultat de [] + [] est en fait la concaténation de deux chaînes vides

> [] + {}
'[object Object]'

{} + {}

Sortie : NaN

Le premier {} sera interprété par le JavaScript. moteur Il est devenu un bloc de code vide et l'a ignoré
  • Le signe plus ici n'est pas un opérateur binaire représentant l'addition, mais un opérateur unaire, qui convertit les opérandes qui le suivent en nombres, et la fonction Number () est exactement la même. Par exemple :
+{}
Number({})
Number({}.toString())  // 因为{}.valueOf()不是原始值
Number("[object Object]")
NaN
> {} + []
0
  • {} 忽略

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

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

> {} + {}
'[object Object][object Object]'
> {} + []
'[object Object]'

总结

对象.valueOf() === 对象

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

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

Javacript 中 + 号工作:

  • 数字 + 数字

  • 字符串 + 字符串

【相关推荐:javascript学习教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer